DOT is a simple language for describing graphs and diagrams. Master it to create professional visualizations manually or understand AI-generated code.
Practical guide to the DOT language with examples and best practices — maintained and reviewed by the Ideas2Graph team.
Every DOT file has a simple structure:
graph - for undirected graphs (connections have no direction)digraph - for directed graphs (connections have arrows)-- for undirected edges, -> for directedshape - box, circle, diamond, ellipsestyle - filled, rounded, dashedfillcolor - background colorlabel - text to displayrankdir - TB (top-bottom), LR (left-right)bgcolor - background colorlabel - graph titleA basic undirected graph with three nodes
graph {
A -- B
B -- C
C -- A
}Shows direction of flow with arrows
digraph {
Start -> Process
Process -> Decision
Decision -> End
}Customize node appearance with colors and shapes
digraph {
node [style=filled]
A [fillcolor=lightblue, shape=box]
B [fillcolor=lightgreen, shape=circle]
C [fillcolor=pink, shape=diamond]
A -> B -> C
}A simple decision-making flowchart
digraph {
rankdir=TB
node [shape=box, style=filled, fillcolor=lightblue]
Start [shape=ellipse, fillcolor=lightgreen]
End [shape=ellipse, fillcolor=pink]
Decision [shape=diamond, fillcolor=lightyellow]
Start -> "Check Status"
"Check Status" -> Decision
Decision -> "Process A" [label="Yes"]
Decision -> "Process B" [label="No"]
"Process A" -> End
"Process B" -> End
}Organizational chart or tree structure
digraph {
rankdir=TB
node [shape=box, style="rounded,filled", fillcolor=lightblue]
CEO [fillcolor=gold]
CTO [fillcolor=lightgreen]
CFO [fillcolor=lightgreen]
CEO -> CTO
CEO -> CFO
CTO -> "Dev Team"
CTO -> "QA Team"
CFO -> "Finance"
}Group related nodes together
digraph {
subgraph cluster_0 {
label="Frontend"
style=filled
fillcolor=lightblue
A -> B
}
subgraph cluster_1 {
label="Backend"
style=filled
fillcolor=lightgreen
C -> D
}
B -> C [label="API"]
}