Live data from Hacker News

Show HN: GUI for editing Mermaid class diagrams

docs.mermaidchart.com

41–50 of 64 posts

Re: Show HN: GUI for editing Mermaid class diagrams

#41
post #19

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

Hi! I'm Akshatha from the Product team at Mermaid Chart :)

While Draw.io's integration with Mermaid and the availability of plug-ins for VSCode and other IDEs are great, they primarily support programmatic editing of diagrams. What sets Mermaid Chart apart is its bi-directional editing capability. You can edit the code to update the diagram and make changes directly to the diagram, which will automatically reflect in the code.

Currently, this two-way editing functionality is available for class diagrams and flowcharts, but we're excited to expand it to other popular diagram types in the future. Stay tuned!

Re: Show HN: GUI for editing Mermaid class diagrams

#42

Earlier quoted context omitted.

I settled on excalidraw via obsidian https://github.com/zsviczian/obsidian-excalidraw-plugin

This is really impressive! Excalidraw does some great work. Did you try Mermaid's integration with Obsidian? What was lacking and what ultimately hooked you on Excalidraw?

The only reason anyone uses mermaid is because it's low friction and most editors support it out of the box or through plugins.

But its layouting engine sucks and everything requires hacks and workarounds and configuration tweaks to display properly. Only the most trivial graphs render nicely on the first try.

All I really want to do is define how to actually lay out the blocks using a DSL so that they don't look like absolute shit. I hate drag and drop UIs and I hate mermaid. There's no decent code-first diagram building tool out there, let alone one that I can embed into my notes as easily as mermaid.

Re: Show HN: GUI for editing Mermaid class diagrams

#43
post #22

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 mac…

