Replace foreignObject with standard SVG

[rgoubet]

Is your feature request related to a problem? Please describe.
An SVG file generated by Mermaid cannot be edited using Inkscape (all boxes are black). When inserting an SGV file to an Office document, text does not appear.

Describe the solution you'd like
Instead of using HTML code embedded in foreignObject elements, Mermaid should instead use simple text elements (similar to Graphviz) in order to ensure that the file can be processed by SVG-compatible any application.

Describe alternatives you've considered
An inkscape plugin exists to convert foreignObject elements, but it has approximate results.

Additional context
See also here.

[aloisklink]

Some diagrams have a htmlLabels: false option that you can use to remove <foreignObject> and use only SVG tags, see #58.

An SVG file generated by Mermaid cannot be edited using Inkscape (all boxes are black). When inserting an SGV file to an Office document, text does not appear.

I'm pretty sure this is also because of CSS issues, see #2102, since mermaid is using some newer CSS features that are not yet supported by Inkscape. Using simpler CSS might fix it.

[rgoubet]

You're right, using this config file generates better results:

{
    "flowchart": {
        "htmlLabels": "false"
    }
}

Office will display it correctly. In Inkscape, it will only after you open the style selector (probably a bug).

[aloisklink]

It might be possible to make htmlLabels the default setting. Apparently dagre-d3 had some issues with SVG styling, hence why they were using html labels, but that was back in 2015, it might be fixed now #58 (comment).

It's been reported too in mermaid-js/mermaid-cli#103 and https://gitlab.com/inkscape/inbox/-/issues/3268#note_378199615, so there's quite a big demand for it.

[ghost]

Relates to:

• Mermaid 8.0.0-rc.8 creates SVG files that do not display correctly in Inkscape and Latex mermaid-cli#103
• SVG export does not work properly when the exported SVG is used outside Firefox #2102
• Render diagrams using non-browser-based rendering libraries #2485
• SVG conformance ? #1845
• Flowchart rendered differently depending on whether "htmlLabels" is enabled or not #1572
• Move htmlLabells configuration out of flowchart to root #1431
• htmlLabels suport And CSS single Control #1395
• Label texts in flowcharts are not centered horizontally with "htmlLabels" disabled #1177
• Replace foreignObject with standard SVG #2688

[lmoellendorf]

Workaround

Generate a PDF:

~/node_modules/.bin/mmdc --input images/block/sync.mermaid --output ./images/block/sync.pdf --pdfFit

Use pdf2svg to extract SVG:

pdf2svg images/block/sync.pdf images/block/sync.0.svg

Now use inkscape to resize page to content (as in Inkscape and in Document Properties => Resize to content):
[EDIT: Not necessary if --pdfFit is used. @Foadsf thanks for to the hint.]

inkscape --export-area-drawing --export-filename=images/block/sync.svg images/block/sync.0.svg

[Foadsf]

@lmoellendorf why not using the --pdfFit option? 🤔