Render diagrams using non-browser-based rendering libraries

[ghost]

The following diagram renders fine in Firefox:

The diagram does not render correctly using the following programs and libraries:

• Adobe FrameMaker 2020
• Apache Batik
• EchoSVG
• svgSalamander
• resvg
• rsvg-convert
• svglib
• prawn-svg
• CairoSVG
• ConTeXt
• QtSVG
• MS Word
• PlutoSVG

Many applications rely on those libraries for rendering SVG diagrams. For example, my text editor KeenWrite uses Kroki to generate mermaid SVG documents. These documents are then parsed by EchoSVG to render as PNG images in FlyingSaucer.

In the following image, the rendered SVG output is shown at the right:

Other SVG producers, such as Graphviz, can generate SVG documents that can be rendered using the aforementioned libraries. See KeenWrite's screenshots for example image renders that use Kroki. The mermaid diagrams cannot be fully rendered.

Feature request: Have mermaid generate simpler CSS/SVG by default that can be parsed and rendered by the majority of those libraries.

[jgreywolf]

@DaveJarvis you mention MS Word - since word does not support adding SVG into documents, I am curious how you were able to verify this...

Mermaid Chart is working with MS to publish a plug in for Word, PowerPoint and OneNote that will allow users to insert diagrams from their mermaid chart library directly. Due to limitations in the Office model SVG is not supported, so we are rendering to PNG before insert.

Actually - now that I think about it, in PowerPoint you can insert an SVG, but I think it converts to PNG during the process (and as you have mentioned above, is not rendered correctly)

[jgreywolf]

Assigning to myself to review

[ghost]

@jgreywolf

• https://support.microsoft.com/en-au/office/edit-svg-images-in-microsoft-365-69f29d39-194a-4072-8c35-dbe5e7ea528c
• https://pcauthorities.com/how-to/word/insert-a-scalable-vector-graphics-svg-in-word-2019/
• https://www.makeuseof.com/tag/insert-edit-scalable-vector-graphics-office-2016/

Due to limitations in the Office model SVG is not supported, so we are rendering to PNG before insert.

That's unfortunate. An SVG format is usually selected because it doesn't lose resolution when scaled. Using PNG images only (partially) solves the problem of embedding into MS documents and still leaves at least 13 other libraries (and countless dependent applications) unable to render MermaidJS diagrams.

Is solving the deeper problem of having MermaidJS produce SVG-compliant output not feasible?

[jgreywolf]

I was just asking in regards to the MS Word part.
I am investigating the SVG-compliant aspect

[taylorh140]

I’m curious what actions need to be taken in moving this forward. Does this imply adding something like svgdom into the mermaid library, removing the variance in browser layout engines?

[taylorh140]

I was just asking in regards to the MS Word part.
I am investigating the SVG-compliant aspect

Also I thought word recently added svg support. I’ll have to check again.

[ghost]

Also I thought word recently added svg support. I’ll have to check again.

https://office-watch.com/2016/svg-graphics-coming-to-office-at-long-last/

[ghost]

FYI, in two days I will be locked out of my account once GitHub begins enforcing MFA. Sorry I won't be able to help any further.

[willcl-ark]

I am hitting this issue using prawn-svg. Has there been any update on not using foreignObject (embedded HTML) in mermaid diagrams?

[earonesty]

years later... it still doesn't render in most things besides browsers. pie charts work. i can clean up the svg manually and get it to work. might see about making a pr, so mermaid generates "easier" svg.

[geffen]

Just ran into this trying to take SVGs into anything Adobe - Photoshop, Indesign, etc... Corrupt file from their POV.

[carlosame]

Out there, people keep posting a "list of libraries that cannot render Mermaid files" taken from this issue, which includes the EchoSVG project that I manage. And although EchoSVG's Mermaid renderings aren't perfect, it is able to render many Mermaid diagrams since 2022 (after the OP of this issue asked for it).

You need to use the CSSTranscodingHelper which supports custom properties and other modern CSS.

Some examples from the EchoSVG test suite (the SVG was taken from Mermaid's website) follow:

However it often omits the text that overflows, yet that bug has little to do with foreignObject AFAIK:

So the output is far from perfect, but better than it used to be (and preferable to the "black squares" that I hear about).