Show HN: GUI for editing Mermaid class diagrams

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/

It is pretty cool! But,

https://news.ycombinator.com/item?id=14908052

On a related subject, is there a tool to read code and generate Mermaid class diagrams, and, maybe, vice-versa?

Finally. I am not fond of code-to-diagram tools and wanted to try Mermaid, as it seems like one of the better diagramming tools around. Will definitely give it a try now.

My front end to mermaid is usually claude. I can’t count how many times trying to convey a complicated idea (last week, a one time use token in a 3 party where my backend can’t talk to the client) has been made simple to explain with a quick diagram claude made.

I am a paid mermaid account holder but claude is still my first front end, because it’s the tool I’m in most of the time anyway. What I’m excited for in the GUI is I can take that quick diagram and add the styling, colors, and hopefully move some of the boxes around such that the arrows are better than the auto layout drops them.

From reading the blog post, the first thing I’d like which is changing the visual colors and styling of individual boxes in the diagram might be missed. I find that the most time consuming thing to do manually with the code, I would love to see rich tools there.