Graphviz / DOT Viewer
Render DOT graph descriptions using the real Graphviz layout engine, compiled to WebAssembly — not an approximation. Choose from 8 layout algorithms (dot, neato, circo, fdp, sfdp, twopi, osage, patchwork), each suited to different graph shapes. A syntax error surfaces the actual Graphviz parser's message and line number. Download as SVG or PNG. Runs entirely client-side — nothing is uploaded.
Rendering…
About this tool
This tool renders DOT graph descriptions using the real Graphviz layout engine, compiled to WebAssembly — not an approximation, the actual C library behind the graphviz command-line tool. DOT is a plain-text graph description language: digraph {A -> B} declares a directed edge from A to B, graph {A -- B} an undirected one, with attributes like [label="..."], [color="..."], and [shape="..."] for styling. Different layout engines suit different graph shapes: dot for hierarchical/layered graphs (org charts, dependency trees), neato and fdp for general force-directed layouts, circo for circular arrangements, and twopi for radial ones. Since it's the real Graphviz parser, a syntax error surfaces the actual C library's error message and line number, not a generic failure. It runs entirely client-side — nothing you type is ever sent anywhere.
What you can do
- Renders real DOT syntax with the actual Graphviz layout engine (compiled to WASM)
- 8 layout engines: dot, neato, circo, fdp, sfdp, twopi, osage, patchwork
- Download as SVG or PNG
- Nothing is uploaded — graphs render locally in your browser
How to use
Step 1
Write DOT source
Nodes and edges using standard DOT syntax — digraph for directed graphs, graph for undirected.
Step 2
Pick a layout engine
dot for hierarchical layouts, neato/fdp/sfdp for force-directed, circo/twopi for circular/radial.
Step 3
Download the result
Export as a scalable SVG or a PNG.
Example
This DOT source:
DOT
digraph {
A[label="User"] -> B[label="Tuliq"];
B -> C[label="Tool"];
}renders as a simple hierarchical graph with labeled nodes — switch the layout engine to neato or circo to see the same graph arranged completely differently.
How your data is handled
This tool is labeled 🟢 Browser: your DOT source is parsed and laid out directly in your browser using Graphviz compiled to WebAssembly — nothing is uploaded to a server, and nothing about it is retained once you leave the page.
Frequently asked questions
What's the difference between digraph and graph?+
digraph declares a directed graph, where edges (->) have a direction and are drawn with arrowheads. graph declares an undirected graph, where edges (--) have no direction.
Which layout engine should I use?+
dot (the default) works well for hierarchical structures like org charts or dependency trees. neato and fdp are general-purpose force-directed layouts good for arbitrary graphs. circo arranges nodes in a circle, useful for cyclic structures. twopi produces a radial layout from a root node outward.
Why does it say my DOT has a syntax error?+
The error message comes directly from the real Graphviz parser, including the line it got stuck on — usually a missing semicolon, an unclosed bracket, or an attribute written outside [ ].
How is this different from the Mermaid Diagram Editor?+
Mermaid uses its own diagram syntax (flowcharts, sequence diagrams, and similar) aimed at quick documentation diagrams. This tool uses DOT, the language behind the Graphviz ecosystem, which is more specialized for general graph structures and offers more layout engine choices.
Is my DOT source uploaded anywhere?+
No — it's parsed and laid out directly in your browser using Graphviz compiled to WebAssembly. Nothing here ever leaves your device.