Graphviz DOT Generator

DOT and Graphviz: declarative graph drawing for engineers

DOT is the graph-description language used by Graphviz, the open-source visualization toolkit born at AT&T Bell Labs in 1991 (led by Stephen North). The idea is simple but powerful: you describe a graph as a small text file — nodes, edges, attributes — and let an automatic layout engine compute coordinates so you never have to drag boxes around. Three decades later DOT is still the format that compilers, package managers, profilers, and academic papers reach for when they need to render a graph deterministically.

This generator emits valid DOT you can paste into dot, neato, fdp, circo, twopi, or any web viewer (Graphviz Online, edotor.net, viz-js in the browser). Below is the full reference: graph vs digraph, attributes, shapes, layout engines, clusters, HTML labels, and the most common pitfalls.

Graph types and basic syntax

DOT distinguishes two top-level graph kinds:

• graph — undirected. Edges are written with --. Example: A -- B.
• digraph — directed. Edges use ->. Example: A -> B.
• strict prefix (strict digraph G { ... }) — forbids duplicate edges between the same pair of nodes.

digraph G {
  A -> B;
  B -> C;
  A -> C;
}

Attributes: node, edge, graph

Attributes live in square brackets and apply to a node, an edge, or the whole graph:

digraph G {
  rankdir=LR;                         // graph-level: left-to-right layout
  node [shape=box, style=rounded];    // defaults for all nodes
  edge [color=gray, fontsize=10];     // defaults for all edges

  A [label="Start", color=red];
  B [shape=diamond, label="Decision?"];
  C [label="End"];

  A -> B [label="go"];
  B -> C [label="yes", style=dashed];
}

• Graph-level: rankdir (TB, LR, BT, RL), bgcolor, splines (line | ortho | curved), ranksep, nodesep, label (graph title), concentrate=true (merge parallel edges).
• Node: shape, label, color, fillcolor + style=filled, fontname, width, height, tooltip, URL (clickable in SVG).
• Edge: label, color, style (solid | dashed | dotted | bold), arrowhead (normal | vee | dot | none), weight (layout hint), constraint=false (don't influence ranks).

Node shapes

Graphviz ships with dozens of shapes; the workhorses are:

• box, ellipse, circle, diamond, plaintext, point, none.
• polygon with sides=6, orientation=30, distortion, skew.
• record and Mrecord (rounded) — subdivided boxes: A [shape=record, label="{ name | age | email }"].
• folder, note, tab, cylinder for systems diagrams.

Layout engines

Graphviz ships several binaries, each implementing a different layout algorithm. Picking the right one matters more than tuning attributes:

• dot — hierarchical (Sugiyama-style) for directed graphs with a clear flow. The default and the right pick for DAGs, dependencies, call graphs, FSMs.
• neato — spring/Kamada-Kawai model for small undirected graphs.
• fdp — force-directed placement for larger undirected graphs.
• sfdp — multilevel fdp for very large graphs (thousands of nodes).
• circo — circular layout; nice for cyclic structures.
• twopi — radial layout around a chosen root.

dot   -Tpng input.dot -o out.png
dot   -Tsvg input.dot -o out.svg
neato -Tpdf input.dot -o out.pdf
sfdp  -Tsvg -Goverlap=prism huge.dot -o out.svg

Clusters and HTML-like labels

Clusters let you group related nodes inside a labeled box. The subgraph name must start with cluster_:

digraph G {
  subgraph cluster_frontend {
    label="Frontend";
    style=filled; fillcolor=lightgray;
    web; mobile;
  }
  subgraph cluster_backend {
    label="Backend";
    api; db;
  }
  web -> api;
  mobile -> api;
  api -> db;
}

HTML labels let you embed tables, fonts, and colors inside a node — perfect for ER-style boxes:

User [shape=plaintext, label=<
  <TABLE BORDER="1" CELLBORDER="1">
    <TR><TD COLSPAN="2"><B>User</B></TD></TR>
    <TR><TD>id</TD><TD>PK</TD></TR>
    <TR><TD>email</TD><TD>unique</TD></TR>
  </TABLE>
>];

Real-world uses

• Dependency graphs: npm ls --graph, cabal-plan dot, bazel query --output=graph.
• Compiler internals: LLVM's opt -dot-cfg produces control-flow graphs.
• Profilers: gprof2dot, pprof -dot, perf script | flame-graph alternative.
• Finite-state machines: many DSLs (xstate, statecharts) export DOT.
• Network topologies, org charts, family trees, academic concept maps.

Alternatives

• Mermaid — newer (2014), JavaScript-native, renders in Markdown, GitHub, Notion.
• D2 — modern (2022) language with a friendlier syntax and built-in themes.
• PlantUML — broader (UML, ER, sequence) and uses Graphviz under the hood for many diagram types.
• Gephi — interactive desktop app for very large graphs (millions of edges).

FAQ

Why does my graph look messy with hundreds of nodes? The default dot engine optimizes for small DAGs. For dense graphs, switch to sfdp with -Goverlap=prism -Gsplines=true, or break the graph into clusters so the layout can resolve them independently.

Can I get the same DOT file to render top-to-bottom and left-to-right? Yes — set rankdir=TB (default) or rankdir=LR as a graph attribute. You can override per run with -Grankdir=LR on the command line.

Is there a visual editor for DOT? Graphviz itself is text-driven. For interactive editing try Gephi (for large analytical graphs), yEd, or edotor.net. For collaboration, host DOT in a Git repo and let CI render it.

Why are my edges crossing through node labels? Increase nodesep and ranksep, set splines=ortho or splines=curved, or change to fdp/neato if the graph is undirected.

Can I cluster nodes from two different subgraphs? A node belongs to exactly one cluster. Use invisible edges (style=invis) or rank constraints ({rank=same; A; B}) to influence layout without reassigning ownership.