Graphviz DOT Viewer

Paste Graphviz DOT source and watch the diagram render live as you type. The viewer runs the genuine Graphviz layout engine — compiled to WebAssembly — entirely in your browser, so directed and undirected graphs, node and edge styling, shapes, colours, subgraphs and clusters all lay out exactly as Graphviz would on the command line. The result is clean SVG you can scroll and zoom, with nothing uploaded and no dot install required.

How to use the Graphviz DOT Viewer

Type or paste DOT into the box, load a .dot / .gv file, or click Example to see a styled pipeline graph. As you edit, the viewer feeds your source to the Graphviz engine and renders the resulting SVG a moment later, reporting how many nodes and edges the graph contains. Start a graph with digraph G { … } for a directed graph (edges drawn with ->) or graph G { … } for an undirected one (edges with --). Everything Graphviz understands works here: node attributes like [shape=box, style=filled, fillcolor=…], edge labels and styles, rankdir=LR to lay out left-to-right, and subgraph cluster_x { … } to draw boxed groups.

Because this runs the real engine rather than an approximation, the layout you get is the same one dot would produce — the same node placement, the same edge routing, the same handling of ranks and clusters. The diagram renders as a true SVG element, so it stays crisp at any zoom and the text inside it remains selectable. If your DOT has a syntax error, the status line reports it so you can fix the offending line. The whole pipeline — parsing, layout, rendering — happens in your browser via WebAssembly, so a diagram describing private architecture or an internal data flow is never uploaded anywhere.

Graphviz & the DOT language

Graphviz is open-source graph-visualisation software that has been the standard tool for drawing node-and-edge diagrams from text for decades. Instead of placing boxes and arrows by hand, you describe the relationships in a small language and let Graphviz compute the layout — where each node sits and how each edge routes — using well-studied graph-drawing algorithms. Its main engine, dot, specialises in hierarchical layouts where edges generally flow in one direction, which makes it ideal for flowcharts, dependency graphs, state machines, org charts, and the kind of architecture diagrams that are tedious to maintain in a drawing app.

The language Graphviz reads is called DOT. It is deliberately simple: a graph is a set of statements inside braces, where A -> B declares an edge and bracketed [key=value] lists attach attributes to nodes or edges. Attributes control everything visual — a node's shape, color, style and label; an edge's arrowhead, line style and label — while graph-level settings like rankdir change the overall direction and subgraph cluster_* blocks draw labelled boxes around related nodes. The power of this approach is that the content of a diagram (what connects to what) is kept separate from its layout (where things end up), so adding a node is one line and the whole picture re-flows automatically. This is why DOT diagrams are so common in documentation, in tools that auto-generate dependency or call graphs, and in version-controlled docs where a text diagram diffs cleanly.

Running Graphviz traditionally meant installing the dot binary and invoking it from the command line. This viewer removes that step by running the engine, compiled to WebAssembly, directly in the browser — the same layout code, no install, and crucially nothing uploaded. That last point matters for diagrams of internal systems: you can iterate on an architecture or data-flow graph, see it render instantly, and never send the description to a third-party server. For quick edits, learning DOT, or previewing a diagram embedded in documentation, an in-browser renderer is the fastest path from text to picture.

Common use cases

• Draft an architecture diagram. Describe services and their connections in DOT and iterate on the layout live, without installing Graphviz.
• Preview a generated graph. Paste DOT output from a tool — a dependency graph, call graph, or schema diagram — to see what it looks like before embedding it.
• Learn the DOT language. Experiment with shapes, colours, ranks and clusters and watch each change render immediately.
• Visualise private diagrams safely. Render a diagram of internal systems in the browser, with nothing uploaded to a server.