←back to thread

Show HN: GUI for editing Mermaid class diagrams

(docs.mermaidchart.com)
159 points knsv | 5 comments | 17 Jan 25 15:36 UTC | HN request time: 0s | source
Show context
Xmd5a ◴[17 Jan 25 18:07 UTC] No.42741362[source]▶
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.

replies(3): >>42741465 #>>42741799 #>>42742940 #
1. Xmd5a ◴[17 Jan 25 18:15 UTC] No.42741465[source]▶
Also, some interesting links I stumbled upon while exploring this space:

Graphviz-like generic graph-drawing library. More options, more control.

https://eclipse.dev/elk/

Experiments by the same team responsible for the development of ELK, at Kiel University

https://github.com/kieler/KLighD

Kieler project wiki

https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...

Constraint-based graph drawing libraries

https://www.adaptagrams.org/

JS implementation

https://ialab.it.monash.edu/webcola/

Some cool stuff:

HOLA: Human-like Orthogonal Network Layout

https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf

Confluent Graphs demos: makes edges more readable.

https://www.aviz.fr/~bbach/confluentgraphs/

Stress-Minimizing Orthogonal Layout of Data Flow Diagrams with Ports

https://arxiv.org/pdf/1408.4626.pdf

Improved Optimal and Approximate Power Graph Compression for Clearer Visualisation of Dense Graphs

https://arxiv.org/pdf/1311.6996v1.pdf

replies(1): >>42741703 #
2. bastardoperator ◴[17 Jan 25 18:32 UTC] No.42741703[source]▶
I settled on excalidraw via obsidian

https://github.com/zsviczian/obsidian-excalidraw-plugin

replies(1): >>42742826 #
3. dominicdewalt ◴[17 Jan 25 20:18 UTC] No.42742826[source]▶
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?
replies(2): >>42742915 #>>42743436 #
4. bastardoperator ◴[17 Jan 25 20:28 UTC] No.42742915{3}[source]▶
I do use mermaid quite a bit in markdown because it's documentation/code that can be updated, the idea tends to start in my notes as excalidraw, and eventually become a mermaid graph. I wouldn't say it's lacking anything. I have not tried it so I can't a valid opinion, but I am happy to give it a try and give some feedback. I do waste time converting. I see a couple of tools, do you recommend one in particular?
5. Vampiero ◴[17 Jan 25 21:25 UTC] No.42743436{3}[source]▶
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.