Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLI: Invisible text, lines in SVG output #341

Closed
Billiam opened this issue Apr 7, 2016 · 8 comments
Closed

CLI: Invisible text, lines in SVG output #341

Billiam opened this issue Apr 7, 2016 · 8 comments

Comments

@Billiam
Copy link
Contributor

Billiam commented Apr 7, 2016

When 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:

simple mmd

Version info

$ phantomjs --version
1.9.8

$ mermaid --version
0.5.8
@buliaoyin
Copy link

I got the same issue with v0.5.8

@buliaoyin
Copy link

buliaoyin commented May 26, 2016

Seems like svg generated by CLI got a incorrect lowercase rule type '.edgepath' instead of '.edgePath'.
Seems the document.styleSheets in function utils.cloneCssStyles() got lowercase rule types.

@lancechentw
Copy link

+1, I got .edgepath and .edgelabel instead of .edgePath and .edgeLabel in mermaid 6.0.0

@knsv
Copy link
Collaborator

knsv commented Jan 29, 2017

Closed by release 7.0.0, please reopen if issues remain.

@knsv knsv closed this as completed Jan 29, 2017
@Kochise
Copy link

Kochise commented Nov 12, 2020

d:\mermaid_test>npx mmdc -V
8.8.2-beta.8

Issue remains

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*] 

d:\mermaid_test>npx mmdc -i state.mmd -o state.svg

state

However I got correct case, '.edgePath' and '.edgeLabel'

@Kochise
Copy link

Kochise commented Nov 12, 2020

Btw, if I export to pdf format, it is ok, but the picture doesn't fit the whole page, hence importing the pdf instead of the svg gets a bad layout.

@alexpovel
Copy link

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).

@SudoCerb
Copy link

SudoCerb commented Jan 8, 2024

Can confirm that this issue persists, having exported an SVG from https://mermaid.live/edit today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants