Graphviz Viewer

Graphviz has drawn graphs from plain text since the early 1990s, and its DOT language is still the export format of many tools: Terraform’s graph command, Python dependency analysers, build systems, compilers and database schema tools all write .dot files. Viewing one normally means installing Graphviz and running dot -Tsvg. This viewer runs the real Graphviz engines in the browser, so the layout matches what the command line would produce.

DOT in a nutshell

A file starts with digraph name { for a directed graph or graph name { for an undirected one. Inside, a -> b; adds an edge and creates both nodes if needed, and chains such as a -> b -> c; add several at once. Attributes go in square brackets: push [label="git push", shape=oval] on a node, [label="fail", color="#dc2626"] on an edge. Defaults for every node or edge are set with node [...] and edge [...], and graph-wide settings such as rankdir=LR sit on their own lines.

Choosing a layout engine

Graphviz offers several engines for different kinds of graph. dot draws hierarchies in ranks and is right for pipelines, trees, state machines and dependency graphs. neato and fdp use spring models that suit undirected networks, and sfdp scales the same idea to thousands of nodes. circo arranges nodes in circles, which shows cycles and ring topologies, while twopi lays everything out radially around a root node. osage packs clusters into a grid. Switching the engine in the menu re-renders the same source.

Styling and clusters

Shapes include box, oval, circle, diamond, record and cylinder; style="rounded,filled" with fillcolor gives the soft boxes common in documentation. Subgraphs whose names start with cluster_ are drawn as framed groups with their own label and style, which is how the sample marks the steps that run inside Kubernetes. HTML-like labels using <...> allow tables inside a node for record-style diagrams.

A worked example

The Sample describes a deployment pipeline drawn left to right. A green oval “git push” leads to “CI: lint + test”, “Build image” and “Deploy to staging”, then to a yellow diamond “Smoke tests”. From there a “pass” edge goes to “Deploy to production” and a red “fail” edge to “Roll back”. The staging and production nodes sit inside a dashed cluster labelled Kubernetes. The rendered SVG has seven nodes, and switching to the circo engine redraws them around a circle.

Exports

The SVG download keeps the Graphviz output as vectors, ready to embed in documentation or edit in a vector editor. The PNG is rendered at twice the displayed size, which keeps text crisp in slides and tickets. Both are produced in the page from the same drawing.

Limits in the browser

Graphviz can reference image files by path for node pictures, but a web page cannot read files from your disk by name, so those images are left out. Fonts are the browser’s, so text widths can differ slightly from a server-side render. Very large graphs with many thousands of edges can take a while to lay out.

Getting DOT out of other tools

Terraform prints DOT with terraform graph, Python projects can produce one with pydeps or pyreverse, and Make, Bazel and many build tools have graph commands. Paste their output here as is; long files with hundreds of nodes usually read best with the dot engine and rankdir=LR.

Related tools

• Mermaid Diagram Editor writes flowcharts and sequence diagrams in Mermaid syntax.
• ER Diagram Maker draws database diagrams from SQL.
• SVG to PNG converts the SVG at any resolution.
• JSON Formatter tidies the JSON some tools emit alongside DOT.