Comment by lobster_johnson | Hacker News Reader

Comment by lobster_johnson | Hacker News Reader

lobster_johnson

Mermaid is great, and I've used it for architectural diagrams of how tech stacks are put together, or data flows between apps. But it only produces marginally nicer-looking diagrams than Graphviz, and it optimizes badly against unnecessary line intersections (e.g. it's far too easy to end up with this, even in trivial diagrams: https://imgur.com/Tkpa9fD).

My wish is for a diagram renderer with a smarter layout algorithm that heavily optimizes for direction and cleanness, understands grouping really well, and comes with easy ways to apply SVG styles. I like Google's diagrams in this regard:

http://donatz.info/wp-content/uploads/2017/10/google-cloud-a...

http://donatz.info/wp-content/uploads/2017/10/google-cloud-a...

http://donatz.info/wp-content/uploads/2017/10/google-cloud-a...

I would love a GraphViz like tool which produces more beautiful graphs. Example:

https://www.flickr.com/photos/gigile/3505955900

Note how well the overall graph fits into the rectangular format. GraphViz sucks at this. This image is not perfect though. There are a few unnecessary crossovers.

Another thing I miss in GraphViz are line jumps:

https://support.office.com/en-us/article/add-or-remove-conne...

The following code is pretty easy to hack:

https://archive.codeplex.com/?p=graphviz4net

I started to customize it but lacked times. The biggest challenge was to be able to convert the WPF rendering into something else, which I couldn’t figure out. I changed the canvas for another one with a better zoom function but couldn’t export or print the canvas.

You might want to check out the Eclipse Layout Kernel. I don't know if it supports everything you listed but it does seem to make for some neater graphs.

https://www.eclipse.org/elk

Styling-wise, you could edit the CSS of Mermaid to try to achieve the cleaner look the Google diagrams provide. That doesn't solve the path optimization though, but it's something.

What kind of algos do they use for this kind of thing? Are there any papers?

There is a whole field about this. Look up 'Graph Drawing'.

Reply on news.ycombinator.com