【Mermaid】从零开始：手把手教你用代码绘制专业流程图-代码聚汇网

【Mermaid】从零开始：手把手教你用代码绘制专业流程图

只为媛动心

1. 为什么选择Mermaid画流程图？

第一次接触Mermaid是在写技术文档时，需要插入流程图但不想打开笨重的绘图软件。当时用Word画流程图，调整一个箭头位置就要重排整个版面，效率低到让人崩溃。直到发现用代码就能生成专业流程图的神器——Mermaid，我的工作效率直接翻倍。

Mermaid本质上是一种基于文本的图表生成工具，只需要编写简单的代码就能自动生成流程图、时序图、甘特图等。相比传统绘图方式有三大优势：

版本控制友好：代码可以像普通文本一样用Git管理，再也不用担心"流程图_V3_最终版_final.docx"这种文件混乱
修改成本极低：调整图形位置只需改几行代码，不用重新拖动几十个图形框
跨平台兼容：任何支持Markdown的编辑器都能渲染，VS Code、Typora、GitHub等平台原生支持

我特别喜欢用它来画技术方案流程图，比如去年设计一个智能家居控制逻辑时，前后修改了20多个版本，全靠Mermaid的代码化特性才能高效迭代。下面这张是最终版的控制流程：

mermaid复制graph TD
    A[用户语音指令] --> B{指令类型?}
    B -->|灯光控制| C[调取房间灯光状态]
    B -->|电器控制| D[验证设备在线状态]
    C --> E[执行亮度调节]
    D --> F[发送红外控制信号]

2. 5分钟快速上手基础语法

刚开始学Mermaid时，我也被那些箭头符号搞晕过。其实核心语法就5个要素，记住就能画大多数流程图：

2.1 图形声明

流程图以graph关键字开头，方向标识符决定布局：

TD/TopDown：从上到下（最常用）
LR/LeftRight：从左到右
BT/BottomTop：从下到上
RL/RightLeft：从右到左

mermaid复制graph LR
    A[从左到右布局] --> B[节点B]

2.2 节点类型

方形节点：[文本]
圆角矩形：(文本)
圆形：((文本))
菱形：{文本}（用于判断分支）

mermaid复制graph TD
    A[方形] --> B(圆角)
    B --> C((圆形))
    C --> D{菱形?}

2.3 连接线样式

实线箭头：-->
虚线箭头：-.->
无箭头线：---
带文字箭头：-- 文字 -->

mermaid复制graph TD
    A -- 实线 --> B
    A -. 虚线 .-> C
    A -- 无箭头 --- D

2.4 分支与合并

用菱形节点配合条件箭头实现分支逻辑。这是我踩过坑的地方——箭头文本要写在竖线之间：

mermaid复制graph TD
    A{条件判断} -->|是| B[执行操作]
    A -->|否| C[其他操作]
    B --> D[结束]
    C --> D

2.5 子图（Subgraph）

用subgraph包裹一组相关节点，特别适合处理复杂流程中的模块划分：

mermaid复制graph TD
    subgraph 初始化模块
        A[加载配置] --> B[建立连接]
    end
    subgraph 处理模块
        C[接收数据] --> D[解析内容]
    end
    B --> C

3. 实战：绘制一个完整项目流程图

去年给团队做技术培训时，我用Mermaid画过一个微服务调用流程图，现在把关键步骤拆解给你看：

3.1 定义整体结构

先确定流程方向和主要模块。建议先用注释规划框架：

mermaid复制graph TD
    %% 用户端流程
    %% 服务间调用
    %% 数据库操作

3.2 绘制用户登录流程

添加具体节点和连线，注意用不同形状区分操作类型：

mermaid复制graph TD
    A[用户打开APP] --> B{已登录?}
    B -->|否| C[显示登录界面]
    C --> D[输入账号密码]
    D --> E[调用Auth服务]
    E --> F{验证通过?}
    F -->|是| G[进入主页]
    F -->|否| H[提示错误信息]
    H --> C

3.3 添加服务间交互

用子图表示微服务，虚线箭头表示网络请求：

mermaid复制graph TD
    subgraph 客户端
        A[用户请求] --> B[API Gateway]
    end
    subgraph 微服务集群
        B -.-> C[Auth服务]
        B -.-> D[Order服务]
        C --> E[(用户数据库)]
    end

3.4 加入异常处理

完善的流程图应该包含错误路径，这是我经常忽略的部分：

mermaid复制graph TD
    A[发起支付] --> B[调用支付网关]
    B --> C{响应成功?}
    C -->|是| D[更新订单状态]
    C -->|否| E[记录失败日志]
    E --> F{重试次数<3?}
    F -->|是| B
    F -->|否| G[通知人工处理]

4. 高级技巧与避坑指南

用了两年Mermaid后，我整理出这些实用技巧能让你少走弯路：

4.1 样式自定义

通过CSS类名修改节点样式，先在style中定义类，再用class指定节点：

mermaid复制graph TD
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#f66
    A[重要节点] --> B[警告节点]
    class A importantNode
    class B warningNode

4.2 使用注释

用%%添加注释，不会被渲染。复杂流程图一定要写注释，三个月后回头看会感谢自己：

mermaid复制graph LR
    %% 数据预处理流程
    A[原始数据] --> B[数据清洗]
    %% 特征工程部分
    B --> C[特征提取]

4.3 常见报错解决

方向标识符错误：检查是否漏写TD/LR等方向声明
节点格式不闭合：确保所有方括号/圆括号成对出现
特殊字符转义：文本中含[]等符号时用双引号包裹"文本[带括号]"

4.4 效率工具推荐

VS Code插件：Mermaid Preview实时渲染
在线编辑器：mermaid.live 快速验证语法
导出工具：mermaid-cli 批量生成图片文件

bash复制# 用npm安装命令行工具
npm install -g @mermaid-js/mermaid-cli
# 将mmd文件转为png
mmdc -i input.mmd -o output.png

刚开始可能会觉得代码画图不如拖拽方便，但坚持用一周后，你会发现修改流程图就像改代码一样自然。最近我在设计一个新系统架构图，前后修改了15版，全靠Mermaid的代码化特性才能高效迭代。记住所有复杂流程图都是从graph TD这两个单词开始的，现在就去新建一个.md文件试试吧！