mermaid-diagram-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagram Generator

Mermaid 图表生成器

Overview

概述

Generate Mermaid diagram code from natural language descriptions and validate syntax before outputting. Mermaid is a JavaScript-based diagramming tool that renders diagrams from text definitions.

根据自然语言描述生成Mermaid图表代码，并在输出前验证语法。Mermaid是一款基于JavaScript的绘图工具，可通过文本定义渲染图表。

When to Use

适用场景

User says "create a flowchart", "draw a diagram", "make a mind map"
User wants "sequence diagram", "class diagram", "ER diagram", "state diagram"
User mentions "Mermaid" directly
User wants to visualize processes, architectures, or relationships
User needs syntax-validated diagram code

用户提到「创建流程图」、「绘制图表」、「制作思维导图」
用户需要「时序图」、「类图」、「ER图」、「状态图」
用户直接提及「Mermaid」
用户需要将流程、架构或关系可视化
用户需要经过语法验证的图表代码

Supported Diagram Types

支持的图表类型

Type	Keyword triggers
Flowchart	flowchart, flow chart, 流程图
Sequence Diagram	sequence, 时序图, 顺序图
Class Diagram	class diagram, 类图
State Diagram	state diagram, 状态图
ER Diagram	ER diagram, er图, 实体关系图
Gantt Chart	gantt, 甘特图
Pie Chart	pie chart, 饼图
Mind Map	mind map, 思维导图
Journey	user journey, 用户旅程
Git Graph	git graph, git graph

类型	触发关键词
流程图	flowchart, flow chart, 流程图
时序图	sequence, 时序图, 顺序图
类图	class diagram, 类图
状态图	state diagram, 状态图
ER图	ER diagram, er图, 实体关系图
甘特图	gantt, 甘特图
饼图	pie chart, 饼图
思维导图	mind map, 思维导图
用户旅程图	user journey, 用户旅程
Git关系图	git graph, git graph

Core Pattern

核心流程

Step 1: Identify Diagram Type

步骤1：确定图表类型

Match user intent to the most appropriate Mermaid diagram type:

Process flows → Flowchart
Time-based interactions → Sequence Diagram
Object relationships → Class Diagram
State transitions → State Diagram
Database schema → ER Diagram
Timeline scheduling → Gantt Chart
Proportional data → Pie Chart
Hierarchical information → Mind Map

将用户需求匹配到最合适的Mermaid图表类型：

流程流转 → 流程图
基于时间的交互 → 时序图
对象关系 → 类图
状态转换 → 状态图
数据库schema → ER图
时间线排期 → 甘特图
占比数据 → 饼图
层级信息 → 思维导图

Step 2: Generate Mermaid Syntax

步骤2：生成Mermaid语法

mermaid

%% Example: Flowchart
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E

mermaid

%% Example: Flowchart
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E

Step 3: Validate Syntax (REQUIRED)

步骤3：验证语法（必填步骤）

Always validate before outputting:

Check bracket matching: All
```
[
```
,
```
]
```
,
```
(
```
,
```
)
```
,
```
{
```
,
```
}
```
must be balanced
Verify direction:
```
TD
```
,
```
BT
```
,
```
LR
```
,
```
RL
```
for graphs;
```
<<
```
for sequence actors
Validate arrow syntax:
```
-->
```
or
```
---
```
for links,
```
-->|text|
```
for labeled links
Check node IDs: Unique identifiers without special characters
Test with Mermaid Live Editor: https://mermaid.live/

Common syntax errors to avoid:

Missing direction (
```
graph
```
without TD/BT/LR/RL)
Unclosed brackets in node labels
Invalid arrow types (use
```
-->
```
not
```
->
```
)
Duplicate node IDs
Missing colon after graph type (
```
graph TD
```
not
```
graph
```
)

输出前必须完成验证：

检查括号匹配：所有
```
[
```
、
```
]
```
、
```
(
```
、
```
)
```
、
```
{
```
、
```
}
```
必须成对闭合
确认方向设置：图表需指定
```
TD
```
、
```
BT
```
、
```
LR
```
、
```
RL
```
方向；时序图参与者使用
```
<<
```
标识
验证箭头语法：连接线使用
```
-->
```
或
```
---
```
，带标签的连接线使用
```
-->|text|
```
检查节点ID：标识符唯一，不包含特殊字符
使用Mermaid Live Editor测试：https://mermaid.live/

需要避免的常见语法错误：

缺失方向（
```
graph
```
后未加TD/BT/LR/RL）
节点标签括号未闭合
箭头类型错误（使用
```
-->
```
而非
```
->
```
）
节点ID重复
图表类型后缺失方向（正确写法是
```
graph TD
```
而非
```
graph
```
）

Step 4: Provide Output

步骤4：输出结果

Present the validated Mermaid code in a markdown code block with

mermaid

language tag.

将验证通过的Mermaid代码放在标记为

mermaid

语言的markdown代码块中输出。

Quick Reference

快速参考

Flowchart Syntax

流程图语法

graph TD/BT/LR/RL
    Node[DisplayID Text]
    NodeID --> OtherNode
    NodeID -->|Label| OtherNode
    NodeID --> Decision{condition}

graph TD/BT/LR/RL
    Node[DisplayID Text]
    NodeID --> OtherNode
    NodeID -->|Label| OtherNode
    NodeID --> Decision{condition}

Sequence Diagram Syntax

时序图语法

sequenceDiagram
    participant A as Actor
    participant B as System
    A->>B: Request
    B-->>A: Response
    Note over A,B: Note text

sequenceDiagram
    participant A as Actor
    participant B as System
    A->>B: Request
    B-->>A: Response
    Note over A,B: Note text

Class Diagram Syntax

类图语法

classDiagram
    Class01 <|-- DerivedClass
    Class01 : +method1()
    Class01 : +method2()
    Class01 *-- Class02

classDiagram
    Class01 <|-- DerivedClass
    Class01 : +method1()
    Class01 : +method2()
    Class01 *-- Class02

State Diagram Syntax

状态图语法

stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]

stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]

ER Diagram Syntax

ER图语法

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

Validation Checklist

验证检查清单

Common Mistakes

常见错误

Mistake	Fix
Missing graph direction	Add TD/BT/LR/RL after `graph`
Unclosed brackets	Close all `[` , `(` , `{`
Wrong arrow type	Use `-->` for solid, `--` for line
Missing pipe in labels	Use `-->
Duplicate IDs	Use unique IDs: A1, A2 not A, A

错误	修复方案
缺失图表方向	在 `graph` 后添加TD/BT/LR/RL
括号未闭合	闭合所有 `[` 、 `(` 、 `{`
箭头类型错误	实线用 `-->` ，普通连线用 `--`
标签缺失竖线	使用`-->
ID重复	使用唯一ID：如A1、A2，不要重复用A

Integration with Excalidraw

与Excalidraw集成

For complex diagrams requiring manual editing:

Use Excalidraw for interactive diagrams
Export Excalidraw to Mermaid when possible
Consider user's preference for tool

对于需要手动编辑的复杂图表：

使用Excalidraw制作可交互图表
可将Excalidraw内容导出为Mermaid格式
考虑用户的工具使用偏好

Resources

资源

Mermaid Live Editor: https://mermaid.live/
Mermaid Documentation: https://mermaid.js.org/intro/
Mermaid GitHub: https://github.com/mermaid-js/mermaid

Mermaid在线编辑器：https://mermaid.live/
Mermaid官方文档：https://mermaid.js.org/intro/
Mermaid GitHub仓库：https://github.com/mermaid-js/mermaid