Just black squares in Inkscape / other software then Browsers

[linus-ha]

Describe the bug
SVG in Inkscape is just shown as black squares.

To Reproduce
Put example class diagram in .mmd file and run
mmdc -i myfile.mmd -o ./out.svg

Expected behavior
Display diagram with styles instead of black squares

Screenshots

[aloisklink]

It sounds like this is caused by the main mermaid project: mermaid-js/mermaid#2102

Basically, Mermaid uses CSS variables, which are quite a new feature and are not supported in most SVG software except for browsers.

There are some work-arounds in that issue, e.g. using PDF -> SVG, using a custom CSS style-sheet, or going back to Mermaid v8.14.

Ideally, the main mermaid project would remove CSS variables from their style sheet to be compatible with more programs, but I've got no idea how much work that would be to implement.

[ghost]

It's not just CSS variables. Mermaid uses HTML elements, which are not SVG elements. From RazrFalcon/resvg#564 (comment)

Hm... this file is actually HTML pretending to be an SVG. See:

<foreignObject height="19" width="98.09375">
    <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
        <span class="nodeLabel">Sharing ideas</span>
    </div>
</foreignObject>

This is not SVG. No SVG library would be able to render it, only browsers.

The following issues appear to be duplicates, so this issue can probably be closed:

• SVG export does not work properly when the exported SVG is used outside Firefox mermaid#2102
• Render diagrams using non-browser-based rendering libraries mermaid#2485
• Replace foreignObject with standard SVG mermaid#2688
• Mermaid 8.0.0-rc.8 creates SVG files that do not display correctly in Inkscape and Latex #103

[aloisklink]

It's not just CSS variables. Mermaid uses HTML elements, which are not SVG elements.

👍 I think the HTML elements issue only affects flowcharts, and can be fixed by passing "flowchart": {"htmlLabels": false} in the Mermaid configuration file.

The following issues appear to be duplicates

Good catch. My gut feeling is to keep at least an issue in this repo open as well, since the main mermaid project is browser-only, so most people encountering this bug will be coming from this project. It might be better to re-open #103 and close this PR, but since that was a while ago, I'm not 100% sure if that was caused by the same bug.

[ghost]

I think the HTML elements issue only affects flowcharts

AFAICT, the issue affects most, if not all MermaidJS diagrams.

In my editor, KeenWrite, I can enter the following diagrams:

Flowchart:

``` diagram-mermaid
flowchart LR
    id1[This is the text in the box]
```
Class diagram

``` diagram-mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```

Sequence diagram

``` diagram-mermaid
sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
```

State diagram

``` diagram-mermaid
stateDiagram-v2
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0
```

The output:

Graphviz diagrams, OTOH, work flawlessly:

It's pretty easy to see that all the SVG files being generated tuck HTML elements inside for text instead of using the <text> SVG element.

[tensionhead]

Ran into the same issue today.. also looking at mermaid-js/mermaid#2485, and will try the workarounds presented in mermaid-js/mermaid#2102

EDIT: the rsvg-convert command erases all the text, so isnt' that useful
EDIT2: and I don't get the client to run on Ubuntu :/

[ghost]

@tensionhead -- The EchoSVG library is able to render a number of MermaidJS diagrams. Not perfect, but usually the text comes through okay. Depending on your use case, my text editor, KeenWrite, which integrates EchoSVG, may be helpful. See the tutorials for details.

[tensionhead]

Thanks @DaveJarvis , I got the mermaid client running now (see #572 ).. will check if the pdf output does what I need (import into inkscape).

EDIT: running the mmdc client with pdf output solved it for me.. the chart looks perfect in inkscape 🎉

[aloisklink]

EDIT: running the mmdc client with pdf output solved it for me.. the chart looks perfect in inkscape

This actually seems like a pretty great workaround.

Using mermaid-js/mermaid-cli with a PDF output, then using something like pdf2svg seems to work extremely well in creating an SVG that works with pretty much any platform.

The main issue is that all text is converted into paths, so people with screenreaders can't read the text, and users can't copy-and-paste text from the SVG. Some of the FontAwesome icons also have some weird colors.

If you care about accessibility, you can use inkscape to convert the PDF to SVG, and it keeps all of the text accessible! However, the results aren't as pretty as using pdf2svg.

[meeple142]

I am making an erDiagram on win 11 64bit
command: mmdc -i .\doc.mmd -e svg -t dark -b '#303030'
If I open the SVG in inkscape 1.3.2, the black boxes are there but if I then open the "Selectors and CSS" panel all the colors fix themselves ( Object > Selectors and CSS)
Hope this helps someone.