2

So I'm creating flowcharts using the Mermaid Live Editor which is a diagram creating program that allows me to export my flowcharts are svg files. The problem arises when I open the svg file in Inkscape to make some edits to the vector file, all the information is blacked out. The information is still there but the flowchart nodes are all blacked out and there's no connectors. Does anyone know why this occurs and if I can fix this somehow?

This is what the svg looks like when I export it from Mermaid SVG of Mermaid Flowchart

This is what the svg looks like when I import it into inkscape. I have the same problem in Visio as well. enter image description here

Jordan Williams
  • 41
  • 1
  • 2
    it looks like you have the styles in css. I suppose inkskape is not able to read the css and the shapes are filled black and no stroke: the default. – enxaneta Aug 20 '21 at 15:09
  • Its likely that that's the case. If so, how do I solve this problem in either Inkscape or Visio – Jordan Williams Aug 23 '21 at 22:34
  • i don't know how you can fix it in inkskape but if you can oppen it in a text editor you can add the fill and the stroke as attributes of the shapes: `fill = "blue" stroke="black"` – enxaneta Aug 24 '21 at 05:30
  • Make sure to use a recent Inkscape version. Inkscape should (and currently does) support CSS styles. If not, please report a bug. – Moini Sep 23 '21 at 21:04

2 Answers2

1

You can convert the svg-file from the Mermaid Live Editor to a pdf-file (e.g. via rsvg-convert) and then open the pdf-file in Inkscape. While this does not transfer the text elements, it does transfer all shape elements.

Michael Gruenstaeudl
  • 1,609
  • 1
  • 17
  • 31
  • I tried `rsvg-convert --format Svg mermaid-export-diagram.svg > mermaid-converted-diagram-withallshapes-but-no-text.svg`, but unfortunately the text was gone (rsvg-convert version 2.55.1). As a work around: I could successfully display the SVG in Opera browser as one would it expect to be (v.95.0.4635.37 it is like a Chrom(ium) browser), print it as PDF, import PDF in Inkscape (v.1.2), and text and shapes where there as expected with only very minor mistakes. – andreas.naturwiki Mar 29 '23 at 11:00
0

From my experience, SVG files created with mermaid cannot be displayed by any viewer properly despite the browser.

The issue is known like here and here.

The solution mentioned by a user in one of the references is to apply the configuration

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

and open it with an SVG viewer. Still, not every programme works well but Geeqie works fine.

Spixmaster
  • 143
  • 1
  • 3
  • 14