Edit Graphviz DOT code on the left and watch the graph render on the right as you type. Switch between the dot, neato, fdp, sfdp, circo, twopi, osage and patchwork layout engines, then download the graph as SVG or PNG or copy a shareable link.
Last updated:
Ln 1
1
PreviewLoading Graphviz…
Loading Graphviz…
Advertisement
Advertisement
How to use the Graphviz Online Viewer
Write or paste DOT code in the editor, or start from one of the examples above it.
Watch the preview update as you type. Syntax errors are listed under the editor with the line number highlighted.
Choose a layout engine: dot for hierarchies and flowcharts, neato or fdp for networks, circo for rings, twopi for radial trees.
Zoom and pan with the + / − buttons, Ctrl + scroll wheel, or by dragging the preview.
Download the graph as SVG for documents and the web or PNG for slides, or copy a link to share it.
Layered (hierarchical), edges flow in one direction
Flowcharts, dependency graphs, state machines, org charts
neato
Spring model (stress majorization)
Small and medium undirected networks
fdp
Force-directed, supports clusters
Undirected graphs with groups
sfdp
Multiscale force-directed
Large graphs with thousands of nodes
circo
Circular
Rings, cyclic structures, network topologies
twopi
Radial, root in the centre
Trees and hub-and-spoke graphs
osage
Packs clusters into an array
Grouped items, module overviews
patchwork
Squarified treemap
Hierarchical sizes (set area on nodes)
Tips
Quote IDs with spaces or symbols: "API gateway" -> "user-db". Plain IDs may only contain letters, digits and underscores, or be a number.
Common errors: a missing semicolon is fine in DOT, but a missing closing brace, an unquoted ID with a hyphen, or -> inside an undirected graph are syntax errors.
Colors can be names (tomato, lightblue), hex ("#2f6b4f") or HSV triples ("0.6 0.4 0.9").
Prefer Markdown-style diagram syntax? Try the Mermaid Diagram Editor, which GitHub renders inside README files.
Frequently asked questions
What is the DOT language?
DOT is the plain-text graph description language of Graphviz. You declare a graph or digraph, list nodes with optional attributes such as shape and color, and connect them with -- (undirected) or -> (directed) edges. Graphviz then calculates the layout automatically.
Which layout engine should I use?
dot draws hierarchical, layered graphs and is best for flowcharts, call graphs and dependency trees. neato and fdp use spring models for undirected networks; sfdp is the scalable version for thousands of nodes. circo arranges nodes in circles, twopi draws radial layouts around a root, osage packs clusters and patchwork draws treemaps.
Is this the real Graphviz?
Yes. The tool runs viz.js, a WebAssembly build of the official Graphviz C code, so layouts and SVG output match the dot command line. If that library cannot be downloaded, a simplified built-in preview is shown and clearly labelled.
How do I change the direction of a graph?
Add rankdir=LR; inside the graph for left-to-right layout. Other values are TB (top to bottom, the default), BT and RL. rankdir is used by the dot engine.
How do I group nodes in a box?
Put them in a subgraph whose name starts with cluster, for example subgraph cluster_backend { label="Backend"; api; db; }. The dot, fdp and osage engines draw a rectangle around each cluster.
Can I export a high-resolution image?
Yes. SVG is a vector format that stays sharp at any size and can be edited in Inkscape or Illustrator. For PNG, pick a scale from 1× to 4×; 2× is a good choice for slides and documents.
Is my graph uploaded?
No. The DOT code is rendered in your browser and saved only in your browser's local storage. A shared link contains the code itself in the part of the URL after #, which browsers do not send to the server.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.