使用 Mermaid 绘制流程图与序列图

May 10, 2026 · 4 mins read

Mermaid：在 Markdown 中绘制图表的利器

Mermaid 是一种基于 JavaScript 的图表绘制工具，它允许开发者使用简单的 Markdown 风格的语法来创建流程图、序列图、甘特图、类图等多种类型的图表。这意味着你可以在 Markdown 文件中直接嵌入可渲染的图表，极大地提升了技术文档、笔记和博客的可读性与表现力。

基础语法：流程图 (Flowchart)

流程图是 Mermaid 最常用的图表类型之一。你可以定义节点（形状）和它们之间的连接（箭头）。

示例：一个简单的登录流程

graph TD
    A[开始] --> B{输入用户名和密码};
    B --> C{验证身份};
    C -- 成功 --> D[登录成功];
    C -- 失败 --> E[登录失败];
    E --> B;
    D --> F[结束];

graph TD：表示这是一个流程图，方向是从上到下 (Top Down)。你也可以使用 LR (Left Right)。
A[开始]：定义一个 ID 为 A 的节点，形状为矩形（方括号 []）。
B{输入用户名和密码}：定义一个 ID 为 B 的节点，形状为菱形（花括号 {}）。
C -- 成功 --> D：表示从节点 C 到节点 D 有一个带有 “成功” 文本的箭头。

序列图 (Sequence Diagram)

序列图用于展示对象之间交互的时间顺序。

示例：一个简单的用户请求流程

sequenceDiagram
    participant User
    participant Server
    User->>Server: 发送请求
    Server-->>User: 返回响应
    User->>Server: 发送另一个请求
    Server-->>User: 返回结果

participant User：定义一个参与者（生命线），名为 User。
User->>Server: 发送请求：表示 User 向 Server 发送一个实线箭头（同步消息）并附带文本 “发送请求”。
Server-->>User: 返回响应：表示 Server 向 User 返回一个虚线箭头（异步消息）并附带文本 “返回响应”。

为什么选择 Mermaid？

简单易学：语法直观，学习成本低。
集成性好：许多 Markdown 编辑器和静态网站生成器（如 Hugo）都支持 Mermaid 渲染。
版本控制友好：图表以文本形式存在，易于纳入版本控制系统。
灵活性高：支持多种图表类型，满足不同场景的需求。

在开云集团的文档和技术分享中，Mermaid 已经成为我们用来清晰展示系统架构、业务流程和技术交互的首选工具。它帮助我们更有效地沟通复杂概念。