CLI: Invisible text, lines in SVG output
See original GitHub issueWhen converting a graph to SVG with the mermaid CLI tool, paths and text are added to the SVG output, but are not visible when viewing the output file in Chrome or Inkscape.
The invisible lines appear to be caused by a missing stroke color, but I can’t tell what’s happening with the text.
Output appears correctly in the live editor, but the downloaded SVG appears to only be browser-friendly (I believe this is expected).
Actual mermaid call
$ mermaid -s simple.mmd
Graph input
graph TD
test-->test2
Test files
Input mmd file and output SVG and PNG files: simple.mmd.zip
PNG Output:
Version info
$ phantomjs --version
1.9.8
$ mermaid --version
0.5.8
Issue Analytics
- State:
- Created 7 years ago
- Comments:7
Top Results From Across the Web
<text> - SVG: Scalable Vector Graphics - MDN Web Docs
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, ...
Read more >How can I limit or clip text in SVG? - html - Stack Overflow
You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite. Relevant parts, defining the clip...
Read more >Text — SVG 2
The light-blue lines indicate the shift in baseline. SVG further assumes that for each glyph in the font data for a font, there...
Read more >Accessible SVGs | CSS-Tricks
A quick note on hiding elements (rect, circle, text) from AT in an SVG – The only way to “hide” elements from a...
Read more >Annotated List of Command-line Options - ImageMagick
If the SVG delegate library is not present, the option is ignored. Use +clip to disable clipping for subsequent operations. -clip-mask. Clip the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

d:\mermaid_test>npx mmdc -V 8.8.2-beta.8
Issue remains
d:\mermaid_test>npx mmdc -i state.mmd -o state.svg
However I got correct case, ‘.edgePath’ and ‘.edgeLabel’
Experienced the same issue opening the exported/downloaded SVG in InkScape. The browser (Firefox) renders it fine in a tab of its own. From that tab, I printed to PDF and opened that in InkScape, then saved as SVG after removing the cruft (select just the drawing, move away, select everything else remaining at the old location, delete, resize page to content, save as SVG).