在技术文档、系统设计和开发过程中，我们经常需要绘制各种图表来表达思路、流程或架构。传统的绘图工具往往需要手动拖拽元素，不仅耗时，而且难以版本化管理。Mermaid应运而生，它是一种基于文本描述的图表生成工具，让我们可以通过简单的语法快速创建专业的流程图、时序图、甘特图等。本文将全面介绍Mermaid的使用方法，帮助您掌握这一强大的图表绘制工具。
Mermaid简介
Mermaid是一个开源的JavaScript库，可以将文本和代码转换为清晰的图表和可视化内容。它的核心思想是通过简单的标记语言来定义图表结构，然后渲染成美观的图形。
Mermaid支持多种类型的图表：
流程图（Flowchart）
时序图/序列图（Sequence Diagram）
类图（Class Diagram）
状态图（State Diagram）
甘特图（Gantt Chart）
饼图（Pie Chart）
用户旅程图（User Journey Diagram）
等
Mermaid使用
在线编辑器
最简单的方式是使用官方在线编辑器：Online FlowChart & Diagrams Editor - Mermaid Live Editor
在Markdown中使用
大多数现代Markdown编辑器都原生支持Mermaid（如GitHub、GitLab、Notion、Typora等）。
在网页中集成
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>基础语法详解
1. 流程图（Flowchart）
流程图是最常用的图表类型之一，用于展示步骤之间的逻辑关系。
基本语法结构
graph TD
A[开始] --> B(处理数据)
B --> C{判断条件}
C -->|是| D[执行操作]
C -->|否| E[结束]
D --> F[保存结果]
F --> E
节点形状说明
(圆角矩形) - 圆角矩形节点
[矩形] - 普通矩形节点
{菱形} - 判断/决策节点
((圆形)) - 圆形节点
> 右向旗帜
[/平行四边形\] - 数据输入输出
连接线类型
--> 实线箭头
-.- 虚线箭头
-.-> 虚线带箭头
===> 加粗箭头
更复杂的流程图示例
graph LR
Start([用户登录]) --> Auth{验证身份}
Auth -->|成功| Dashboard[仪表盘]
Auth -->|失败| Login[重新登录]
Dashboard --> Profile[(个人资料)]
Dashboard --> Settings((设置))
Profile --> Edit[编辑信息]
Settings --> Config[配置选项]
Edit --> Save[保存更改]
Config --> Save
Save --> End([流程结束])
2. 时序图（Sequence Diagram）
时序图用于展示对象之间的交互顺序，特别适用于API调用、微服务通信等场景。
基本语法
sequenceDiagram
participant User
participant Browser
participant Server
participant Database
User->>Browser: 输入网址
Browser->>Server: 发送HTTP请求
Server->>Database: 查询数据
Database-->>Server: 返回查询结果
Server-->>Browser: 返回页面内容
Browser-->>User: 显示页面
时序图高级功能
sequenceDiagram
participant Client as 客户端
participant API as API网关
participant Service as 业务服务
participant DB as 数据库
Note over Client, DB: 用户注册流程
Client->>API: POST /register
API->>Service: 处理注册请求
Service->>DB: 检查用户名是否已存在
DB-->>Service: 返回检查结果
alt 用户名可用
Service->>DB: 保存用户信息
DB-->>Service: 返回保存结果
Service-->>API: 注册成功
API-->>Client: 200 OK
else 用户名已存在
Service-->>API: 用户名已存在
API-->>Client: 409 Conflict
end
时序图中的控制结构
alt/else/end 条件分支
loop/end 循环结构
opt/end 可选操作
par/end 并行操作
3. 类图（Class Diagram）
类图用于展示面向对象系统的结构。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +String name
Animal : +Int age
Animal : +move()
class Animal {
+String name
+Int age
+move()
}
class Duck {
+String color
+swim()
+quack()
}
class Fish {
-int sizeInFeet
-canEat()
}
4. 状态图（State Diagram）
状态图展示对象在其生命周期内的状态变化。
stateDiagram-v2
[*] --> Still
Still --> Moving: 开始移动
Moving --> Still: 停止移动
Moving --> Crash: 发生碰撞
Crash --> [*]: 结束
5. 甘特图（Gantt Chart）
甘特图用于项目管理和任务规划。
gantt
title 项目时间规划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2023-01-01, 2023-01-07
UI设计 :active, des2, 2023-01-08, 3d
section 开发阶段
后端开发 :dev1, 2023-01-10, 10d
前端开发 :dev2, after dev1, 8d
section 测试阶段
单元测试 :test1, 2023-01-25, 3d
集成测试 :test2, after test1, 5d
6. 饼图（Pie Chart）
饼图用于展示比例关系。
pie title 技术栈占比
"Vue.js" : 40
"React" : 30
"Angular" : 20
"其他" : 10
样式定制
虽然Mermaid本身不直接支持CSS样式，但可以通过配置项进行一些基本定制：
graph TD
A[默认样式] --> B(圆角矩形)
B --> C{菱形判断}
%% 通过CSS类可以进一步定制样式
classDef red fill:#f96,stroke:#333,stroke-width:2px;
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class A,B,C red
本地安装
我们可以使用docker本地安装Mermaid Live Editor。
首先通过如下命令下载Mermaid Live Editor的Docker镜像；
docker pull ghcr.io/mermaid-js/mermaid-live-editor再通过如下命令运行对应的容器；
docker run -p 8080:8080 --name mermaid-live-editor -d ghcr.io/mermaid-js/mermaid-live-editor通过 http://127.0.0.1:8080 就可以访问Mermaid Live Editor的页面了。
总结
Mermaid是一个功能强大且易于使用的图表生成工具，它让技术文档编写变得更加高效。在日常工作中，不妨尝试用Mermaid来替代传统绘图工具，相信它会给您的文档编写带来全新的体验。无论是系统设计文档、API接口说明，还是业务流程梳理，Mermaid都能帮您快速生成专业级别的图表。