Graphviz Diagrams
Build directed and undirected graphs using the Graphviz DOT language with 8 layout engines.
Overview
Graphviz is a graph visualization tool that uses the DOT language to describe graphs. It excels at complex layouts, dependency graphs, and network topologies where automatic node positioning is important.
DOT Language Basics
Graphviz uses two graph types: digraph for directed graphs (arrows) and graph for undirected graphs (lines). Nodes are created automatically when referenced. Edges use -> for directed and -- for undirected graphs.
```dot
digraph G {
rankdir=LR;
node [shape=box, style=filled, fillcolor="#e8e8ff"];
API -> Auth -> Validate -> Process -> Response;
}
```Common node attributes: shape (box, circle, diamond, ellipse, oval, record), style (filled, rounded, dashed), fillcolor, fontname, fontsize. Common edge attributes: label, style (dashed, dotted, bold), color.
Layout Engines
Each layout engine is selected by using its name as the code block language identifier. The engine determines how nodes are positioned.
dot (Hierarchical)
The default engine for directed acyclic graphs. Arranges nodes in layers. Use rankdir=LR for left-to-right or rankdir=TB (default) for top-to-bottom.
```dot
digraph G {
rankdir=TB;
node [shape=box, style=filled, fillcolor="#e8e8ff"];
API -> Auth -> Validate -> Process -> Response;
}
```neato (Spring Model)
Best for undirected graphs and network topologies. Uses a spring-model algorithm to find an equilibrium layout.
```neato
graph G {
node [shape=circle];
A -- B -- C -- D -- A;
A -- C;
B -- D;
}
```fdp (Force-Directed)
Similar to neato but uses a force-directed approach. Good for larger undirected graphs with natural clustering.
```fdp
graph G {
node [shape=ellipse];
center -- a; center -- b; center -- c;
a -- d; a -- e;
b -- f; b -- g;
}
```twopi (Radial)
Arranges nodes in concentric circles radiating from a root node.
```twopi
graph G {
root -- child1; root -- child2; root -- child3;
child1 -- leaf1; child1 -- leaf2;
child2 -- leaf3; child2 -- leaf4;
}
```circo (Circular)
Arranges nodes on a circle. Ideal for cyclic structures and ring topologies.
```circo
digraph G {
A -> B -> C -> D -> E -> A;
}
```sfdp (Scalable Force-Directed)
A multi-scale version of fdp for very large graphs. Handles hundreds or thousands of nodes efficiently.
```sfdp
graph G {
node [shape=point];
a -- b; b -- c; c -- d; d -- e; e -- a;
f -- g; g -- h; h -- f;
a -- f; c -- g;
}
```osage (Clustered)
Lays out clusters (subgraphs) as rectangles. Useful for organizational charts and grouped layouts.
```osage
graph G {
subgraph cluster_0 { a; b; c; }
subgraph cluster_1 { d; e; f; }
}
```patchwork (Treemap)
Renders nodes as a treemap with proportional areas. The area attribute controls the relative size of each node.
```patchwork
graph G {
node [style=filled];
a [area=10, fillcolor="#ff9999"];
b [area=20, fillcolor="#99ff99"];
c [area=15, fillcolor="#9999ff"];
}
```Subgraphs and Clusters
Use subgraph cluster_name to group related nodes into a bordered cluster. Clusters can have their own labels and styles.
```dot
digraph G {
subgraph cluster_frontend {
label="Frontend";
style=filled;
fillcolor="#f0f0ff";
React; Components; State;
}
subgraph cluster_backend {
label="Backend";
style=filled;
fillcolor="#fff0f0";
API; Database; Auth;
}
React -> API;
Components -> API;
}
```Template Theming
Graphviz diagrams automatically adapt to your chosen template via CSS injection into the SVG. Node fills, edge strokes, and text colors are derived from the template color palette. Dark templates use light text; light templates use dark text.