Flowcharts exported to SVG don't have connecting lines

[cskeeters]

Description

When i used mmdc to convert a flowchart to SVG and then import it to Microsoft Word, the lines that connect the nodes are not visible.

NOTE: MS Word added support for importing SVGs in 2019 and I like the idea of having vector-based graphics to avoid jaggies.

With htmlLabels: false, the labels and everything works except for the lines.

mmdc -c config.json -i bug.mmd -o bug.svg

with bug.mmd

%%{init: {'theme':'neutral'}}%%
flowchart LR
    START(START) --> STOP(STOP)

and config.json

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

After narrowing down the issue, I found that a bug in Microsoft Word related to how they process SVGs. The flowchart is exported with path elements that make the lines. They are styled with CSS including a .edge-pattern-solid selector that sets stroke-dasharray:0;. If the value is changed to none or 1 0, the lines show when the SVG is imported into MS Word.

According to the SVG Spec for stroke-dash, a any number of zeros should result in a solid line, but that's on of the last sentences and I bet it was overlooked. Why have a special case for none, 0, 0 0, etc...?

I noticed other people have issues with lines not showing in other non-browsers (#2102), and it makes me wonder if this is the same culprit.

Steps to reproduce

1. Compile to SVG
2. Click Picture from File... on the Insert Ribbon of MS Word.

Screenshots

Code Sample

No response

Setup

• Mermaid version: 10.9.1
• Microsoft Word for Mac Version 16.87 (24071426)

Suggested Solutions

For me, I'm going to run sed on the SVG output to fix the issue and move on, but I through I'd report the issue and suggest that none be used in place of 0.

For anyone else wanting to use sed to get by for now:

sed -i '' -re 's/edge-pattern-solid{stroke-dasharray:0;/edge-pattern-solid{stroke-dasharray:none;/' bug.svg

Seems like this might need to be changed in multiple places. This might be one of them.

Additional Context

No response