FlowChart visualization broken when downloading from live editor

[MoeweX]

Hi,

when I download a flow chart SVG from the live editor, all boxes are empty (the text is not shown), even though the diagram looks fine in the live editor. Other diagrams seem to work.

E.g. this

looks like this

after I downloaded it.

Here is the generated SVG code of the visualization (as txt, because GitHub does not allow SVG).
diagram.txt

Anyone knows what the cause might be?

[dewiniaid]

Ran into this problem today as well when attempting to open the SVG files in Inkscape. Oddly enough, subgraph titles would show but not the contents of the various shapes.

It looks like the issue is contents being output like this:

<foreignObject width="219" height="22"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Some text here</div></foreignObject>

rather than

<text x="0" y="-90.5" fill="black" stroke="none" id="mermaidChart892Text" style="text-anchor: middle;">Some text here</text>

Chrome can render the SVG correctly (no surprise, really, because I think the SVG is what you're seeing in realtime in the editor), but Inkscape cannot and I suspect many other SVG tools cannot either.

Note the CLI known issues currently state:

• SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.
• SVG output is decidedly non-standard. It works, but may cause issues in some viewers.

[tylerlong]

Try again: https://mermaidjs.github.io/mermaid-live-editor

Feel free to reopen or create a new issue.