Show HN: GUI for Editing Mermaid Class Diagrams

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.

Hi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback!

It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: (https://calendly.com/dominic-01w/mermaid-shapers-product-int...)

Thanks for taking a look at our latest release!

I spent some time playing around with this recently and loved it at first. I also realized ChatGPT is pretty good at generating Mermaid diagrams (didn't try your own AI features).

However after getting into it some I ran into some significant frustrations. After creating a medium-complexity diagram, I was excited to see the Whiteboard feature to drag things around / improve the layout manually. But it really started breaking, it just wouldn't let me organize/drag things where I wanted, and I couldn't get things to not overlap. I also wished more diagram types supported Whiteboard (I noticed some didn't).

Also I some confusion between the capabilities of mermaidchart.com and mermaid.live. Are these competitors? Variations of similar apps. I was confused. Also "Playground" vs "Live Editor" is confusing.

Overall glad this exists and hope it continues to improve.

I only use diagramming tools with automatic layout algos to generate visualizations programmatically to debug things. For documentation purpose, I largely prefer to draw them by hand using OmniGraffle, because making graphs look nice using tools like graphviz is very complex and you find yourself abusing features to hack your vision into reality

What's dearly needed in my opinion is a graph layout algo based on a machine learning model (so that it can take into account readability and aesthetics). Unfortunately what I found so far is mostly concerned with displaying large graphs, which is kind of another domain altogether.

I hope Mermaid is collecting every single edition point that happens on their UI, that would make for a nice dataset I guess.

You lost me at Create your account. I would just want to play with the editor and store in the local browser storage until I decide I like it.

Nice! I love how mermaid keeps getting better!

For sequence-diagrams, nothing beats https://sequencediagram.org/ (I am not connected with them in any way, just a happy user)

I understand that it is different philosophy but I really would like to see the day when I can use Mermaid inside latex. Or at least get some robust mermaid to tikz converter. That would make my life much easy when preparing slides. I understand that exporting to PNG/JPG can work but usually you lose a lot of customization and you only know can make be bigger or smaller to fit the page.

I was exploring this yesterday and actually came acorss the new GUI that is being introduced in this submission. I ended up exporting to PNG and suffer with fitting it inside beamer page layout.

With Draw.io embedding Mermaid diagrams and plug-ins available for VSCode and other IDEs, why is this so special?

Heads up: the "Theme Customization in Toolbar" image isn't rendered.

Thanks for sharing!

The project itself is cool, but I'm doubtful on the philosophical side.

Mermaid aspires to be the Markdown of diagrams, so being editable and consumable via plaintext is paramount. If I have to use a visual editor, why not fetch for more powerful tools and be liberated from the limiting format?

This is akin to a WYSIWYG Markdown editor (which to be fair has a niche market). I would ask why not just use Google Doc or MS Word at that point?

I used this recently as someone shared a link to a diagram at work and I edited it for my own comprehension. It's nice. I'd prefer to have this in VSCode tho!

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

That's pretty cool. Wish PlantUML community would have something like it.

Do Mermaid class diagrams support generics (parameterized types)?

Is there a demo available without creating an account?

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.

This is great and all, but this would better be served as a desktop app with lower overhead.