DOT file - .dot extension for source

Rendered images - Use Bash to render:

dot -Tpng graph.dot -o graph.png
dot -Tsvg graph.dot -o graph.svg
dot -Tpdf graph.dot -o graph.pdf

Workflow

Choose graph type - digraph (directed) or graph (undirected)
Define structure - Nodes and edges
Apply attributes - Styling and layout hints
Write file - Save as .dot
Render (optional) - Convert to image format

Graph Types

Directed Graph (digraph)

digraph ProcessFlow {
    rankdir=LR;

    start [shape=circle, style=filled, fillcolor=green];
    end [shape=doublecircle, style=filled, fillcolor=red];

    start -> process1 -> decision;
    decision -> process2 [label="yes"];
    decision -> process3 [label="no"];
    process2 -> end;
    process3 -> end;
}

Undirected Graph (graph)

graph Network {
    layout=neato;
    overlap=false;

    server [shape=box3d];
    client1 -- server;
    client2 -- server;
    client3 -- server;
    client1 -- client2 [style=dashed];
}

Common Patterns

Hierarchical Layout (Default)

digraph Hierarchy {
    rankdir=TB;
    node [shape=box];

    CEO -> {VP1, VP2, VP3};
    VP1 -> {M1, M2};
    VP2 -> {M3, M4};
    VP3 -> {M5, M6};
}

Dependency Graph

digraph Dependencies {
    rankdir=LR;
    node [shape=box, style=rounded];

    app -> {libA, libB, libC};
    libA -> {libD, libE};
    libB -> libD;
    libC -> libE;
}

State Machine

digraph StateMachine {
    rankdir=LR;
    node [shape=circle];

    start [shape=point];
    end [shape=doublecircle];

    start -> idle;
    idle -> running [label="start"];
    running -> paused [label="pause"];
    paused -> running [label="resume"];
    running -> idle [label="stop"];
    idle -> end [label="exit"];
}

Network Topology

graph Topology {
    layout=fdp;
    overlap=false;
    splines=true;

    subgraph cluster_dc1 {
        label="Data Center 1";
        style=dashed;
        router1 [shape=box3d];
        server1a, server1b;
    }

    subgraph cluster_dc2 {
        label="Data Center 2";
        style=dashed;
        router2 [shape=box3d];
        server2a, server2b;
    }

    internet [shape=cloud];

    router1 -- server1a;
    router1 -- server1b;
    router2 -- server2a;
    router2 -- server2b;
    router1 -- internet;
    router2 -- internet;
}

Record-Based Nodes (Structs)

digraph Structs {
    node [shape=record];

    struct1 [label="{Name|{Field1|Field2|Field3}}"];
    struct2 [label="{<f0>Head|{<f1>Left|<f2>Right}}"];

    struct2:f1 -> struct1;
    struct2:f2 -> struct1;
}

Node Shapes

Shape	Use Case
`box`	Process, component
`ellipse`	Default, general
`circle`	State, small node
`doublecircle`	Final state
`diamond`	Decision
`record`	Data structure
`Mrecord`	Rounded record
`box3d`	Server, database
`cylinder`	Database
`folder`	Directory
`note`	Comment
`tab`	Tab/window
`house`	Home/start
`invhouse`	Inverted house
`polygon`	Custom (sides=N)
`point`	Tiny/start point
`plaintext`	Text only

Edge Attributes

digraph Edges {
    A -> B [label="labeled"];
    A -> C [style=dashed];
    A -> D [style=dotted];
    A -> E [style=bold];
    A -> F [color=red];
    A -> G [penwidth=3];
    A -> H [arrowhead=none];
    A -> I [arrowhead=diamond];
    A -> J [dir=both];
    A -> K [constraint=false];  // Don't affect rank
}

Subgraphs and Clusters

digraph Clusters {
    subgraph cluster_0 {
        label="Cluster A";
        style=filled;
        color=lightgrey;
        a0 -> a1 -> a2;
    }

    subgraph cluster_1 {
        label="Cluster B";
        color=blue;
        b0 -> b1 -> b2;
    }

    a2 -> b0;
}

Note: Subgraphs named cluster_* are drawn as boxes.

Layout Engines

Engine	Use Case
`dot`	Hierarchical (default)
`neato`	Spring model, undirected
`fdp`	Force-directed
`sfdp`	Large graph force-directed
`circo`	Circular layout
`twopi`	Radial layout

Select via:

digraph G {
    layout=neato;
    // or use command: neato -Tpng graph.dot -o graph.png
}

Rendering Commands

# Basic PNG
dot -Tpng input.dot -o output.png

# SVG for web
dot -Tsvg input.dot -o output.svg

# PDF for documents
dot -Tpdf input.dot -o output.pdf

# High-resolution PNG
dot -Tpng -Gdpi=300 input.dot -o output.png

# Using different layout engine
neato -Tpng input.dot -o output.png
fdp -Tpng input.dot -o output.png

# Validate syntax
dot -Tcanon input.dot

# Debug layout
dot -v input.dot

Critical Rules

Semicolons - Optional but recommended for clarity
Quotes - Use for labels with spaces/special chars
IDs - No spaces, or use quotes: "Node Name"
Attributes - In square brackets: [attr=value]
Cluster naming - Must start with cluster_ to be boxed
Edge syntax - -> for digraph, -- for graph

When to Use GraphViz

Complex dependency graphs
Large graphs with many nodes
Network topology diagrams
State machines and automata
When precise layout control is needed
When rendering to image files is required
Hierarchical structures (org charts, trees)
When automatic layout is preferred over manual

References

See references/dot-syntax.md for complete attribute reference. See references/layout-engines.md for detailed layout engine comparison.

graphviz

GraphViz DOT Generation

Quick Start

Output Formats