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
- It doesn’t work well on the web*
- I need to install it
- It doesn’t manage DOT/GV files online
*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
- I want to render programmatically generated DOT outputs — none of the tooling seems to help me achieve that goal.
- I want to embed links that render graphs.
- I want to store the rendering online for updates or to visually compare it with other graphs.
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.
- 🚀 Blazing fast rendering
- 💾 Store graphs in links
- 0️⃣ Zero dependencies and no installation required
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
- Native Graphviz: ~30 seconds
- Chrome (WASM) Graphviz: crashes*
- Chrome (WASM)
Vizdom: ~1 second**
* 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.
Store Graphs in Links
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:
- Copy an embeddable link that automatically renders a view that maximizes the graph.
- Copy an iframe snippet to embed in any application that supports rendering them.
- Or simply download the rendered SVG.
Here’s an example of what the editor view looks like of the
Go to the Editor View, and load
Occasionally, I found myself trying to compare two graphs that I’ve generated, so while I was at it, I added a
- Red: Deleted
- Orange: Modified
- Green: Added
Here’s a few snaps:
Thanks for reading — If you enjoyed this article, please follow!
: 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