吴志勇的博客
wuzhiyong
2026-06-24

Mermaid语法

# Mermaid 语法

Mermaid 是一个基于文本的图表绘制工具，使用简单的 Markdown 风格语法即可生成流程图、时序图、类图等多种图表。

在 Markdown 中使用 Mermaid：

```mermaid
图表代码
```
1
2
3

# 一、流程图（Flowchart）

# 方向与基本节点

代码：

flowchart TD
    A[开始] --> B{判断}
    B -- 是 --> C[处理]
    B -- 否 --> D[结束]
1
2
3
4

效果：

# 节点形状

代码：

flowchart LR
    A[矩形] --> B(圆角矩形)
    B --> C([体育场形])
    C --> D[[子程序形]]
    D --> E[(圆柱/数据库)]
    E --> F{菱形}
    F --> G>不对称]
    G --> H[/平行四边形/]
    H --> I[\反斜平行四边形\]
    I --> J[/梯形\]
    J --> K[\倒梯形/]
    K --> L(((圆形)))
1
2
3
4
5
6
7
8
9
10
11
12

效果：

# 连接线类型

代码：

flowchart LR
    A1 --- B1
    A2 --> B2
    A3 === B3
    A4 ==> B4
    A5 -.- B5
    A6 -.-> B6
    A7 -- 文本 --- B7
    A8 -- 文本 --> B8
    A9 -. 文本 .-> B9
    A10 == 文本 ==> B10
1
2
3
4
5
6
7
8
9
10
11

效果：

# 子图

代码：

flowchart TB
    subgraph 子图A
        a1 --> a2
    end
    subgraph 子图B
        b1 --> b2
    end
    a2 --> b1
1
2
3
4
5
6
7
8

效果：

# 节点样式

代码：

flowchart LR
    A[红色] --> B[绿色] --> C[蓝色]
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#9f9,stroke:#333,color:#fff
    style C fill:#99f,stroke:#333
1
2
3
4
5

效果：

# 二、时序图（Sequence Diagram）

代码：

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应
    Note right of B: 处理中...
    A->>B: 确认
    B-->>A: 完成
1
2
3
4
5
6
7
8

效果：

# 激活框

代码：

sequenceDiagram
    A->>B: 请求
    activate B
    B-->>A: 响应
    deactivate B
1
2
3
4
5

效果：

# 片段（循环/条件）

代码：

sequenceDiagram
    A->>B: 请求
    loop 重试3次
        B-->>A: 响应
    end
    alt 成功
        A->>B: 继续
    else 失败
        B-->>A: 错误
    end
    opt 可选步骤
        A->>B: 额外操作
    end
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

# 三、类图（Class Diagram）

代码：

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +breed String
        +bark() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
1
2
3
4
5
6
7
8
9
10
11
12

效果：

# 关系符号

代码：

classDiagram
    classA <|-- classB : 继承
    classC *-- classD : 组合
    classE o-- classF : 聚合
    classG --> classH : 关联
    classI ..> classJ : 依赖
    classK ..|> classL : 实现
1
2
3
4
5
6
7

效果：

# 四、状态图（State Diagram）

代码：

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 支付成功
    待支付 --> 已取消: 超时取消
    已支付 --> 已发货: 发货
    已发货 --> 已完成: 确认收货
    已完成 --> [*]
    已取消 --> [*]
1
2
3
4
5
6
7
8

效果：

# 复合状态

代码：

stateDiagram-v2
    [*] --> 活跃
    state 活跃 {
        [*] --> 在线
        在线 --> 离开: 闲置
        离开 --> 在线: 操作
        在线 --> 离线: 断开
        离线 --> 在线: 重连
    }
    活跃 --> [*]: 退出
1
2
3
4
5
6
7
8
9
10

效果：

# 五、实体关系图（ER Diagram）

代码：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : includes
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date order_date
    }
    PRODUCT {
        int id PK
        string name
        decimal price
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：

# 六、甘特图（Gantt Chart）

代码：

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    section 需求阶段
    需求分析       :a1, 2026-06-01, 5d
    需求评审       :a2, after a1, 2d
    section 开发阶段
    编码实现       :a3, after a2, 10d
    单元测试       :a4, after a3, 3d
    section 测试阶段
    集成测试       :a5, after a4, 5d
    部署上线       :milestone, m1, after a5, 0d
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

# 七、饼图（Pie Chart）

代码：

pie title 浏览器市场份额
    "Chrome" : 64
    "Edge" : 13
    "Firefox" : 12
    "Safari" : 8
    "其他" : 3
1
2
3
4
5
6

效果：

# 八、Git 分支图（Gitgraph）

代码：

gitGraph
    commit id: "初始化"
    commit id: "基础功能"
    branch feature
    checkout feature
    commit id: "功能开发1"
    commit id: "功能开发2"
    checkout main
    merge feature
    commit id: "发布v1.0"
1
2
3
4
5
6
7
8
9
10

效果：

# 九、思维导图（Mindmap）

代码：

mindmap
  root((Mermaid))
    流程图
      节点形状
      连接线
    时序图
      参与者
      片段
    类图
      关系
    状态图
      状态转换
    其他图表
      甘特图
      饼图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：

# 十、时间线（Timeline）

代码：

timeline
    title 项目里程碑
    2026年1月 : 项目启动
              : 需求调研
    2026年3月 : 原型设计
              : UI设计
    2026年5月 : 开发完成
              : 内部测试
    2026年6月 : 正式上线
1
2
3
4
5
6
7
8
9

效果：

# 十一、用户旅程图（User Journey）

代码：

journey
    title 用户购物流程
    section 浏览商品
        搜索商品: 5: 用户
        查看详情: 4: 用户
        浏览评价: 3: 用户
    section 下单支付
        加入购物车: 5: 用户
        填写地址: 3: 用户
        支付订单: 4: 用户, 系统
1
2
3
4
5
6
7
8
9
10

效果：

# 十二、高级技巧

# 样式类

代码：

flowchart LR
    A:::red --> B:::green
    classDef red fill:#f9f,stroke:#333
    classDef green fill:#9f9,stroke:#333
1
2
3
4

效果：

# 点击交互

代码：

flowchart LR
    A[点击跳转] --> B[百度]
    click A "https://example.com" _blank
    click B "https://baidu.com" _blank
1
2
3
4

效果：

# 注释与转义

%% 这是单行注释
A["括号[]和()需用引号包裹"]
B["显示#时使用#35;"]
1
2
3

# 参考

  • 官方文档：https://mermaid.js.org/
  • 在线编辑器：https://mermaid.live/
上次更新: 2026-06-24 03:11:18

←

Copyright © 2020-2026 wuzhiyong