mmdc not generating labels for SVG outputs

[radupotop]

Describe the bug

mmdc does not generate labels when outputting SVG files.
This happens for flow charts and class charts on my machine, but not for sequence diagrams for example.

To Reproduce
Steps to reproduce the behavior:

echo "graph TD; THIS-->THAT; THAT-->THIS" | mmdc -i -

Output:

Expected behavior

The graph should include labels like so:

Desktop (please complete the following information):

• Linux x86_64 6.8.9
• gtk2 2.24.33-3
• gtk3 3.24.41-1
• gtk4 4.14.4-1
• cairo 1.18.0-2
• pango 1.52.2-1

My gut feeling is this is related to rendering on my machine (pango, cairo, etc).

[radupotop]

Opened a corresponding issue here with librsvg:
https://gitlab.gnome.org/GNOME/librsvg/-/issues/1082

[radupotop]

It looks like this is an issue with mermaid-cli after all:

This SVG uses foreignObject to embed HTML text. Supporting this would basically involve having a whole HTML renderer inside librsvg. Please tell mermaid-cli to use SVG text elements instead.

[threepistons]

I have this problem too.

• Debian 12.7
• Linux kernel 6.1.0-23-amd64
• libpango 1.50.12+ds-1
• libcairo 1.16.0-7
• libgtk3 3.24.38-2~deb12u2
• libgtk2 2.24.33-2+deb12u1

My input Markdown file and output PNG and SVG files are attached, as are how Inkscape and Gwenview render the SVG file.
wardrobe-sort.md

[aloisklink]

Some diagrams have a htmlLabels: false config setting that you can pass that might stop them from using <foreignObject>/embedded HTML.

However, even if you do do this, some Mermaid diagrams still use CSS which is valid in the SVG 2.0, but isn't valid in SVG 1.1 that many libraries like support (see mermaid-js/mermaid#2102 and #447)

As a work-around, you could try asking mermaid-cli to make a PDF file, then using a tool like pdf2svg to create an SVG file from that PDF: mermaid-js/mermaid#2102 (comment)

[radupotop]

@aloisklink thanks, i tried creating a config file with { "htmlLabels": false } – not sure if i'm doing it right. But the resulting output from

echo "graph TD; A-->B; A-->C; B-->D; C-->D;" | mmdc -i /dev/stdin -c config.json -o output.svg

still has foreignObject tags.

[aloisklink]

It might need to be { "flowchart": { "htmlLabels": false } }

E.g. the following diagram seems to not use <foreignObject> for the text in mermaid.live

```mermaid
---
config:
    # This htmlLabels at the root level of the config seems to do nothing
    # htmlLabels: false
    flowchart:
        htmlLabels: false
---
flowchart TD
    A
```

I'm not entirely sure why, since mermaid-js/mermaid#1431 seems to recommend using htmlLabels only at the root level and that "flowcharts": { "htmlLabels": false } would soon not work, but currently it seems to be the other way around! Unfortunately, the https://mermaid.js.org/config/schema-docs/config.html page is not very well documented so it's hard to know what many of the options do!

[radupotop]

Ok so that seems to work now:

config.json:

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

command:

echo "graph TD; A-->B; A-->C; B-->D; C-->D;" | mmdc -i /dev/stdin -c config.json -o output.svg

output:

[radupotop]

Ok so this appears to be a well known issue:

mermaid-js/mermaid#2102
mermaid-js/mermaid#2485
mermaid-js/mermaid#1845
mermaid-js/mermaid#1572
mermaid-js/mermaid#1395
mermaid-js/mermaid#1177
mermaid-js/mermaid#2688