从 0 到熟练：Mermaid 流程图的进阶之路

前言

我是一个 Java 后端程序员，平时要开发各种业务接口。比如一个订单系统的处理流程：校验用户、检查库存、分配仓库、调用支付接口、发货、发送通知……流程一多，思维就乱成一团蜘蛛网。

直到有一天，在逛论坛的时候有人推荐了 Mermaid：一种用纯文本代码绘制流程图的工具。只需在 Markdown 中写几行语法，即可生成漂亮、可维护的图。

第一次试的时候，我用 10 行代码画出了完整的登录流程，并直接嵌到接口文档里，改起来比改代码还快。

Mermaid 是什么

https://mermaid.nodejs.cn/intro/getting-started.html是一个基于 JavaScript 的开源库，通过简单的标记语法（类似 Markdown）生成各种结构化图表。

常见类型包括：

1.流程图 2.顺序图 3.类图 4.状态图 5.甘特图 6.实体关系图 7.用户旅程图

使用方法

如果你在支持 Mermaid 的平台（如 GitHub、GitLab、Typora、Obsidian、Hugo 博客等）中写这些代码，它会自动渲染成图
Halo的话需要在应用商店安装https://www.halo.run/store/apps/app-ahBRi 这个插件！

flowchart LR
    Request[请求到达] --> AuthCheck[校验签名]
    AuthCheck -->|合法| LoadUser[读取用户信息]
    AuthCheck -->|非法| Error[返回 401]
    LoadUser --> CheckPwd[校验密码]
    CheckPwd -->|正确| Success[生成 Token]
    CheckPwd -->|错误| Error

flowchart LR Request[请求到达] --> AuthCheck[校验签名] AuthCheck -->|合法| LoadUser[读取用户信息] AuthCheck -->|非法| Error[返回 401] LoadUser --> CheckPwd[校验密码] CheckPwd -->|正确| Success[生成 Token] CheckPwd -->|错误| Error

基础用法

流程图方向

Mermaid 支持几种布局方向：

TB（TopBottom）：从上到下
BT（BottomTop）：从下到上
LR（LeftRight）：从左到右
RL（RightLeft）：从右到左

如:

flowchart TB
    A --> B
    B --> C

flowchart TB A --> B B --> C

节点类型

方框：A[文本]
圆角框：A(文本)
圆形：A((文本))
菱形（条件判断）：A{文本}
子程序：A[[文本]]

连线样式

flowchart LR
    A --> B   %% 直线箭头
    B --- C   %% 无箭头的连线
    C -->|条件| D  %% 带条件标签

flowchart LR A --> B B --- C C -->|条件| D

-->：有箭头
---：无箭头
-.->：虚线箭头
==>：加粗箭头

分组

可以用 subgraph 把节点分组：

flowchart TB
    subgraph 用户层
        A[浏览器] --> B[控制器]
    end
    subgraph 服务层
        B --> C[服务类]
    end

flowchart LR subgraph 用户层 A[浏览器] --> B[控制器] end subgraph 服务层 B --> C[服务类] end

高级用法

顺序图

用于表示调用顺序：

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务端
    U->>B: 输入账号密码
    B->>S: 发送登录请求
    S->>S: 校验
    S-->>B: Token
    B-->>U: 登录成功

sequenceDiagram participant U as 用户 participant B as 浏览器 participant S as 服务端 U->>B: 输入账号密码 B->>S: 发送登录请求 S->>S: 校验 S-->>B: Token B-->>U: 登录成功

类图

适合 Java 后端表示类之间的关系：

classDiagram
    class Controller {
        +String handleRequest()
    }
    class Service {
        +boolean process()
    }
    class Repository {
        +Entity findById(int id)
    }
    Controller --> Service
    Service --> Repository

classDiagram class Controller { +String handleRequest() } class Service { +boolean process() } class Repository { +Entity findById(int id) } Controller --> Service Service --> Repository

状态图

适合表示状态机，例如订单状态：

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 用户付款
    已支付 --> 已发货: 仓库发货
    已发货 --> 已完成: 用户签收

stateDiagram-v2 [*] --> 待支付待支付 --> 已支付: 用户付款已支付 --> 已发货: 仓库发货已发货 --> 已完成: 用户签收

甘特图

适合项目进度管理：

gantt
    title 开发任务
    dateFormat  YYYY-MM-DD
    section 登录模块
    开发: a1, 2024-07-01, 3d
    测试: after a1, 2d
    section 订单模块
    开发: a2, 2024-07-04, 4d
    测试: after a2, 3d

gantt title 开发任务 dateFormat YYYY-MM-DD section 登录模块开发: a1, 2024-07-01, 3d 测试: after a1, 2d section 订单模块开发: a2, 2024-07-04, 4d 测试: after a2, 3d

完整案例

flowchart LR
    subgraph Controller 层
        R[接收 HTTP 请求] --> V[参数校验]
    end
    subgraph Service 层
        V --> B[业务处理]
        B --> CallMQ[发送 MQ 消息]
        B --> Repo[数据持久化]
    end
    subgraph 外部系统
        CallMQ --> Inv[库存服务]
        Repo --> MySQL[(MySQL 数据库)]
    end

flowchart LR subgraph Controller 层 R[接收 HTTP 请求] --> V[参数校验] end subgraph Service 层 V --> B[业务处理] B --> CallMQ[发送 MQ 消息] B --> Repo[数据持久化] end subgraph 外部系统 CallMQ --> Inv[库存服务] Repo --> MySQL[(MySQL 数据库)] end

只要你能写 Markdown，就能用 Mermaid，让工作更高效、文档更漂亮。

现在不用刻意记这些，我们只需要知道大概语法，提供思路给 AI，它也可以帮我们一键生成，这也是我认为比思维导图好的一点！