We make (and sell) one, you can play with it here: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay... Bigger example: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG... (I don't like to self promo on competitor posts, but since Mermaid doesn't compete in making its own layout engine I felt sharing this under this thread is relevant to HN. If anyone from Mermaid finds it in poor taste just le…

I tried TALA and am surprised to learn it embeds a machine learning model. I settled on ELK (very complex and time consuming to get right), before getting interested in constraint based graph layout (mostly for aligning nodes). Symmetry is nice to have too.

In fact what I'm trying to do is generating beautiful flow graph illustrations like this (non-sensical, just to give you a vibe):

https://th.bing.com/th/id/OIG4.sqo88280g1BDb7r2aORg?pid=ImgG...

Tis hard. Graph layout (bites fist). Layout based image diffusion (tears). One day though.

Re: Show HN: GUI for editing Mermaid class diagrams

#44
post #22

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 mac…

Hi! I'm Dominic from the Mermaid product team. You raise some good points here. We released the whiteboard to help users get an exact layout they'd like, but it's in its early stages and is undergoing a lot of improvements. I understand that automatic layout algos is one of the big draws of Mermaid since it creates a lot of speed, but our current layouts can get a little convoluted. I like your idea on creating a mac…

I have been using the beta and would certainly appreciate a few more layouts. You can have a look at yEd for inspiration. Otherwise, it looks very promising!

Re: Show HN: GUI for editing Mermaid class diagrams

#45
post #22

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 mac…

Hi! I'm Dominic from the Mermaid product team. You raise some good points here. We released the whiteboard to help users get an exact layout they'd like, but it's in its early stages and is undergoing a lot of improvements. I understand that automatic layout algos is one of the big draws of Mermaid since it creates a lot of speed, but our current layouts can get a little convoluted. I like your idea on creating a mac…

I think the main reason why diagrams are not used as often as they should to document code bases is that we developers have to face opposite yet complementary approaches: text based graph specifications (but then the layout's quality doesn't scale with graph size), or GUI based approaches that lead to way better results but are too costly to maintain.

The idea of using machine learning is just a kind of knee jerk reaction to this fact. Maybe we could just throw graphs at a graph neural network and have the model learn all the features we are interested in without listing them explicitly (let alone the rules to decide which to prioritize). It's more an art than a science, really.

Among those listed in these papers[1][2] those I am the the most interesting in, beyond the usual overlap minimization, edge crossing and edge length reduction are the following:

    symmetry/alignment
    hierarchical layouts (subgraphs within nodes)
    Fine-grained control of flow direction (doesn't have to be the same in each subgraph)
    
Those are the features that have constrained the most my search for a diagram engine. Aesthetics (I mean readability) is paramount to using diagrams as documentation IMO. They are not just graphs, they are mental palaces.

A palace's layout must not change if you decide to build an extension. Stability isn't guaranteed with most graph layout algos: add a node and you might end up with a graph that doesn't look like the previous version. Nodes shifts, edges move around. Confusing. There has been research in this direction[3], namely "interactive graph layout". It forces us to move away from a stateless approach to graph generation (graph specification -> picture) and into a stateful paradigm where the previous state of the layout will be preserved to some extent in the new version. With the layout specified as a mixture of previous layout state + constraints I could picture a pipeline where an LLM watches the commit log of some git repo and updates diagrams via semantic reasoning automatically with a 90% success rate, while the remaining 10% is left to the developer to fix.

And there is also "UI-bility". A high degree of customization, being able to plug your own (react,vue,whatever) components into a graph can turn it into a monitoring tool. I wrote an (incomplete) debugger for a go-style channel framework that displays interactions as sequential diagrams, and, although neither D2 nor PlantUML offer this, I had to give up on using the former because it did not provide on-hover tool-tips, which was critical for my use case.

[1] https://nrl.northumbria.ac.uk/id/eprint/16689/1/survey_graph...

[2] in particular chapter 6, https://repository.library.northeastern.edu/files/neu:4f196k...

[3] https://rtsys.informatik.uni-kiel.de/~biblio/downloads/paper...

Re: Show HN: GUI for editing Mermaid class diagrams

#46
post #43

Earlier quoted context omitted.

We make (and sell) one, you can play with it here: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay... Bigger example: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG... (I don't like to self promo on competitor posts, but since Mermaid doesn't compete in making its own layout engine I felt sharing this under this thread is relevant to HN. If anyone from Mermaid finds it in poor taste just le…

I tried TALA and am surprised to learn it embeds a machine learning model. I settled on ELK (very complex and time consuming to get right), before getting interested in constraint based graph layout (mostly for aligning nodes). Symmetry is nice to have too. In fact what I'm trying to do is generating beautiful flow graph illustrations like this (non-sensical, just to give you a vibe): https://th.bing.com/th/id/OIG4.s…

Wondering where the machine learning model comes into play? Googling doesn’t seem to bring me to an article and the terrastruct site doesn’t mention it as far as I can see.

Re: Show HN: GUI for editing Mermaid class diagrams

#47
post #45

Earlier quoted context omitted.

Hi! I'm Dominic from the Mermaid product team. You raise some good points here. We released the whiteboard to help users get an exact layout they'd like, but it's in its early stages and is undergoing a lot of improvements. I understand that automatic layout algos is one of the big draws of Mermaid since it creates a lot of speed, but our current layouts can get a little convoluted. I like your idea on creating a mac…

I think the main reason why diagrams are not used as often as they should to document code bases is that we developers have to face opposite yet complementary approaches: text based graph specifications (but then the layout's quality doesn't scale with graph size), or GUI based approaches that lead to way better results but are too costly to maintain. The idea of using machine learning is just a kind of knee jerk rea…

Re: mental palaces and interactive diagrams, what is your take on Ilograph?

Re: Show HN: GUI for editing Mermaid class diagrams

#49
post #2

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)

FWIW, I find MermaidChart's sequence diagram editor better than the sequencediagram.org one!

Re: Show HN: GUI for editing Mermaid class diagrams

#50

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…

Hi there, Mermaid CEO here:) I hear you on the whiteboard. It's still in its early days. Should be substantially improved in the coming months. To clarify on mermaidchart.com and mermaid.live, we are the same team. Mermaid.live is our fully open source hosted editor. This was the original editor for our 10 year old open source project. The creator of Mermaid recently founded mermaidchart.com with the CEO of Gitlab's…

Mermaid CEO is probably the coolest title I've ever heard
Post reply on HN