Graphviz DOT Diagrams

Graphviz uses the DOT language to create sophisticated graph layouts. Excellent for complex network diagrams, dependency graphs, state machines, and any graph-based visualization where automatic layout is beneficial.

Use Case

Use Graphviz when you need to:

• Visualize complex networks or dependencies
• Create state machines
• Show hierarchical structures
• Generate automatic graph layouts
• Visualize data structures (trees, graphs)

Code

1```viz-dot
2digraph G {
3    A -> B;
4    B -> C;
5    C -> A;
6}
7```

Result:

Explanation

• digraph - Directed graph (use graph for undirected)
• -> - Directed edge (use -- for undirected)
• Node names are identifiers
• Attributes in square brackets: [label="text"]
• Graph/node/edge attributes control appearance

Examples

Example 1: Simple Directed Graph

 1```viz-dot
 2digraph Dependencies {
 3    rankdir=LR;
 4    node [shape=box, style=rounded];
 5    
 6    Main -> Parser;
 7    Main -> Executor;
 8    Parser -> Lexer;
 9    Parser -> AST;
10    Executor -> AST;
11    Executor -> Runtime;
12}
13```

Result:

Example 2: State Machine

 1```viz-dot
 2digraph StateMachine {
 3    rankdir=LR;
 4    node [shape=circle];
 5    
 6    start [shape=point];
 7    end [shape=doublecircle];
 8    
 9    start -> Idle;
10    Idle -> Processing [label="start"];
11    Processing -> Success [label="complete"];
12    Processing -> Error [label="fail"];
13    Success -> end;
14    Error -> Retry [label="retry"];
15    Retry -> Processing;
16    Error -> end [label="abort"];
17}
18```

Result:

Example 3: Hierarchical Structure

 1```viz-dot
 2digraph Hierarchy {
 3    node [shape=box, style="rounded,filled", fillcolor=lightblue];
 4    
 5    CEO [fillcolor=gold];
 6    CTO [fillcolor=lightgreen];
 7    CFO [fillcolor=lightgreen];
 8    
 9    CEO -> CTO;
10    CEO -> CFO;
11    
12    CTO -> "Dev Team Lead";
13    CTO -> "QA Team Lead";
14    CFO -> "Accounting";
15    CFO -> "Finance";
16    
17    "Dev Team Lead" -> "Developer 1";
18    "Dev Team Lead" -> "Developer 2";
19    "QA Team Lead" -> "QA Engineer";
20}
21```

Result:

Example 4: Network Topology

 1```viz-dot
 2graph Network {
 3    layout=neato;  // Force-directed layout
 4    node [shape=box];
 5    
 6    Internet [shape=cloud, fillcolor=lightblue, style=filled];
 7    Router [shape=triangle];
 8    Switch [shape=box];
 9    
10    Server1 [fillcolor=lightgreen, style=filled];
11    Server2 [fillcolor=lightgreen, style=filled];
12    PC1 [fillcolor=lightyellow, style=filled];
13    PC2 [fillcolor=lightyellow, style=filled];
14    PC3 [fillcolor=lightyellow, style=filled];
15    
16    Internet -- Router [label="WAN"];
17    Router -- Switch [label="LAN"];
18    Switch -- Server1 [label="1Gbps"];
19    Switch -- Server2 [label="1Gbps"];
20    Switch -- PC1 [label="100Mbps"];
21    Switch -- PC2 [label="100Mbps"];
22    Switch -- PC3 [label="100Mbps"];
23}
24```

Result:

Example 5: Data Structure (Binary Tree)

 1```viz-dot
 2digraph BinaryTree {
 3    node [shape=circle, style=filled, fillcolor=lightblue];
 4    
 5    50 -> 30;
 6    50 -> 70;
 7    30 -> 20;
 8    30 -> 40;
 9    70 -> 60;
10    70 -> 80;
11    
12    null1 [shape=point];
13    null2 [shape=point];
14    null3 [shape=point];
15    null4 [shape=point];
16    
17    20 -> null1 [style=dashed];
18    20 -> null2 [style=dashed];
19    40 -> null3 [style=dashed];
20    60 -> null4 [style=dashed];
21}
22```

Result:

Common Attributes

Node Shapes

• box, circle, ellipse, triangle, diamond
• point, plaintext, record, Mrecord
• doublecircle, house, hexagon, octagon

Layout Engines

• dot - Hierarchical (default)
• neato - Force-directed
• fdp - Force-directed with springs
• circo - Circular
• twopi - Radial

Edge Styles

• solid, dashed, dotted, bold
• dir=both - Bidirectional arrow
• dir=none - No arrow

Colors

• Named colors: red, blue, lightgreen, etc.
• Hex colors: "#FF0000"
• RGB: "#FF0000"

Notes

• Use rankdir=LR for left-to-right layout (default is top-to-bottom)
• Subgraphs create visual groupings: subgraph cluster_name {}
• Use quotes for labels with spaces: [label="My Node"]
• Test complex graphs at https://dreampuf.github.io/GraphvizOnline/

Gotchas/Warnings

• ⚠️ Layout: Automatic layout may not match your mental model - iterate
• ⚠️ Complexity: Very large graphs can be slow to render
• ⚠️ Quotes: Use quotes for identifiers with spaces or special characters
• ⚠️ Semicolons: Optional but recommended for clarity

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js