Show HN: GUI for editing Mermaid class diagrams

145 points40 comments10 hours ago
dominicdewalt

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!

show comments
philfreo

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.

show comments
Xmd5a

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.

show comments
elashri

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.

maho

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)

show comments
sergius

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

show comments
Celeo

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

Thanks for sharing!

show comments
ConfusedDog

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

mlhpdx

Do Mermaid class diagrams support generics (parameterized types)?

show comments
sirjaz

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

tomovo

Is there a demo available without creating an account?

show comments