Agent Skills: GraphViz DOT Generation

GraphViz DOT Generation

Generate graph descriptions using DOT language. GraphViz provides powerful automatic layout algorithms for complex graphs.

Quick Start

Minimal directed graph:

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

Output Formats

1. DOT file - .dot extension for source
2. 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

1. Choose graph type - digraph (directed) or graph (undirected)
2. Define structure - Nodes and edges
3. Apply attributes - Styling and layout hints
4. Write file - Save as .dot
5. 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

1. Semicolons - Optional but recommended for clarity
2. Quotes - Use for labels with spaces/special chars
3. IDs - No spaces, or use quotes: "Node Name"
4. Attributes - In square brackets: [attr=value]
5. Cluster naming - Must start with cluster_ to be boxed
6. 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.