I'm using it at work, e.g. to visualize state machines. It makes it a lot easier to discuss it with business people. In Java there is a great library which translates code into graphviz markup: guru.nidi/graphviz-java
Ha nice visualisation. Would be amazing if this was available for more chat systems where conversations branch like this.
Also, as a side note its funny that there is a lot of discussion (including Baez!) about theoretical maths, and one lone tweet about molecular symmetry.
haha, that is awesome. "show don't tell", "the medium is the message"... and wow, what a great use case! This tree UI for rendering multi-threaded conversations would be a great feature in slack or twitter. Bravo -- and thanks for sharing! :)
One interesting thing is that graphviz can output to many formats, including SVG. This makes it great for websites, where one can later do things like later tweak the colours on the fly.
Many years ago I wrote an XSL file that uses the Graphviz SVG output and applies gradients and shadows (the repo also has a couple of tiny tools that output graphviz graphs):
Being SVG also means you can style them via CSS, allowing simple interactivity. For example, you can make graph edges change color or become thicker when you mouse over them, making it easier to follow edges in a large messy graph
One huge advantage of Tikz is that you can use LaTeX equations natively. E.g. subscripts and superscripts in graphviz involve jumping through a few hoops, iirc.
That's one of its main uses. One thing it does not do (or I don't know how) and graphviz does, though, is arranging nodes intelligently so as to minimize clutter and edge distances. That's one of the nice things in graphviz.
> One thing it does not do (or I don't know how) and graphviz does, though, is arranging nodes intelligently
That's exactly what "graph drawing" means [0]. Can tikz choose the position of the vertices itself or you have to specify the positions yourself? If it is you who chooses the positions, then tikz does not do "graph drawing".
That's great! Did these people really implement graph drawing algorithms as latex macros, or does it call an external program? I'm afraid to look it myself, lest I discover the truth.
Wow, that was a long time ago, very fun project to work on. But yeah, without deep knowledge of the TeX side you'd likely still struggle a bit to understand how the two sides interact, at least it was a bit of a struggle for me, maybe / hopefully it got a bit better in the meantime.
And thankfully LuaLaTex was ready enough at that time, I can't imagine how bad it would've been to do this in pure Tex ...
Just a former student who participated in the first version (let's say draft) of it, which had no really interesting algorithms in it yet, just the overall graph framework and integration with the rest of PGF/TikZ.
Really cool project though, one of the few that made it outside of uni.
A library of pgf/tikz that requires lualatex can do graph drawing. It is called "graphdrawing" actually. It can do the layout automatically and so on. You can add new automatic layouts using lua.
Graphviz's syntax easy enough to programmatically generate, here's the course dependencies for CS classes at my university, for instance, generated by a Haskell program that scraped the appropriate data.
Shameless plug: I created an online Graphviz/dot editor which is powered by a language server that provides auto completion and refactorings. It uses a WASM version of Graphviz to render the graph. You can try it out here:
I ended up with a different tool, but I was uncomfortable using drawing apps for diagrams, and only rarely included them in my blog until I could use text to define them.
I’m all-in on Markdown + Github for writing, so working with text-driven diagrams is a natural fit.
I recently wrote about using Markdown with Diagram codes https://blog.diagram.codes/posts/markdown-intro/ (I'm the creator) it's a complementary desktop tool with (web version is limited and free, desktop is paid)
I love text based tools but wanted to create something that users without technical backgrounds can use, I feel that a lot of existing tools are too complex for casual users.
I am also using mermaid. Like Markdown, it has a ton of shortcomings. But just like Markdown, the big win is that it forces me to keep things simple.
Markdown forces me to focus on just the words, not the layout and fancy formatting. Mermaid does the same thing for diagrams: Anything I can draw with a pencil but can't express in Mermaid must be simplified or broken into separate sub-diagrams.
This would be terrible if I was trying to draw a diagram of the entire infrastructure of a modern SaaS company, but is actually good when I am trying to write a post explaining ideas: Multiple simple diagrams interspersed with text get the job done.
> Nicer, more modern looks (the original is too... LaTeX-y for my tastes)
Can you explain what do you mean by that, exactly? I think the looks of graphviz graphs are exceedingly beautiful and I cannot imagine a better looking way of drawing graphs (other than some minor technical issues with font kerning).
I was about to summarize my pain points but you covered them all and expressed them better than I could. What I often find difficult is to reliably prevent overlap, I would subsume that under you last point about margins and paddings.
Also I think graphviz is a great tool when you want to generate some diagrams quickly and don't care too much about the design. If you have a precise idea of how it should look, it is possible to force it to look that way but it becomes a lot of work (with a complex logic of clusters, ranks, groups, etc).
It has been over a decade since I did this regularly, but I would import my Graphviz files into the excellent OmniGraffle (macOS) to provide what ever styling I wanted, and use a variety of highly configurable layout engines. Almost certain that the "straight arrows and 90 degree turns" layout is in there.
OmniGraffle is one of the best commercial software packages every developed. Well worth a look if you are on macOS
I've been working on diagram.codes, it's not a replacement for Graphviz as my goal is to have a self contained tool that is friendly to non technical users (so flexibility is sacrificed for some diagrams), you may find it useful.
Any time Graphviz is not enough for whatever reason, I’ll usually reach for TikZ. This is part of the TeX ecosystem, but I often use Graphviz by itself and paste the resulting images into web pages, presentations, or design docs. TikZ lets you control the path of arrows to a fault, so you can easily get the straight arrows and 90-degree turns, rather than the “anything goes” automatic layout that you get in Graphviz.
I use it pretty often to illustrate state machines, system diagrams, or flowcharts.
I’d like to write some scripts that can take some of my code and produce a graph of it.
Things I’d like is for example to draw a GCP cloud build file, or something like that.
What would be a good intermediate format for this? I’ll read an xml or yaml file into a python list of dicts and then loop through it and write ... Graphviz? Mermaid? Tikz?
I've been trying to use graphviz for many years. Idea of storing graph data as text with presentation hints is very appealing. But simple diagrams can be made in corresponding software (draw.io) way too faster. For complex diagrams I had to constantly fight with layout engine and place too many hints.
Fun hidden use of graphviz: if you use GCC's <regex> in your code, try defining _GLIBCXX_DEBUG and call the member function _M_dot() on your regex objects.
We left that in when developing the <regex> module because it turned out to be very useful for debugging regular expressions, not just the regex implementation itself.
That's cool! Every time I end up implementing some kind of graph structure, writing a simple dot output method is one of the first things I do. It's incredibly useful for debugging stuff, and only takes a couple minutes to put together.
What I've been craving for is a way to respect the order of the nodes when being drawn. Since currently it re-orders them to occupy less space.
With this I would be able to finish my data flow diagram out of a functional programming project. To describe in a visual way how the function calls are happening.
Graphviz is almost deceptively bad. If I see a graph in a book; I expect it was made in TikZ.
TikZ isn't fun, but at least it has the flexibility to get a great looking image at the end of the process. The theoretical simplicity advantages of Graphviz usually get worn down by the fact that the diagrams look bad. Use PowerPoint, and if code is needed bite the bullet and struggle through TikZ.
A couple of important tips that the article omits:
1. For manual editing, dot -Tx11 foo.dot displays the graph in a window and updates it automatically whenever you save. So you can have an editor window open and the dot window and see the results of every tweak. For automatically generated graphs, this provides you with a window that you can update by overwriting a file with a new graph description.
2. Although HTML nodes are more versatile, shape=record is much easier, and sufficient for a pretty wide range of diagrams.
For doing quick stuff by hand if you don't have Graphviz installed, or if you're stuck on a Mac without X-Windows, there's https://graphviz.christine.website/. I like Graphviz a lot; as other people point out, TikZ is capable of a wider range of graphics, and also you can write programs to generate graphs in TikZ. But Graphviz is often enough.
subgraph types {
node [shape=square];
subgraph ints {
node [label=int];
int bool fd u32in die stride;
}
long int s32 u8 u32 -> ypix ywin;
...
Its expressivity is limited, since it depends on a hierarchical classification of your nodes and arcs that doesn't always eliminate all duplication, but it's usually enough to manually style the nodes the way I want without too much hassle. Because "types" and "ints" aren't "clusters", they don't affect the layout. (If you do want to use clusters, that can make this approach more difficult.)dnl
I haven't ever been quite desperate enough to use m4 to generate Graphviz files, although clearly it is a good fit. My experiences with m4 are more in the nature of getting way too much rope to hang myself with and then having a terrible time debugging. I wrote an HTML-generating macro language in m4 in 1994 and have never stopped regretting it.dnl
I do agree about the Makefile. In Dumpulse I used the following Makefile rule:
You only need a couple of line to plug in automatic m4 preprocessing in Makefile. And perhaps add a .SECONDARY line if you are debugging to prevent the intermediate .dot files from being deleted.
%.dot: %.dot.m4
m4 < $< > $@
I use m4 to implement something akin to css classes, only a bit more powerful because you can do pseudo-subclassing. E.g.
Right! That kind of crosscutting thing is tricky to do with the hierarchical nature of subgraphs. Without some kind of macro preprocessor you'd end up doing something like
This obviously has the drawback that if you change the importance font, you have to change it twice instead of once, and you might forget. And clearly there are cases where that kind of duplication is a bigger problem than the difficulties with m4.
RIP NetViz (90s - 2015)
Back then it was one of the first to link with a db of nodes to auto update diagrams the job I'm thinking of had thousands of sites & it saved so much work once you had templates set up.
Graphviz is for noobs. Try TikZ, aka the Gigachad of vector graphics. I spent more time creating TikZ diagrams than actually writing my whole MSc. thesis.
> Graphviz is for noobs. Try TikZ, aka the Gigachad of vector graphics.
Maybe you are right, in today's decaying world. But any civilized person can see that tikz, latex and even graphviz are all ultimately hipster tools. Real men of course use pic and troff.
> I spent more time creating TikZ diagrams than actually writing my whole MSc. thesis.
Isn't this the primary problem with TikZ? It makes you do all the time consuming layout stuff by hand. With Graphviz you just chuck your data at it and get results instantly. Sure it won't be eye-optimized, but it also didn't require work on your part, nor will it require more work on your part when your data changes.
I'm going to hijack this thread to ask if anyone knows of a library that creates "hand drawn"-style sequence diagrams from code? I basically want this: https://bramp.github.io/js-sequence-diagrams/ -- but sadly, this one only seems to run inside a browser.
I found a great use for Graphviz recently. I needed to implement a model that was created by a scientist with no programming experience outside of a Fortran class in the early 1980s. Meanwhile, I didn't have much knowledge of the subject matter or terminology. The model was described in a multipage Excel file and an accompanying PDF and I implemented it in Clojure.
In order to help us communicate, I wrote a script that built a data-dependency graph directly from the code and produced a diagram with Graphviz for the scientist to review. It helped us to catch a couple errors resulting from my misinterpretations and it gave the scientist confidence that the code accurately reflected his design.
Great post. I've used it to generate UML diagrams from databases with sqlalchemy, and more recently to generate protobuf diagrams in Python (needed it quickly to update some documentation): https://github.com/kinow/protobuf-uml-diagram
Some times the existing layouts, ranks, clusters, etc, won't help you to produce the diagram you have in your mind. So instead of giving up and drawing it in draw.io or Inkspace (which I used to do), a co-worker showed me how he was using this technique in several of his diagrams.
220 comments
[ 2.5 ms ] story [ 243 ms ] threadhttps://www.solipsys.co.uk/Chitter/GroupTheory_IRL.svg
Also, as a side note its funny that there is a lot of discussion (including Baez!) about theoretical maths, and one lone tweet about molecular symmetry.
e.g. https://harishnarayanan.org/writing/kubernetes-django/
https://github.com/vidarh/diagram-tools/tree/master
So if you have a huge diagram and want to find a node of interest, with a SVG, it's only a quick CTRL-F away.
One huge advantage of Tikz is that you can use LaTeX equations natively. E.g. subscripts and superscripts in graphviz involve jumping through a few hoops, iirc.
That's exactly what "graph drawing" means [0]. Can tikz choose the position of the vertices itself or you have to specify the positions yourself? If it is you who chooses the positions, then tikz does not do "graph drawing".
[0] https://en.wikipedia.org/wiki/Graph_drawing
And thankfully LuaLaTex was ready enough at that time, I can't imagine how bad it would've been to do this in pure Tex ...
Really cool project though, one of the few that made it outside of uni.
It's described in part IV of the pgf manual.
https://i.imgur.com/OZarGSg.png
https://edotor.net
I’m all-in on Markdown + Github for writing, so working with text-driven diagrams is a natural fit.
I love text based tools but wanted to create something that users without technical backgrounds can use, I feel that a lot of existing tools are too complex for casual users.
Markdown forces me to focus on just the words, not the layout and fancy formatting. Mermaid does the same thing for diagrams: Anything I can draw with a pencil but can't express in Mermaid must be simplified or broken into separate sub-diagrams.
This would be terrible if I was trying to draw a diagram of the entire infrastructure of a modern SaaS company, but is actually good when I am trying to write a post explaining ideas: Multiple simple diagrams interspersed with text get the job done.
- Nicer, more modern looks (the original is too... LaTeX-y for my tastes)
- A different layout engine that uses straight arrows and 90 degree turns
So far I haven't been able to find any good replacements, although a few JS libraries come reasonably close.
Can you explain what do you mean by that, exactly? I think the looks of graphviz graphs are exceedingly beautiful and I cannot imagine a better looking way of drawing graphs (other than some minor technical issues with font kerning).
* Automatic edge placement can lead to visually ambiguous results and it is very hard to tweak it.
* Edge title placement engine is sort of naive and best solution is to not use edge titles at all.
* Bogus text wrapping. Text can leak outside of the node box.
* Default margins and padding lead to visual clutter.
It's not a property of the engine but of the graph itself:
http://www.graphviz.org/doc/info/attrs.html#d:splines
https://stackoverflow.com/a/9055243
It’s not a force directed graph, but does seem to me to look better. And since the output is javascript it can be styled and formatted as you like it.
[0] https://github.com/magjac/d3-graphviz
OmniGraffle is one of the best commercial software packages every developed. Well worth a look if you are on macOS
I use it pretty often to illustrate state machines, system diagrams, or flowcharts.
Well, or I’ll reach for Inkscape.
Things I’d like is for example to draw a GCP cloud build file, or something like that.
What would be a good intermediate format for this? I’ll read an xml or yaml file into a python list of dicts and then loop through it and write ... Graphviz? Mermaid? Tikz?
What do you guys recommend?
I've done exactly this a few days ago to visualize the Linux build graph: https://q3k.org/u/73839114a0e5ee65002029892a069dd1b645a8f9f0...
We left that in when developing the <regex> module because it turned out to be very useful for debugging regular expressions, not just the regex implementation itself.
https://zwischenzugs.com/2017/12/18/project-management-as-co...
The OP page is a really great intro, I could have used it as a reference when I was doing that work.
With this I would be able to finish my data flow diagram out of a functional programming project. To describe in a visual way how the function calls are happening.
TikZ isn't fun, but at least it has the flexibility to get a great looking image at the end of the process. The theoretical simplicity advantages of Graphviz usually get worn down by the fact that the diagrams look bad. Use PowerPoint, and if code is needed bite the bullet and struggle through TikZ.
1. For manual editing, dot -Tx11 foo.dot displays the graph in a window and updates it automatically whenever you save. So you can have an editor window open and the dot window and see the results of every tweak. For automatically generated graphs, this provides you with a window that you can update by overwriting a file with a new graph description.
2. Although HTML nodes are more versatile, shape=record is much easier, and sufficient for a pretty wide range of diagrams.
For doing quick stuff by hand if you don't have Graphviz installed, or if you're stuck on a Mac without X-Windows, there's https://graphviz.christine.website/. I like Graphviz a lot; as other people point out, TikZ is capable of a wider range of graphics, and also you can write programs to generate graphs in TikZ. But Graphviz is often enough.
A really simple graph like https://graphviz.christine.website/#digraph%20G%20%7Ba-%3E%7... is sometimes good enough without further tweaking, but for, e.g., the top diagram in https://github.com/kragen/dumpulse#dumpulse-an-embeddable-du..., you usually have to tweak stuff a bit.
[1] https://en.wikipedia.org/wiki/M4_(computer_language)
I haven't ever been quite desperate enough to use m4 to generate Graphviz files, although clearly it is a good fit. My experiences with m4 are more in the nature of getting way too much rope to hang myself with and then having a terrible time debugging. I wrote an HTML-generating macro language in m4 in 1994 and have never stopped regretting it.dnl
I do agree about the Makefile. In Dumpulse I used the following Makefile rule:
That way I can rebuild the README diagrams (if outdated) just by listing "diagram.png heartbeat.png health-report.png" as dependencies of the "all" target. https://github.com/kragen/dumpulse/blob/master/MakefileMaybe you are right, in today's decaying world. But any civilized person can see that tikz, latex and even graphviz are all ultimately hipster tools. Real men of course use pic and troff.
Isn't this the primary problem with TikZ? It makes you do all the time consuming layout stuff by hand. With Graphviz you just chuck your data at it and get results instantly. Sure it won't be eye-optimized, but it also didn't require work on your part, nor will it require more work on your part when your data changes.
Add this to any diagram to get the effect you want,
Demo: https://tinyurl.com/ycdu7owahttps://plantuml.com/
In order to help us communicate, I wrote a script that built a data-dependency graph directly from the code and produced a diagram with Graphviz for the scientist to review. It helped us to catch a couple errors resulting from my misinterpretations and it gave the scientist confidence that the code accurately reflected his design.
https://github.com/Engelberg/ubergraph
Did you use something similar or roll your own?
In any case, your project sounds great and I am glad it was a success.
1. https://github.com/ztellman/rhizome
Thanks
https://github.com/mtekman/elisp-depmap.el
One thing that I think was not mentioned in the article, are invisible nodes, which are really handy: https://stackoverflow.com/search?q=invisible+node+%5Bgraphvi...
Some times the existing layouts, ranks, clusters, etc, won't help you to produce the diagram you have in your mind. So instead of giving up and drawing it in draw.io or Inkspace (which I used to do), a co-worker showed me how he was using this technique in several of his diagrams.