Diagrams / Math
Graphviz / DOT Playground
Render DOT-language graphs - directed, undirected, hierarchical, force-directed.
Runtime: Viz.js (Graphviz in WebAssembly)
DOT source
Rendered graph
About this playground
Graphviz playground using @viz-js/viz - a WebAssembly build of the real Graphviz engine. Write DOT (the same syntax dot / neato use on the CLI), pick a layout engine, see the SVG render live. Useful for state machines, dependency graphs, call graphs and circuit diagrams.
FAQs
Which Graphviz engines?
dot (hierarchical), neato (force-directed), fdp, circo and twopi - all bundled. Pick the engine from a dropdown to compare layouts.
How is this different from Mermaid?
Graphviz is much older and stronger at automatic layout of large graphs. Mermaid prioritises ease of writing. For 50+ node graphs Graphviz wins; for quick docs, Mermaid wins.
How big is the WASM?
Viz.js is around 2 MB, lazy-loaded only on this page.