Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.
Important: Use
```dotas the code fence identifier, NOT```graphviz.
Quick Start: Choose digraph (directed) or graph (undirected) → Define nodes with attributes (shape, color, label) → Connect with -> or -- → Set layout (rankdir, spacing) → Wrap in ```dot fence. Default: top-to-bottom (rankdir=TB), cluster names must start with cluster_, use semicolons.
❌ subgraph backend { } → Won't render as box
✅ subgraph cluster_backend { } → Must start with cluster_
❌ API Gateway [label="API"]; → Invalid ID
✅ "API Gateway" [label="API"]; → Quote the ID
✅ api_gateway [label="API Gateway"]; → Use underscore ID