Spoiler: Use Vizdom.dev to render DAGs written in the DOT language
As a software dev, I’ve occasionally worked with DAGs — most of which involve visualizing them. In many cases, I found it difficult to get a quick rendering and found myself looking for tooling.
Fortunately, there’s the trusty
Except…
*Okay, technically Graphviz can be compiled to WebAssembly, and a few talented folks managed to build a few neat projects such as dreampuf’s
For example, I want to store my graph in
I could use
Unfortunately, I have to translate DOT into the flavor of markdown that Mermaid requires. For smaller textual representations, I can use ChatGPT to convert them for me, but it frequently makes grammatical mistakes, and the graph will refuse to render — making it unreliable as a source of automation.
Then there is
Yup — I built an
…And it’s built entirely in Rust 🦀 with many thanks to
tl;dr — a simple, purpose-built app to render DAGs online, fast
Minimizing edge crossings in graph generation, a recognized NP-hard challenge is key to creating visually appealing graphs. The team at Terrastruct has published an outstanding
This version is particularly effective for rendering hierarchical graphs, leveraging the intricate complexities of this problem.
Rendering large DAGs (500+ nodes/edges) tends to be somewhat sluggish with Graphviz. Dagre + D3 (
I believe it is a good compromise for the kinds of attributes programmatically generated DOT will consume.
Well, it’s an apples-to-oranges comparison. Graphviz still produces great visualizations and supports more
Yes, I know it’s terrible to compare years of experience and tooling around the 30+ year streak that is Graphviz, but for my narrow use-case, it is crazy fast. Here are some wall times on my M1 Macbook Pro for rendering
* It crashes because the emscripten flag, ALLOW_MEMORY_GROWTH=1
, is not set, therefore limiting the total memory to 16MB. This can be fixed, but I have not found an online project that can handle the graph in question.
** The example graph is rendered by selecting Example 14
in the editor view. Refreshing the page will result in you refreshing the page and getting a 414 because the URI that persists in the graph is too large. I am working on a better solution to store larger graphs.
You’ll notice when you make any changes to the DOT file, the URL immediately updates a few query parameters to store the graph and layout options, allowing you to always reference a copy of your data just by storing the link!
There is a catch — large-ish graphs tend to make the URI too large for AWS (where
I’m currently working on a solution to handle larger graphs, but in the meantime, I’ve included a few ways to persist and store graphs:
Here’s an example of what the editor view looks like of the
Go to the Editor View, and load Example 42
Occasionally, I found myself trying to compare two graphs that I’ve generated, so while I was at it, I added a
Color Legend:
Here’s a few snaps:
Click me: changing a node ID from “e” to “f”
Click me: adding “cluster=true”
If you have any feedback, please feel free to message me over on
Thanks for reading — If you enjoyed this article, please follow!
[1]: E. R. Gansner, E. Koutsofios, S. C. North and K. . -P. Vo, “A technique for drawing directed graphs,” in IEEE Transactions on Software Engineering, vol. 19, no. 3, pp. 214–230, March 1993, doi: 10.1109/32.221135.
Also published here