mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagram Visualizer

Mermaid 图表可视化工具

Quick Start: Identify diagram type (flowchart/sequence/state/class/ER/gantt/mindmap) → Define nodes with shapes → Connect with arrows → Wrap in

```mermaid

fence. Default: top-to-bottom (

TD

), use

flowchart

over

graph

, Unicode supported.

快速开始： 确定图表类型（flowchart/sequence/state/class/ER/gantt/mindmap）→ 定义带形状的节点 → 用箭头连接 → 包裹在

```mermaid

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

TD

），优先使用

flowchart

而非

graph

，支持Unicode字符。

Critical Syntax Rules

关键语法规则

Rule 1: List Syntax Conflicts

规则1：列表语法冲突

❌ [1. Item]     → "Unsupported markdown: list"
✅ [1.Item]      → Remove space after period
✅ [① Item]      → Use circled numbers ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item]    → Use parentheses

❌ [1. Item]     → "不支持的markdown：列表"
✅ [1.Item]      → 移除句点后的空格
✅ [① Item]      → 使用带圈数字①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item]    → 使用括号

Rule 2: Subgraph Naming

规则2：子图命名

❌ subgraph AI Agent Core    → Space without quotes
✅ subgraph agent["AI Agent Core"]  → ID with display name
✅ subgraph agent            → Simple ID only

❌ subgraph AI Agent Core    → 未加引号的空格
✅ subgraph agent["AI Agent Core"]  → 带显示名称的ID
✅ subgraph agent            → 仅使用简单ID

Rule 3: Node References in Subgraphs

规则3：子图中的节点引用

❌ Title --> AI Agent Core   → Reference display name
✅ Title --> agent           → Reference subgraph ID

❌ Title --> AI Agent Core   → 引用显示名称
✅ Title --> agent           → 引用子图ID

Rule 4: Special Characters in Node Text

规则4：节点文本中的特殊字符

✅ ["Text with spaces"]       → Quotes for spaces
✅ Use 『』 instead of ""     → Avoid quotation marks
✅ Use 「」 instead of ()     → Avoid parentheses

✅ ["Text with spaces"]       → 空格文本使用引号
✅ 使用『』替代""     → 避免使用双引号
✅ 使用「」替代()     → 避免使用括号

Rule 5: Use flowchart over graph

规则5：优先使用flowchart而非graph

❌ graph TD      → Outdated
✅ flowchart TD  → Supports subgraph directions, more features

❌ graph TD      → 已过时
✅ flowchart TD  → 支持子图方向，功能更丰富

Common Pitfalls

常见问题

Issue	Solution
Diagram won't render	Check unmatched brackets, quotes
List syntax error	`[1.Item]` not `[1. Item]`
Subgraph reference fails	Use ID not display name
Too crowded	Split into multiple diagrams
Crossing connections	Use different layout direction or invisible edges `~~~`

问题	解决方案
图表无法渲染	检查未匹配的括号、引号
列表语法错误	使用 `[1.Item]` 而非 `[1. Item]`
子图引用失败	使用ID而非显示名称
图表过于拥挤	拆分为多个图表
连线交叉	使用不同布局方向或隐藏边 `~~~`

Output Format

输出格式

markdown

```mermaid
[diagram code]
```