Mermaid 流程图 #

流程图是Mermaid中最常用的图表类型之一，用于展示流程逻辑、决策路径和工作流。

基本语法 #

图表方向 #

流程图可以有不同的方向：

方向 描述
TD/TB 从上到下 (Top Down/Bottom)
LR 从左到右 (Left Right)
RL 从右到左 (Right Left)
BT 从下到上 (Bottom Top)

基本示例 #

mermaid 
graph TD
  A[开始] --> B[处理]
  B --> C{条件判断}
  C -->|是| D[执行操作1]
  C -->|否| E[执行操作2]
  D --> F[结束]
  E --> F

节点形状 #

Mermaid支持多种节点形状：

1. 矩形节点 #

mermaid 
graph LR
  A[普通矩形]

2. 圆角矩形节点 #

mermaid 
graph LR
  A(圆角矩形)

3. 菱形节点（用于条件判断） #

mermaid 
graph LR
  A{条件判断}

4. 圆柱节点（用于数据库） #

mermaid 
graph LR
  A[(数据库)]

5. 圆形节点 #

mermaid 
graph LR
  A((圆形节点))

6. 旗帜节点 #

mermaid 
graph LR
  A>旗帜节点]

7. 平行四边形节点（用于输入/输出） #

mermaid 
graph LR
  A[/输入/]
  B[\输出\]

连线样式 #

1. 实线箭头 #

mermaid 
graph LR
  A --> B

2. 虚线箭头 #

mermaid 
graph LR
  A -.-> B

3. 粗线箭头 #

mermaid 
graph LR
  A ==> B

4. 带文本的连线 #

mermaid 
graph LR
  A -- 文本 --> B
  C -. 虚线文本 .-> D
  E == 粗线文本 ==> F

5. 无箭头连线 #

mermaid 
graph LR
  A --- B

子图表 #

子图表用于组织复杂的流程图：

mermaid 
graph TD
  A[开始] --> B[处理]
  B --> C{条件}
  
  subgraph 子流程
    C -->|是| D[操作1]
    C -->|否| E[操作2]
    D --> F[结果1]
    E --> G[结果2]
  end
  
  F --> H[结束]
  G --> H

高级功能 #

1. 节点样式 #

可以为节点添加样式：

mermaid 
graph TD
  A["普通节点"]
  B["带样式节点"]:::highlight
  
  classDef highlight fill:#f96,stroke:#333,stroke-width:2px;

2. 连线样式 #

可以为连线添加样式：

mermaid 
graph TD
  A --> B
  A ==> C
  A -.-> D
  
  linkStyle 0 stroke:#ff0000,stroke-width:2px;
  linkStyle 1 stroke:#00ff00,stroke-width:3px;
  linkStyle 2 stroke:#0000ff,stroke-width:4px;

3. 点击事件 #

可以为节点添加点击事件：

mermaid 
graph TD
  A[点击我] --> B[结果]
  click A "alert('你点击了节点A')"
  click B "alert('你点击了节点B')"

4. 链接跳转 #

可以为节点添加外部链接：

mermaid 
graph TD
  A[GitHub] --> B[Mermaid官网]
  click A "https://github.com" "访问GitHub"
  click B "https://mermaid.js.org" "访问Mermaid官网"

最佳实践 #

  1. 保持简洁：避免在单个图表中包含过多节点
  2. 使用子图表：将复杂流程组织为多个子图表
  3. 清晰命名：使用简洁明了的节点标签
  4. 统一风格：保持一致的节点形状和连线样式
  5. 适当注释：使用%%添加注释说明复杂逻辑

常见问题 #

问题：图表方向不对 #

解决方案：在graph关键字后指定正确的方向，如graph TD或graph LR

问题：条件判断节点不显示 #

解决方案：使用{}定义条件节点，如{条件判断}

问题：连线文本不显示 #

解决方案：确保文本位于连线上，使用-- 文本 -->格式

完整示例 #

下面是一个完整的流程图示例，展示了用户登录流程：

mermaid 
graph TD
  A[用户访问登录页] --> B[输入用户名和密码]
  B --> C[点击登录按钮]
  C --> D{验证用户信息}
  D -->|验证通过| E[跳转到首页]
  D -->|验证失败| F[显示错误信息]
  F --> B
  E --> G[显示用户信息]
  G --> H[用户操作]
  H --> I{是否退出}
  I -->|是| J[退出登录]
  I -->|否| H
  J --> A
最后更新：2026-02-08