Markdown 流程图（Mermaid）示例

Markdown 流程图（Mermaid）示例

Markdown 中的流程图通常使用 Mermaid 语法，由平台内置渲染器解析。GitHub、Typora、Obsidian、VS Code、语雀、飞书等主流平台均支持。

基本写法：用 ```mermaid 代码块包裹。

1. 最简单的流程图

源码：

```mermaid
graph TD
    A[开始] --> B[处理]
    B --> C[结束]
```

效果：

graph TD
    A[开始] --> B[处理]
    B --> C[结束]

TD = Top-Down（从上到下）。其他方向：TB（上→下）、BT（下→上）、LR（左→右）、RL（右→左）。

2. 节点形状

graph LR
    A[矩形] --> B(圆角矩形)
    B --> C([体育场形])
    C --> D[[子程序]]
    D --> E[(数据库)]
    E --> F((圆形))
    F --> G{菱形判断}
    G --> H>旗帜形]

源码：

```mermaid
graph LR
    A[矩形] --> B(圆角矩形)
    B --> C([体育场形])
    C --> D[[子程序]]
    D --> E[(数据库)]
    E --> F((圆形))
    F --> G{菱形判断}
    G --> H>旗帜形]
```

3. 连线类型

graph LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E --文字--> F
    F -->|文字| G

源码：

```mermaid
graph LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E --文字--> F
    F -->|文字| G
```

4. 带判断分支（经典示例）

graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> B
    C --> F[结束]

源码：

```mermaid
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> B
    C --> F[结束]
```

5. 子图（subgraph）

graph TB
    subgraph 前端
        A[页面] --> B[组件]
    end
    subgraph 后端
        C[接口] --> D[数据库]
    end
    B --> C

源码：

```mermaid
graph TB
    subgraph 前端
        A[页面] --> B[组件]
    end
    subgraph 后端
        C[接口] --> D[数据库]
    end
    B --> C
```

6. 样式与颜色

graph LR
    A[普通] --> B[红色]
    B --> C[绿色]
    style B fill:#f96,stroke:#333,stroke-width:2px
    style C fill:#9f6,stroke:#333
    classDef 高亮 fill:#ff0,stroke:#f00
    class A 高亮

源码：

```mermaid
graph LR
    A[普通] --> B[红色]
    B --> C[绿色]
    style B fill:#f96,stroke:#333,stroke-width:2px
    style C fill:#9f6,stroke:#333
    classDef 高亮 fill:#ff0,stroke:#f00
    class A 高亮
```

7. 时序图（Sequence Diagram）

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 输入网址
    浏览器->>服务器: HTTP 请求
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面

源码：

```mermaid
sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 输入网址
    浏览器->>服务器: HTTP 请求
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面
```

8. 甘特图（Gantt）

gantt
    title 项目排期
    dateFormat YYYY-MM-DD
    section 设计
    需求调研 :a1, 2026-01-01, 7d
    原型设计 :a2, after a1, 5d
    section 开发
    前端开发 :b1, after a2, 10d
    后端开发 :b2, after a2, 12d

源码：

```mermaid
gantt
    title 项目排期
    dateFormat YYYY-MM-DD
    section 设计
    需求调研 :a1, 2026-01-01, 7d
    原型设计 :a2, after a1, 5d
    section 开发
    前端开发 :b1, after a2, 10d
    后端开发 :b2, after a2, 12d
```

9. 状态图（State Diagram）

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 付款成功
    待支付 --> 已取消: 超时/取消
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 确认收货
    已完成 --> [*]
    已取消 --> [*]

源码：

```mermaid
stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 付款成功
    待支付 --> 已取消: 超时/取消
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 确认收货
    已完成 --> [*]
    已取消 --> [*]
```

10. 类图（Class Diagram）

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

源码：

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

11. 饼图（Pie）

pie title 流量来源
    "搜索引擎" : 45
    "直接访问" : 30
    "社交媒体" : 20
    "其他" : 5

源码：

```mermaid
pie title 流量来源
    "搜索引擎" : 45
    "直接访问" : 30
    "社交媒体" : 20
    "其他" : 5
```

12. 综合示例：登录流程

graph TD
    A([用户访问]) --> B{已登录?}
    B -->|是| C[进入首页]
    B -->|否| D[显示登录页]
    D --> E[提交账号密码]
    E --> F{验证通过?}
    F -->|否| G[提示错误] --> D
    F -->|是| H[生成 Token]
    H --> C
    C --> I([结束])

源码：

```mermaid
graph TD
    A([用户访问]) --> B{已登录?}
    B -->|是| C[进入首页]
    B -->|否| D[显示登录页]
    D --> E[提交账号密码]
    E --> F{验证通过?}
    F -->|否| G[提示错误] --> D
    F -->|是| H[生成 Token]
    H --> C
    C --> I([结束])
```

13. 常见坑与技巧

14. 替代方案

如果平台不支持 Mermaid，可用：

• PlantUML：功能更强，语法不同，需服务端渲染

• Graphviz DOT：经典流程图语言

• draw.io / Excalidraw：可视化编辑后导出图片