Markdown 语法进阶：用 Mermaid 画流程图 / 时序图

关注

原创最新推荐文章于 2026-08-29 10:36:08 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

markdown画流程图 使用工具： Typora 轻量级markdown工具使用方法：添加代码，选择flow语言基本语法： MarkDown中的流程图语法叫flow，该语法只有两个注意事项：定义元素和连接定义好的元素模块定义：模块名称=>类型: 显示的内容[:>超链接URL] 注意：=>后不能有空格， :后需要有空格连接语法：模块名称1->模块连接2 模块名称1(箭头方向)->模块连接2 模块之间使用->符号连接箭头方向包括：left、right、top、bottom、yes 阅读详情

写博客、记笔记、写技术文档时，我们总离不开“图文结合”——纯文字描述逻辑、流程，不仅显得繁琐，读者也难以快速get核心。很多人会先用水晶报表、Visio画好图，导出再插入Markdown，步骤繁琐还容易出现格式错乱。

其实，掌握 Mermaid 语法，就能在Markdown里直接画流程图、时序图、类图甚至思维导图，无需额外工具，代码简洁、渲染快速，还能和文字无缝衔接。今天就带来Mermaid进阶教程，重点拆解最常用的「流程图」和「时序图」，从基础语法到实用技巧，附可直接复制的案例，新手也能快速上手，让你的Markdown文档质感翻倍！

注：目前主流编辑器（Typora、VS Code+Markdown插件、掘金、优快云、Notion等）均支持Mermaid渲染，若渲染失败，可检查编辑器版本或切换兼容模式，本文案例均经过实测，复制即可直接使用。

一、先搞懂：Mermaid 是什么？为什么推荐用它？

Mermaid 是一种「文本绘图语言」，核心逻辑是：用简单的代码语法，描述图形的结构和关系，编辑器会自动渲染成可视化图形。和传统绘图工具相比，它有3个不可替代的优势，尤其适合技术人：

无需切换工具：全程在Markdown编辑器内完成，不用导出、插入图片，减少操作成本，提升文档撰写效率；
格式统一不错乱：图形由代码控制，无论在哪个支持Mermaid的平台，渲染效果都一致，避免图片缩放、导出格式兼容问题；
易修改、易维护：后期想调整流程、补充步骤，只需修改对应代码，无需重新画图，尤其适合频繁迭代的技术文档、需求文档。

Mermaid支持多种图形，其中「流程图」和「时序图」是日常使用频率最高的两种——流程图用于梳理逻辑、步骤（如业务流程、代码执行流程），时序图用于展示多对象间的交互时序（如接口调用、前后端交互），下面重点拆解这两种图形的进阶用法。

二、Mermaid 流程图：从基础到进阶，梳理逻辑更清晰

流程图核心是「节点」和「连线」——节点代表步骤、状态，连线代表节点间的逻辑关系（顺序、分支、循环）。我们从“基础语法→进阶样式→实用案例”逐步拆解，拒绝复杂冗余，只讲常用技巧。

2.1 基础语法：节点、连线、方向（必掌握）

首先，所有Mermaid代码都需要包裹在 ```mermaid 和 ``` 之间，流程图需先指定「绘图方向」，再定义节点和连线。

1. 绘图方向（避免图形错乱）：默认从上到下（TD），可根据需求修改，常用方向如下：

TD：Top Down（从上到下，最常用，适合线性流程）；
LR：Left Right（从左到右，适合步骤较多的流程，节省纵向空间）；
TB/BT/RL：对应从上到下/从下到上/从右到左（较少用）。

2. 节点类型（3种常用，足够覆盖日常需求）：

节点类型	语法格式	效果说明
矩形节点（普通步骤）	A[步骤内容]	最常用，代表流程中的普通操作、步骤（如“用户提交请求”）
圆角矩形（开始/结束）	A(开始/结束内容)	用于流程的起点和终点，区分普通步骤
菱形节点（判断条件）	A{判断内容}	用于分支逻辑（如“判断请求是否合法”），后续需搭配分支连线

3. 连线类型（4种常用，清晰区分逻辑关系）：

普通连线（顺序关系）：-> ，如 A->B（A步骤之后执行B步骤）；
带文字连线（说明关系）：-|文字|-> ，如 A->|提交请求|B（明确连线的含义）；
分支连线（判断后分支）：->|是| / ->|否| ，搭配菱形节点使用；
虚线连线（关联关系）：-.-> ，如 A-.->B（非核心流程关联，可用于备注、补充）。

2.2 进阶技巧：样式优化+复杂逻辑（提升可读性）

基础语法能满足简单流程，但要让图形更美观、逻辑更清晰，还需要掌握这2个进阶技巧：

技巧1：自定义节点样式（颜色、边框）：通过 style 语法，给节点设置填充色、边框色、字体颜色，区分不同类型的步骤（如开始/结束用绿色，错误提示用红色）。

语法格式：style 节点标识 fill:#颜色值,stroke:#边框颜色,stroke-width:边框宽度,color:字体颜色

技巧2：循环逻辑（流程复用）：当流程中有重复步骤（如“重试请求”），可通过连线回溯实现循环，无需重复定义节点，让代码更简洁。

