graphviz

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Graphviz DOT Diagram Generator

Graphviz DOT 图表生成器

Important: Use
```dot
as the code fence identifier, NOT
```graphviz
.

Quick Start: Choose

digraph

(directed) or

graph

(undirected) → Define nodes with attributes (shape, color, label) → Connect with

->

--

→ Set layout (rankdir, spacing) → Wrap in

```dot

fence. Default: top-to-bottom (

rankdir=TB

), cluster names must start with

cluster_

, use semicolons.

重要提示： 请使用
```dot
作为代码块标识，而非
```graphviz
。

快速入门： 选择

digraph

（有向图）或

graph

（无向图）→ 定义带属性的节点（形状、颜色、标签）→ 使用

->

或

--

连接节点→ 设置布局（rankdir、间距）→ 包裹在

```dot

代码块中。默认设置：从上到下布局（

rankdir=TB

），集群名称必须以

cluster_

开头，语句以分号结尾。

Critical Syntax Rules

关键语法规则

Rule 1: Cluster Naming

规则1：集群命名

❌ subgraph backend { }      → Won't render as box
✅ subgraph cluster_backend { }  → Must start with cluster_

❌ subgraph backend { }      → 无法渲染为方框
✅ subgraph cluster_backend { }  → 必须以cluster_开头

Rule 2: Node IDs with Spaces

规则2：含空格的节点ID

❌ API Gateway [label="API"];    → Invalid ID
✅ "API Gateway" [label="API"];  → Quote the ID
✅ api_gateway [label="API Gateway"];  → Use underscore ID

❌ API Gateway [label="API"];    → 无效ID
✅ "API Gateway" [label="API"];  → 为ID添加引号
✅ api_gateway [label="API Gateway"];  → 使用下划线作为ID

Rule 3: Edge Syntax Difference

规则3：边的语法差异

digraph: A -> B;   → Directed arrow
graph:   A -- B;   → Undirected line

digraph: A -> B;   → 有向箭头
graph:   A -- B;   → 无向直线

Rule 4: Attribute Syntax

规则4：属性语法

❌ node [shape=box color=red]    → Missing comma
✅ node [shape=box, color=red];  → Comma separated

❌ node [shape=box color=red]    → 缺少逗号
✅ node [shape=box, color=red];  → 使用逗号分隔属性

Rule 5: HTML Labels

规则5：HTML标签

✅ shape=plaintext for HTML labels
✅ Use < > not " " for HTML content

✅ 为HTML标签设置shape=plaintext
✅ HTML内容使用< >而非" "包裹

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

问题	解决方案
节点重叠	增大 `nodesep` 和 `ranksep` 的值
布局效果差	修改 `rankdir` 或添加 `{rank=same}`
边交叉	使用 `splines=ortho` 或调整节点顺序
集群未显示	名称必须以 `cluster_` 开头
标签未显示	检查引号转义是否正确

Output Format

输出格式

markdown

```dot
digraph G {
    [diagram code]
}
```