Agent Skills
› markdown-viewer/skills
› graphviz
graphviz
GitHub基于 DOT 语言生成有向或无向图，适用于依赖树、调用图和模块关系可视化。提供语法规范、常见陷阱及布局优化方案，支持精细化的边路由和节点属性设置。
Trigger Scenarios
需要生成系统架构图或依赖关系图
使用 DOT 语言编写 Graphviz 图表
解决图形布局重叠或边交叉问题
Install
npx skills add markdown-viewer/skills --skill graphviz -g -y
SKILL.md
Frontmatter
{
"name": "graphviz",
"metadata": {
"author": "Graphviz is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome\/Edge\/Firefox\/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https:\/\/docu.md"
},
"description": "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."
}
Graphviz DOT Diagram Generator
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.
Critical Syntax Rules
Rule 1: Cluster Naming
❌ subgraph backend { } → Won't render as box
✅ subgraph cluster_backend { } → Must start with cluster_
Rule 2: Node IDs with Spaces
❌ API Gateway [label="API"]; → Invalid ID
✅ "API Gateway" [label="API"]; → Quote the ID
✅ api_gateway [label="API Gateway"]; → Use underscore ID
Rule 3: Edge Syntax Difference
digraph: A -> B; → Directed arrow
graph: A -- B; → Undirected line
Rule 4: Attribute Syntax
❌ node [shape=box color=red] → Missing comma
✅ node [shape=box, color=red]; → Comma separated
Rule 5: HTML Labels
✅ shape=plaintext for HTML labels
✅ Use < > not " " for HTML content
Common Pitfalls
| Issue | Solution |
|---|---|
| Nodes overlapping | Increase nodesep and ranksep |
| Poor layout | Change rankdir or add {rank=same} |
| Edges crossing | Use splines=ortho or adjust node order |
| Cluster not showing | Name must start with cluster_ |
| Label not displaying | Check quote escaping |
Output Format
```dot
digraph G {
[diagram code]
}
```
Related Files
For advanced layout control and complex styling, refer to references below:
- syntax.md — Layout control (rankdir, splines, rank), HTML labels, edge styles, cluster subgraphs, and record-based nodes
Version History
- a3afd45 Current 2026-07-25 05:07