2.3 实用案例（可直接复制）

下面以「用户登录流程」为例，整合基础语法和进阶技巧，实现一个清晰、美观的流程图，复制到Markdown即可渲染：

```mermaid flowchart TD A(开始：用户访问登录页):::start -> B[输入用户名+密码] B -> C{验证账号密码} C ->|正确| D[生成登录凭证token]:::success C ->|错误| E[提示“账号或密码错误”]:::error E -> F{是否重试登录} F ->|是| B F ->|否| G(结束：返回登录页):::endNode D -> H[跳转至首页]:::success H -> G %% 自定义样式（复用样式，代码更简洁） classDef start fill:#e6f7ef,stroke:#52c41a,stroke-width:2px,color:#333 classDef success fill:#e6f4ff,stroke:#1890ff,stroke-width:2px,color:#333 classDef error fill:#fff2e8,stroke:#fa8c16,stroke-width:2px,color:#333 classDef endNode fill:#f6ffed,stroke:#7cb305,stroke-width:2px,color:#333 ```

渲染效果说明：

区分了开始/结束、成功步骤、错误步骤，颜色清晰，一眼就能识别不同类型的流程节点；
包含分支（密码正确/错误）和循环（重试登录）逻辑，覆盖日常业务流程的核心场景；
样式通过classDef统一定义，后续新增节点可直接复用，修改样式只需修改一处。

三、Mermaid 时序图：展示交互时序，接口/业务交互一目了然

时序图核心是「对象」和「时序」——横向是交互的对象（如前端、后端、数据库），纵向是时间线，用于展示多对象间的交互顺序（如前后端接口调用、微服务间通信），比文字描述更直观，尤其适合技术文档。

3.1 基础语法：对象、消息、时序（必掌握）

时序图同样需要包裹在 ```mermaid 和 ``` 之间，先定义「交互对象」，再按时间顺序定义「消息交互」。

1. 定义交互对象：横向排列，用 participant 定义，可指定别名（简化代码），语法格式：

participant 别名 as 对象名称（如 participant F as 前端）

注意：对象顺序即为横向展示顺序，建议按交互逻辑排列（如前端→后端→数据库）。

2. 消息交互（核心，按时间顺序编写）：纵向从上到下是时间流逝，消息分为3种常用类型，覆盖大部分交互场景：

普通消息（同步调用）：对象1->对象2: 消息内容 ，如 F->B: 提交登录请求（用户名+密码）；
响应消息（同步返回）：对象2-->对象1: 响应内容 ，用虚线表示，如 B-->F: 返回登录结果（成功/失败）；
异步消息（无需等待返回）：对象1->>对象2: 消息内容，如 B->>D: 异步记录登录日志（后端无需等待日志记录完成，继续执行后续操作）。

3. 基础补充：时序标注（可选，提升清晰度）：

备注：用 note 语法，给某个对象或消息添加备注，如note right of B: 后端验证密码合法性（备注在后端对象右侧）；
分组：用 activate / deactivate ，标注某个对象的“活跃状态”，如 activate B（后端开始处理请求），deactivate B（后端处理完成）。

3.2 进阶技巧：复杂交互+样式优化（适配真实场景）

日常工作中，时序图常涉及“嵌套交互”“条件判断”“异常处理”，掌握这2个进阶技巧，能覆盖90%的真实场景：

技巧1：条件判断（分支交互）：用alt（二选一分支）、opt（可选交互）语法，处理不同场景下的交互（如登录成功/失败的不同响应）。

语法格式：alt 条件1 + 对应消息，else 条件2 + 对应消息，end 结束分支。

技巧2：嵌套交互（子流程）：用 loop（循环交互）、par（并行交互）语法，处理循环调用、并行执行的场景（如后端循环查询数据库、多微服务并行处理请求）。

3.3 实用案例（可直接复制）

以「前后端登录接口交互」为例，整合条件判断、活跃状态、备注，实现一个贴合真实开发场景的时序图，复制即可渲染：

```mermaid sequenceDiagram %% 定义交互对象（按交互顺序排列） participant F as 前端 participant B as 后端（登录接口） participant D as 数据库（用户表） %% 交互流程（按时间顺序，从上到下） F->>F: 验证输入（用户名/密码非空） note right of F: 前端本地简单校验，减少无效请求 F->B: 提交登录请求（POST /api/login） activate B %% 标注后端开始活跃（处理请求） B->>B: 解析请求参数，校验格式 B->D: 查询用户信息（根据用户名） activate D D-->B: 返回用户信息（包含加密密码） deactivate D %% 条件判断（密码正确/错误） alt 密码匹配（后端解密后对比） B->>B: 生成token（有效期2小时） B->D: 更新登录时间、登录IP B-->F: 响应登录成功（token+用户名） note left of B: 同时异步记录登录日志 B->>D: 异步写入登录日志（用户ID、登录时间） else 密码不匹配 B-->F: 响应登录失败（提示“密码错误”） end deactivate B %% 后端处理完成，结束活跃状态 F->>F: 存储token（localStorage），跳转首页 ```

渲染效果说明：