3 ms·

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 n

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 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-architecture-beautiful-on-with-regard-to-real-time-bidding-architectures-1.png http://donatz.info/wp-content/uploads/2017/10/google-cloud-a... http://donatz.info/wp-content/uploads/2017/10/google-cloud-architecture-lovely-on-intended-designing-etl-for-a-native-data-warehouse-5.png http://donatz.info/wp-content/uploads/2017/10/google-cloud-a... http://donatz.info/wp-content/uploads/2017/10/google-cloud-architecture-fine-on-intended-for-platform-blog-understanding-pricing-6.png http://donatz.info/wp-content/uploads/2017/10/google-cloud-a...

qznc 8y ago
I would love a GraphViz like tool which produces more beautiful graphs. Example: https://www.flickr.com/photos/gigile/3505955900 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-connector-line-jumps-1a5516db-0212-4352-90dd-fc9cfd4018ed https://support.office.com/en-us/article/add-or-remove-conne...
- Heisgone01 8y ago
  The following code is pretty easy to hack: https://archive.codeplex.com/?p=graphviz4net 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.
kasbah 8y ago
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 https://www.eclipse.org/elk
tootie 8y ago
What kind of algos do they use for this kind of thing? Are there any papers?
- fooker 8y ago
  There is a whole field about this. Look up 'Graph Drawing'.
siruncledrew 8y ago
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.

qznc 8y ago

I would love a GraphViz like tool which produces more beautiful graphs. Example: https://www.flickr.com/photos/gigile/3505955900 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-connector-line-jumps-1a5516db-0212-4352-90dd-fc9cfd4018ed https://support.office.com/en-us/article/add-or-remove-conne...

Heisgone01 8y ago
The following code is pretty easy to hack: https://archive.codeplex.com/?p=graphviz4net 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.

kasbah 8y ago

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 https://www.eclipse.org/elk

tootie 8y ago

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

fooker 8y ago
There is a whole field about this. Look up 'Graph Drawing'.

siruncledrew 8y ago

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.