Comment by aloisklink

I think there are two slightly different issues here!

1. SVGs generated by Mermaid use the SVG 2 features, but other than browsers, most libraries only support SVG 1.1 features, i.e. <https://github.com/mermaid-js/mermaid/issues/2102>, which is what the other comment mentioned.

2. Mermaid requires a browser layout engine to render the diagrams (your issue), i.e. <https://github.com/mermaid-js/mermaid/issues/3650>. This is something I also really want to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project and we need to use Puppeteer/Headless Chrome to render mermaid diagrams, which isn't ideal.) However, I don't think this would be easy, since we'd need a browserless tool that supports a browser-like layout engine (although I'm hoping that [Servo][2] might eventually be able to support it).

And if you do want to do headless renders of Mermaid diagrams, I'd recommend using (or adapting, since the code is all MIT licensed and I'm not aware of one that uses Selenium):

- <https://github.com/mermaid-js/mermaid-cli>, which uses Puppeteer as the headless browser API.

- <https://github.com/remcohaszing/mermaid-isomorphic>, which uses Playwright as the headless browser API.

And make sure that whatever server is doing the headless renders of Mermaid diagrams has all the correct fonts installed!

[1]: https://github.com/mermaid-js/mermaid-cli

[2]: https://servo.org/