Loading...
Loading...
Create complex directed/undirected graphs with automatic layout using DOT language. Best for dependency trees, module relationships, package hierarchies, and call graphs. Use when you need fine-grained edge routing or hierarchical layouts with many levels. NOT for simple flowcharts (use mermaid), data charts (use vega), or network topology with device icons (use network).
npx skill4agent add markdown-viewer/skills graphvizImportant: Useas the code fence identifier, NOT```dot.```graphviz
digraphgraph->--```dotrankdir=TBcluster_❌ 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 IDdigraph: A -> B; → Directed arrow
graph: A -- B; → Undirected line❌ node [shape=box color=red] → Missing comma
✅ node [shape=box, color=red]; → Comma separated✅ shape=plaintext for HTML labels
✅ Use < > not " " for HTML content| Issue | Solution |
|---|---|
| Nodes overlapping | Increase |
| Poor layout | Change |
| Edges crossing | Use |
| Cluster not showing | Name must start with |
| Label not displaying | Check quote escaping |
```dot
digraph G {
[diagram code]
}
```For advanced layout control and complex styling, refer to references below: