Mermaid 流程图怎么做？语法、代码示例与制作方法

不想逐个拖拽图形和连接线，可以尝试使用 Mermaid 代码生成流程图。通过简单语法即可描述步骤、判断和循环关系，适合程序员和技术人员快速梳理流程。

立即下载万兴图示(原亿图图示）立即下载万兴图示(原亿图图示）立即下载万兴图示(原亿图图示）

App Store 下载

免费下载安卓版

在程序开发、产品设计和技术文档中，流程图经常用于展示操作步骤、判断条件和流程关系。传统流程图通常需要手动添加图形和连接线，而 Mermaid 流程图则可以通过编写简单的代码快速生成图表。

对于熟悉代码的用户来说，Mermaid 不仅能够减少手动绘图的时间，还方便保存、修改和复用流程结构。本文将介绍 Mermaid 流程图是什么、常用语法和代码示例，以及如何使用万兴图示通过 Mermaid 代码快速绘制流程图。

一、什么是 Mermaid 流程图？

1. Mermaid 是什么？

Mermaid 是一种基于文本代码生成图表的工具。用户不需要逐个拖拽图形，只需要按照 Mermaid 语法编写代码，就可以生成对应的可视化图表。

其中，Mermaid 流程图主要用于表示：

流程执行顺序
条件判断和分支
循环关系
输入与输出
不同步骤之间的连接关系

例如，一个简单的登录流程可以写成：

flowchart TD
A[打开登录页面] --> B[输入账号密码]
B --> C{验证是否通过？}
C -->|是| D[进入系统]
C -->|否| E[提示错误]
E --> B

通过几行代码，就可以描述一个包含判断和循环的完整流程。

2. Mermaid 流程图有什么优势？

相比传统的拖拽式绘图，Mermaid 流程图最大的特点是通过代码描述图表结构。

代码生成：只需要输入 Mermaid 代码，就可以快速生成流程图，适合已经熟悉代码语法的用户。

修改方便：如果需要调整流程，只需要修改对应代码，不必重新拖拽大量节点。

结构清晰：流程中的节点、连接线、判断关系都可以直接在代码中体现，方便理解和维护。

容易复用：Mermaid 代码可以复制和保存，同一套流程结构可以根据不同需求快速修改。

3. Mermaid 不只能画流程图

Mermaid 支持多种图表类型，例如：

流程图
时序图
类图
状态图
甘特图
用户旅程图
饼图

如果主要需要展示步骤、判断和执行顺序，Mermaid 流程图就是比较常用的一种类型。

二、Mermaid 流程图怎么画？先掌握基本语法

Mermaid 流程图的代码并不复杂，掌握几个基础语法，就可以开始绘制简单流程。

1. 创建一个最简单的 Mermaid 流程图

可以使用 flowchart 定义流程图，并通过方向参数设置整体布局。

例如：

flowchart TD
A[开始] --> B[输入数据]
B --> C[处理数据]
C --> D[输出结果]
D --> E[结束]

其中：

flowchart：表示创建流程图
TD：表示流程从上到下排列
A、B、C：表示节点 ID
[开始]：表示节点显示的文字
-->：表示流程连接方向

这样就可以快速建立一个简单的线性流程。

2. Mermaid 流程图怎么设置方向？

Mermaid 可以通过不同参数调整流程图方向。

常见方向包括：

参数	含义
TD	从上到下
TB	从上到下
LR	从左到右
RL	从右到左
BT	从下到上

例如：

flowchart LR
A[开始] --> B[处理] --> C[结束]

使用 LR 后，流程会按照从左到右的方向排列。

对于步骤较少的流程，可以使用上下结构；如果流程比较长，也可以尝试左右布局，让整体更加紧凑。

3. Mermaid 流程图怎么添加判断分支？

判断是流程图中非常常见的结构，Mermaid 可以使用 {} 创建判断节点。

例如：

flowchart TD
A[开始] --> B[输入成绩]
B --> C{成绩是否及格？}
C -->|是| D[输出及格]
C -->|否| E[输出不及格]

其中：

{成绩是否及格？} 表示判断节点。
|是| 和 |否| 表示不同的分支条件。

这种写法特别适合表示：

审批是否通过
数据是否正确
是否满足条件
是否存在库存
是否完成任务

4. Mermaid 流程图怎么表示循环？

Mermaid 也可以通过连接线将流程重新连接到前面的节点，从而表示循环。

例如：

flowchart TD
A[开始] --> B[输入数据]
B --> C{数据是否正确？}
C -->|是| D[继续处理]
C -->|否| E[重新输入]
E --> B
D --> F[结束]

这里“不正确”时会重新返回“输入数据”，就形成了一个循环流程。

免费下载免费下载免费下载在线使用

邀请好友 & 免费领1000 AI点数

三、Mermaid 流程图代码示例：常见场景怎么写？

掌握基础语法后，可以根据实际需求编写不同类型的 Mermaid 流程图。

1. 登录流程图

登录功能通常包含输入、验证和判断等环节，可以使用 Mermaid 表示：

flowchart TD
A[打开登录页面] --> B[输入账号和密码]
B --> C[提交登录]
C --> D{账号密码是否正确？}
D -->|是| E[登录成功]
D -->|否| F[提示账号或密码错误]
F --> B

这个流程同时包含了判断分支和循环，可以比较完整地展示用户登录过程。

2. 项目审批流程图

项目审批通常涉及提交、审核和结果处理，可以使用 Mermaid 梳理：

flowchart TD
A[提交项目申请] --> B[材料审核]
B --> C{材料是否完整？}
C -->|否| D[补充材料]
D --> B
C -->|是| E[部门审批]
E --> F{审批是否通过？}
F -->|是| G[进入项目实施]
F -->|否| H[修改项目方案]
H --> E

通过判断节点，可以清晰表现“通过”和“不通过”之后的不同流程。

3. 软件开发流程图

Mermaid 也适合展示软件开发过程：

flowchart LR
A[需求分析] --> B[产品设计]
B --> C[开发]
C --> D[测试]
D --> E{测试是否通过？}
E -->|是| F[上线]
E -->|否| C

这样的流程可以直观展示从需求分析到上线，以及测试不通过后返回开发阶段的过程。

4. 项目建设流程图

对于项目建设这类包含多个审批节点的流程，也可以使用 Mermaid 进行描述：

flowchart TD
A[项目立项] --> B{立项是否通过？}
B -->|否| C[修改项目方案]
C --> A
B -->|是| D[规划审批]
D --> E{规划是否通过？}
E -->|否| F[补充规划材料]
F --> D
E -->|是| G[办理施工许可]
G --> H{许可是否获批？}
H -->|否| I[补充申请材料]
I --> G
H -->|是| J[工程建设]
J --> K[竣工验收]
K --> L{验收是否合格？}
L -->|否| M[整改]
M --> K
L -->|是| N[项目完成]

相比简单的线性流程，这种方式可以将审批、判断、返回和循环等复杂关系一起表现出来。

四、用万兴图示绘制 Mermaid 流程图

如果已经有 Mermaid 代码，又希望对生成的流程图进行进一步的可视化编辑，可以使用支持 Mermaid 代码绘图的万兴图示。无需从空白画布开始绘制，直接导入 Mermaid 代码即可快速生成流程图。

1. 使用 Mermaid 代码快速绘制流程图

万兴图示支持 Mermaid 代码绘图，既可以导入已有的 Mermaid 代码，也可以直接在 Mermaid 绘图窗口中编辑代码。

免费下载免费下载免费下载在线使用

邀请好友 & 免费领1000 AI点数

具体操作步骤：

步驟 1 打开 Mermaid 绘图窗口

启动万兴图示 → 点击【新建】→ 下拉菜单选择【导入】→ 在导入窗口中选择【导入 Mermaid】，即可打开 Mermaid 绘图窗口。

步驟 2 输入 Mermaid 代码

将准备好的 Mermaid 代码粘贴到编辑区域，即可快速生成对应的流程图。对于已经使用 Mermaid 编写流程的用户，可以省去手动添加节点和连接线的步骤，提高流程图制作效率。

2. 生成后继续可视化编辑

完成 Mermaid 代码绘图后，点击【转化为画布图形】。

即可将生成的流程图添加到万兴图示画布中，继续进行可视化编辑。

例如：

修改流程节点：根据实际流程增加、删除或调整节点。
调整节点文字：修改节点内容，使流程说明更加准确。
修改连接关系：调整节点之间的连接线和流程方向。
调整整体布局：重新排列节点，让流程结构更加清晰。
优化流程图样式：根据使用场景调整字体、颜色、形状等视觉效果。

这样就形成了一个完整的制作流程：Mermaid 代码快速生成结构 → 插入万兴图示画布 → 可视化调整与美化。既保留了 Mermaid 代码绘图的高效性，又可以利用万兴图示对流程图进行更加灵活的编辑。

3. Mermaid + 万兴图示适合哪些人？

这种方式尤其适合：

程序员：使用 Mermaid 代码快速搭建开发流程。
产品经理：将功能逻辑快速转换为可视化流程。
项目经理：整理项目执行和审批流程。
技术人员：制作技术文档中的流程图。
学生：将编程或项目思路转化为流程图。

如果已经熟悉 Mermaid 语法，可以先用代码快速建立流程结构，再通过万兴图示进一步编辑和完善。

五、Mermaid 流程图和普通流程图怎么选？

Mermaid 和传统流程图工具各有优势，可以根据使用习惯和实际需求进行选择。

对比维度	Mermaid 流程图	流程图可视化工具
制作方式	编写代码	拖拽图形
修改方式	修改代码	直接修改图形
上手难度	需要了解语法	操作更加直观
优势	快速、可复用	灵活、可视化
适合人群	程序员、技术人员	普通办公和设计用户
复杂流程	适合快速搭建结构	适合精细调整