search

mermaidjs / mermaid-live-editor

Location has moved to https://github.com/mermaid-js/mermaid-live-editor
https://mermaidjs.github.io/mermaid-live-editor/
MIT License
975 stars 181 forks source link

svg/png/pdf not rendering correctly. textbox is small than text #66

Open tingtingr opened 4 years ago

tingtingr commented 4 years ago

Hi guys,

I noticed that the svg/png/pdf files were not generated incorrectly. When we used the online editor, the preview graph was great but if we wanted to generate a svg, the textboxes were all a bit shorter than the texts so the texts were cut off. I have also tried to use the mermaid-cli to generate the svg/png/pdf locally and I have encountered the same issue. The issue seems to be caused by a different font size. Would you guys mind fixing it? Thank you so much! It would be a great help!

For example: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ

Preview:

Screen Shot 2019-10-23 at 09 48 56

Generated svg:

Screen Shot 2019-10-23 at 09 49 56

akshay-ranganath commented 4 years ago

I am seeing a similar issue. The text box seems to clip off the text. The issue occurs only when you download the SVG. The image displayed in the live editing view looks accurate. So it is only during the export that something goes wrong and the image text gets clipped.

When I run a diff between the SVG that is rendered within the viewport and the one downloaded, there seems to be no difference in the code. It is only in interpreting/displaying the SVG that things seem to go wrong. So it is more of a CSS related bug that doesn't materialize when SVG is displayed in the live editing mode.

Toto-Africa commented 1 year ago

I am experiencing the same error as OP. When I try to include my flowchart .svg file in a LaTeX text (using svg package), it gives the same blacked result as OP's provided figure.

I tried to convert the .svg to .eps, but the issue remained. I tried this using Cloud Convert service.