Spoiler: Use to render DAGs written in the DOT language Vizdom.dev 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 tool that can render graphs written in the DOT language — Perfect! Graphviz Except… It doesn’t work well on the web* I need to install it It doesn’t manage DOT/GV files online Considerations *Okay, Graphviz can be compiled to WebAssembly, and a few talented folks managed to build a few neat projects such as dreampuf’s , nikeee’s , and magjac’s — each with its own twist. I still struggle to embed these renderings without exporting them to an SVG (or other medium). technically editor edotor.net editor For example, I want to store my graph in by simply pasting a link that automatically renders the graph. Notion.so I could use which renders graphs pretty cleanly and works surprisingly well — it’s one of the many reasons why it has . I can also embed graphs in Notion/GitHub by using markdown, sweet! MermaidJS GitHub 64k+ starts on 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 which is amazing for managing diagrams, but like my Mermaid woes, I cannot convert DOT to D2 reliably. I suppose if you’re going to be building diagrams by hand this is an acceptable, one-time cost. In general, it is a fantastic tool. Kudos! Terrastruct.com hand-built The Problem I want to render generated DOT outputs — none of the tooling seems to help me achieve that goal. programmatically 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. The Solution Yup — I built an for that 🎉 app …And it’s built entirely in Rust 🦀 with many thanks to Leptos 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 delving into this topic. Inspired significantly by the DagreJS layout algorithm(s) and the insightful paper “ ¹”, I developed a variant in Rust. blog post A Technique for Drawing Directed Graphs 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 ( and derivatives) end up quite a bit faster and offer great animations/styling customizations. Yet, I felt that they miss out on the features that DOT language provides — namely, the styling attributes are often only honored if you’re rending with Graphviz. d3-graphviz will produce results very similar to Dagre but aligned more toward the DOT specification and style behaviors of Graphviz. However, it does not have feature parity with Graphviz, and statements/attributes that aren’t supported are simply ignored. Vizdom I believe it is a good compromise for the kinds of attributes programmatically generated DOT will consume. Vizdom Features 🚀 Blazing fast rendering 💾 Store graphs in links 0️⃣ Zero dependencies and no installation required Rendering Speed Well, it’s an apples-to-oranges comparison. Graphviz still produces visualizations and supports more , so I am subjectively comparing against Graphviz’s DOT engine, scoping it down to just DAGs, and even scoping it down to a list of narrow features of the DOT language. great layout engines Vizdom further 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 with ~400 nodes: a fairly large graph Native Graphviz: ~30 seconds Chrome (WASM) Graphviz: crashes* Chrome (Javascript) DagreJS: ~10 seconds 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 is currently hosted) and other load balancers. Vizdom 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 : pprof trace for deflate Go to the , and load Editor View Example 42 Diff View Occasionally, I found myself trying to compare two graphs that I’ve generated, so while I was at it, I added a to visually see changes between two different graphs. diff viewer Color Legend: Red: Deleted Orange: Modified Green: Added Here’s a few snaps: Click me: changing a node ID from “e” to “f” Click me: adding “cluster=true” Future Direction is still a work in progress, and as it continues to evolve, I am aware that the journey of perfecting this tool is as dynamic as the field of graph visualization itself. While I am proud of what has achieved so far, I am even more excited about its potential. That’s where you, the reader and potential user, come in. Vizdom Vizdom If you have any feedback, please feel free to message me over on or . Gitter Discord 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

Too Long; Didn't Read

Making security fun one episode at a time

Here's Why You Shouldn't Use Graphviz for DAGs: What You Should Use Instead

Too Long; Didn't Read

Nick Angelou

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

Here's Why You Shouldn't Use Graphviz for DAGs: What You Should Use Instead

Too Long; Didn't Read

Nick Angelou

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES