v11: some complex HTML content is rendered as an empty node in flowcharts with Firefox

[djibe]

Description

Complex labels with HTML are rendered as empty nodes in flowcharts since v11 in Firefox (v130 tested) even though "flowchart.htmlLabels" is true.

I couldn't find any doc for migrating from v10 to v11 to solve this.

Steps to reproduce

Diagram link

1. Run the previous diagram with 10.x
2. Run the previous diagram with 11.x

Screenshots

v10

v11: bottom node with HTML is rendered as empty node

Code Sample

Link

Setup

• Mermaid version: 11.x
• Browser and Version: Firefox 130

Suggested Solutions

• HTML labels are interpreted the same

Additional Context

No response

[codekrolik2]

+1

mermaid
flowchart
    BEGIN([BEGIN])
    END([END])
    LOAD_CAMERAS_FROM_CONFIG[[LOAD_CAMERAS_FROM_CONFIG]]
    BEGIN([BEGIN]) --> LOAD_CAMERAS_FROM_CONFIG[[LOAD_CAMERAS_FROM_CONFIG]]
    LOAD_CAMERAS_FROM_CONFIG --> RUN_CHILD_FLOWS[[RUN_CHILD_FLOWS]]
    FINALIZE[[FINALIZE]]
    FINALIZE --> END([END])
    RUN_CHILD_FLOWS[[RUN_CHILD_FLOWS]]
    RUN_CHILD_FLOWS --> FINALIZE[[FINALIZE]]
    RUN_CHILD_FLOWS .-> Factory:CameraProcessRunnerFlow>Factory:CameraProcessRunnerFlow]
    RUN_CHILD_FLOWS .-> Factory:VideoChunkManagerFlow>Factory:VideoChunkManagerFlow]

[TTycho]

As Markdown Preview Enhanced recently updated Mermaid from 10.9.0 to 11.1.1 I noticed a similar issue. Since this update I get the text "Unsupported markdown: link" in the preview window in Mermaid nodes that contain a string starting with 'www.' or an email address. In the HTML exported version nothing appears in these blocks.

Environment

• OS: Linux
• VSCode: 1.92.2
• Markdown Preview Enhanced: 0.8.14
• Mermaid 11.1.1
• Node.js: 20.14.0

To Reproduce
Not sure what version Github is using but for me the boxes below A and B are empty:

flowchart
A -->mermaid("www.mermaidjs.org")
B -->me_example_com["[email protected]"]

Loading

Expected behavior

No links created

[pawel-bugalski]

I can confirm the problem.
Here is a small reproduction I've made:
https://mermaid.live/edit#pako:eNo9j7EOgzAMRH8l8tRKLO2YuWsn1iwuMQQpiSvjqFSIf28KAk_26Z1Pt0DHnsCCy33kTxdQ1GVT58Xz7eKg5UQmsxoNqCZyHozSrA6uJ3Y_MDSvcWdINmo3eaZpeyGUPclphQYSScLR1_zlrznQQIkc2Lp66rHEmuTyWlEsyu03d2BVCjUgXIYAtsc41au8PSo9RhwE04GQH5XluRfceq4_ZHRQQw

Note that this renders perfectly in Chrome 128.0.6613.120 but fails in Firefox 130.0

Firefox:

Chrome:

[FinnHuelsbusch]

Tested on firefox 130 and 131 under linux and windows. In all cases the same nodes are empty.
A good example is https://mermaid.js.org/config/math.html as the example is only partially rendered.

[theletterf]

Related: #5824

[FinnHuelsbusch]

It is worth noting though that #5824 appears both under chrome and firefox, while this bug only appears under firefox

[djibe]

Solved by #5856 (v11.2.1)