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:
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.
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.
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.
GraphViz in the browser was made possible by `emscripten`, which is essentially a JavaScript compiler target. In that sense, there's not a implementation in a language besides C++ that's gotten much traction.
DOT is really messy for complex layout of nodes, and Graphviz to my knowledge doesn't have any layout options to produce straight angled edges between nodes.
I love Graphviz, but that space badly needs more competition.
Ah, I had never seen that before - I see it was added in 2010, shows how long it was since I looked at the Graphviz docs I guess. But even so the docs and screenshot shows it has plenty of problems unless it's improved substantially beyond what's on that page.
Yeah, PlantUML is my go-to for sequence diagrams. I used to hate them until I discovered it, there's even a great VSCode plugin for real-time iteration.
It's not so great with other things but worth it for that alone.
Yea, I've used http://www.webgraphviz.com/ for quite a while. Toss in a tiny script to click the button after every keypress, and voila: live-editing graphviz stuff. It's magical.
I understand that Mermaid is designed to generate diagrams into HTML DOMs, not my use case. I have experimented over the years with text based diagram tools to replace OmniGraffle for figures in the books I write.
My writing process is fairly streamlined and efficient, except for generating OmniGraffle figures which takes some time.
My day job is in machine learning (30+ years) and I have considered creating a model to map my hand drawn figures to something nicer - not too difficult, except for a lack of training data.
The Diagram panel plugin for Grafana uses this, you can attach metrics to nodes in the diagram and color them according to a gradient. I like using it instead of single stat panels for giving a quick overview of the state of the system, then including detailed graphs underneath.
https://grafana.com/plugins/jdbranham-diagram-panel
Not to knock Mermaid but the interesting thing about Markdown to my mind is that it’s still readable in raw format.
By which I mean it looks like a well annotated ASCII text file rather than a raw markup language in text.
Ditta looks like at least has the potential for that. If github had the ability render Ditaa it would be brilliant.
I think the main problem is that you still need the right tooling to draw it efficiently and Markdown doesn’t really require that. Eg editor plugins for reflow and drawing/resizing boxes.
I was able to do architectural diagrams and post them as dashboards. Showing a top-level metric, then make that block red on a thresh hold breach. It gave not only a top-level view, but a performance over view as well.
An example would be the frontend web requests and average latency response, to api request count and latency than the actual database backend. All as separate blocks with individual metrics.
blockdiag [0] has several helpful types of text to diagram processors with several output filetypes like svg and png.
In particular I like nwdiag (network diagrams), rackdiag (server rack layout) and packetdiag the most.
There is also an interactive web form [1] to try it out. You can switch between the types of diagram in the top right dropdown.
I second blockdiag and it's variants. One of my half done side projects is an automatic network scanner and mapper that is versions so you can walk back in time on the network with netdiag. The only downside to me is the non gpl license.
I think the main advantage of Markdown is that the source is equally readable without having to run it through a processor.
I don't think this really applies to this Mermaid library. For a Markdown-like I would expect more of an ASCII-art like input, which would look like the rendered chart also in its ASCII form.
>I don't think this really applies to this Mermaid library.
Well, it is easy to just read and understand what it talks about (as opposed to some more opaque format) and only has the bare minimum annotations needed beyond the text labels and node names.
>For a Markdown-like I would expect more of an ASCII-art like input, which would look like the rendered chart also in its ASCII form
I don't see much value in such a scheme (even though there does exist such a program), because to produce (and later edit/update) the ASCII-art would be as tiresome and evolved as producing the final graphic document.
I'd rather write e.g something like:
label a = "start"
label b = "end"
a -> b
than draw 2 ascii art boxes, place the labels myself, and draw ascii art arrow between them.
Wow, that’s awesome, I was looking for something like this a while ago to visualize a state machine. I ended up using graphviz, but I’ll have a look at mermaid for presentations, my diagrams always look super embarrassing.
Does anyone know of something similar for architecture diagrams?
I've tried PlantUML's component mode (http://plantuml.com/component-diagram) but wondered whether there were any other options out there, as being able to write maintain source-controlled diagrams as code/text would make me very happy!
Client-side is not really feasible (emscripten TeX has been done, but the packages to load are just too huge...).
Server-side, https://tex.s2cms.com/ does a nice job and outputs svg; https://upmath.me/ by same author is markdown editor integrating it - see tikz examples there.
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...
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...
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.
https://www.eclipse.org/elk
Graphviz can be ported to JS, I found an example although I didn't try it.
https://mermaidjs.github.io/mermaid-live-editor/
Very cool project.
also the DOT language has been around for ages.
I love Graphviz, but that space badly needs more competition.
https://www.graphviz.org/doc/info/attrs.html#d:splines
It's not so great with other things but worth it for that alone.
My writing process is fairly streamlined and efficient, except for generating OmniGraffle figures which takes some time.
My day job is in machine learning (30+ years) and I have considered creating a model to map my hand drawn figures to something nicer - not too difficult, except for a lack of training data.
http://www.drawexpress.com
https://casual-effects.com/markdeep
I couldn't read their website on my mobile...
I'll give this a shot next time I might have otherwise reached for Graphviz or Lucidchart.
[1]: http://ditaa.sourceforge.net/
By which I mean it looks like a well annotated ASCII text file rather than a raw markup language in text.
Ditta looks like at least has the potential for that. If github had the ability render Ditaa it would be brilliant.
I think the main problem is that you still need the right tooling to draw it efficiently and Markdown doesn’t really require that. Eg editor plugins for reflow and drawing/resizing boxes.
https://monodraw.helftone.com
https://grafana.com/plugins/jdbranham-diagram-panel
I was able to do architectural diagrams and post them as dashboards. Showing a top-level metric, then make that block red on a thresh hold breach. It gave not only a top-level view, but a performance over view as well.
An example would be the frontend web requests and average latency response, to api request count and latency than the actual database backend. All as separate blocks with individual metrics.
There is also an interactive web form [1] to try it out. You can switch between the types of diagram in the top right dropdown.
[0] http://blockdiag.com/en/
[1] http://interactive.blockdiag.com/nwdiag/
I don't think this really applies to this Mermaid library. For a Markdown-like I would expect more of an ASCII-art like input, which would look like the rendered chart also in its ASCII form.
Well, it is easy to just read and understand what it talks about (as opposed to some more opaque format) and only has the bare minimum annotations needed beyond the text labels and node names.
>For a Markdown-like I would expect more of an ASCII-art like input, which would look like the rendered chart also in its ASCII form
I don't see much value in such a scheme (even though there does exist such a program), because to produce (and later edit/update) the ASCII-art would be as tiresome and evolved as producing the final graphic document.
I'd rather write e.g something like:
than draw 2 ascii art boxes, place the labels myself, and draw ascii art arrow between them.https://casual-effects.com/markdeep/features.md.html#toc2
https://github.com/shd101wyy/markdown-preview-enhanced
I've tried PlantUML's component mode (http://plantuml.com/component-diagram) but wondered whether there were any other options out there, as being able to write maintain source-controlled diagrams as code/text would make me very happy!
Server-side, https://tex.s2cms.com/ does a nice job and outputs svg; https://upmath.me/ by same author is markdown editor integrating it - see tikz examples there.