我最近做项目技术方案评审时，用Mermaid画图得到了领导的表扬。它绘制的图表逻辑清晰、样式规范，既高效又直观，完美适配了方案评审的展示需求。在日常工作和学习中，我们常常需要绘制流程图、时序图、类图等图表来梳理逻辑、展示关系，传统绘图工具如Visio、ProcessOn虽功能强大，但存在操作繁琐、布局依赖手动调整、导出带水印、难以与文档无缝集成等问题。而Mermaid的出现，彻底改变了这一现状——它以“文本即图表”的核心思路，让我们用简单的代码就能快速生成规范、美观的图表，成为程序员、产品经理、设计师的必备工具。本文将从Mermaid基础入手，逐步深入语法细节与高级用法，助你快速上手这一高效绘图工具。

1. 什么是Mermaid

Mermaid是一款基于JavaScript的开源图表绘制工具，它允许用户通过纯文本语法定义图表结构，再由浏览器或编辑器实时渲染成可视化图表。其核心优势在于“文档与图表同源”，无需切换绘图工具，可直接将图表代码嵌入Markdown、Notion、GitBook等文档中，实现图表与文本内容的同步维护。同时，Mermaid支持多种图表类型，覆盖流程图、时序图、状态图、类图、甘特图等主流场景，满足不同领域的绘图需求。

2. Mermaid核心优势

相较于Visio、ProcessOn等传统工具，Mermaid的优势的体现在全流程的高效与灵活，具体可总结为以下几点：

2.1 文档即代码

Mermaid图表以文本代码形式存在，可直接嵌入Markdown文档，无需单独保存图表文件。这意味着图表能与文档一起纳入Git等版本控制系统，实现版本回溯、多人协同编辑——团队成员可通过修改代码同步更新图表，避免了传统工具中“文件传输-手动修改-重新导出”的繁琐流程，尤其适合技术团队的协作场景。

2.2 自动美化布局，告别手动调整

传统绘图工具中，我们需手动拖拽元素调整位置、对齐关系，耗时且难以保证布局一致性。Mermaid内置强大的布局算法，根据代码逻辑自动优化元素排列，无论是简单流程图还是复杂时序图，都能生成结构清晰、间距合理的图表。若对默认布局不满意，也可通过简单参数微调，大幅降低布局成本。

2.3 无水印高清导出

ProcessOn等在线工具免费版导出图表会带水印，Visio导出格式受限且体积较大。Mermaid支持无水印导出PNG、SVG、PDF等多种格式，其中SVG格式为矢量图，可无限放大不失真，适配PPT演示、论文排版、网页展示等多种场景，且导出过程无需依赖第三方工具，编辑器内置功能即可完成。

2.4 语法简洁

Mermaid语法设计贴近自然语言逻辑，核心规则简单易懂，无需掌握复杂的绘图技巧。例如流程图仅需用箭头连接节点，时序图按角色和时间顺序排列步骤，新手可在半小时内上手基础图表绘制，熟练后能快速生成复杂图表。

3. Mermaid核心语法

Mermaid支持多种图表类型，每种图表有专属语法规则。以下将结合实例，详细讲解常用图表的绘制方法，所有代码均可直接复制到支持Mermaid的编辑器中渲染。

3.1 饼图（Pie Chart）

饼图用于展示各部分占总体的比例关系，语法核心为“标签: 数值”，支持设置颜色和图例。

3.1.1 语法规则

• 用pie声明图表类型

• title可选，用于设置图表标题

• 每一行表示一个扇区，格式为“名称: 数值 [颜色]”（颜色可选，支持十六进制、RGB或颜色名）

3.1.2 实例代码

pie title 程序员每日时间分配
    "编码Bug" : 40
    "修复Bug" : 20
    "方案设计 (领导表扬项)" : 30
    "摸鱼学习" : 10

3.1.3 渲染效果

生成的饼图会自动显示各扇区名称、占比，鼠标悬浮时可查看具体数值，默认颜色搭配协调，也可手动指定颜色优化视觉效果。

3.2 流程图（Flow Chart）

流程图用于展示流程步骤、逻辑关系，是Mermaid中最常用的图表类型，支持横向（LR）、纵向（TD/BT）布局，节点类型包括矩形、圆角矩形、菱形等。

3.2.1 语法规则

• 用flowchart声明图表类型，后接布局方向（LR：左到右，TD：上到下，默认TD）

• 节点用标识符+内容表示，如A[开始]（矩形节点）、B(处理步骤)（圆角矩形）、C{判断条件}（菱形）

• 箭头用->表示，可添加文本说明，如A->|步骤1| B

3.2.2 实例代码

flowchart LR
    A[用户发起请求] --> B{请求是否合法}
    B -- 合法 --> C[验证用户身份]
    B -- 非法 --> D[返回错误提示]
    C -- 验证通过 --> E[处理业务逻辑]
    C -- 验证失败 --> D
    E --> F[返回处理结果]
    F --> G[流程结束]

3.2.3 渲染效果

3.3 时序图（Sequence Diagram）

时序图用于展示不同角色之间的交互时序，核心是“角色”和“消息传递”，常见于接口设计、交互逻辑梳理。

3.3.1语法规则

• 用sequenceDiagram声明图表类型

• 用participant定义角色（可选，不定义则自动识别）

• 消息传递用角色1->角色2: 消息内容，支持同步（->）、异步（–>）、返回（->>）等类型

• 可添加note添加注释，指定位置（left of/right of）

3.3.2 实例代码

sequenceDiagram
    participant 客户端 as C
    participant 服务器 as S
    participant 数据库 as DB

    C->>S: 发送登录请求（账号+密码）
    note right of S: 验证请求参数合法性
    S->>DB: 查询用户信息
    DB-->>S: 返回用户数据
    S->S: 校验密码一致性
    S->>C: 登录成功（返回Token）
    note left of C: 存储Token并跳转首页

3.3.3 渲染效果

3.4 状态图（State Diagram）

状态图用于展示对象在生命周期内的状态变化及触发条件，适用于状态机设计、业务流程状态梳理。

3.4.1语法规则

• 用stateDiagram声明图表类型，支持横向（LR）布局

• 初始状态用[*]表示，结束状态用*]表示

• 状态之间的转换用状态1 --> 状态2 : 触发条件

• 可嵌套子状态（用state 子状态名 {}包裹）

3.4.2 实例代码

stateDiagram LR
    [*] --> 待支付
    待支付 --> 待发货 : 用户支付成功
    待支付 --> 已取消 : 用户取消订单
    待发货 --> 待收货 : 商家发货
    待收货 --> 已完成 : 用户确认收货
    待收货 --> 售后中 : 用户申请售后
    售后中 --> 已完成 : 售后处理完毕
    已取消 --> [*]
    已完成 --> [*]

3.4.3 渲染效果

3.5 甘特图（Gantt Chart）

甘特图用于展示项目进度、任务时间安排，支持设置任务起止时间、进度、依赖关系，适用于项目管理场景。

3.5.1 语法规则

• 用gantt声明图表类型

• dateFormat指定日期格式（如YYYY-MM-DD）

• title设置图表标题

• 任务分为section（章节），每个任务格式为“任务名 : 任务标识, 开始时间, 结束时间/持续时间, 依赖任务”

3.5.2 实例代码

gantt
    dateFormat  YYYY-MM-DD
    title 2024年Q3项目开发计划
    axisFormat  %m-%d

    section 需求阶段
    需求调研     :a1, 2024-07-01, 7d
    需求评审     :a2, after a1, 3d
    需求文档定稿 :a3, after a2, 2d

    section 开发阶段
    架构设计     :b1, after a3, 5d
    后端开发     :b2, after b1, 15d
    前端开发     :b3, after b1, 12d

    section 测试阶段
    单元测试     :c1, after b2, 5d
    集成测试     :c2, after c1, 7d
    验收测试     :c3, after c2, 3d

3.5.3 渲染效果

3.6 类图（Class Diagram）

类图用于展示类、接口之间的继承、关联、实现等关系，是面向对象设计的核心图表，支持显示类的属性和方法。

3.6.1 语法规则

• 用classDiagram声明图表类型

• 类的定义：class 类名 { 属性; 方法(); }，支持标注访问修饰符（+：公共，-：私有，#：保护）

• 关系表示：类A <|-- 类B（继承）、类A -- 类B（关联）、类A <|.. 接口B（实现）

3.6.2 实例代码

classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +void 进食()
        +void 移动()
    }

    class 哺乳动物 {
        +void 哺乳()
    }

    class 鸟类 {
        +void 飞行()
    }

    class 狗 {
        -String 品种
        +void 吠叫()
    }

    动物 <|-- 哺乳动物
    动物 <|-- 鸟类
    哺乳动物 <|-- 狗
    鸟类 --|> 动物 : 继承

3.6.3 渲染效果

4. Mermaid 高级进阶

如果说基础语法赋予了图表骨架，那么高级用法则是为其注入灵魂。通过子图嵌套、样式复用与全局主题配置，你可以轻松驾驭复杂的业务架构图。

4.1 逻辑分层：子图（Subgraph）

当图表变得复杂时，我们需要将相关的节点“打包”在一起。子图不仅能从视觉上区分功能模块，还支持独立的布局方向。

语法解析：

• subgraph ID [显示名称]：开启一个子图区块。
• direction LR/TB：在子图内部定义排列方向（不影响外部）。
• end：闭合子图区间。
• ==>：加粗的连接线，常用于强调主流程。

代码示例：

flowchart TB
    subgraph Client [客户端层]
        direction LR
        A[移动端App] --- B[网页端]
    end

    subgraph Server [业务处理层]
        direction TB
        C[网关中心] --> D[核心逻辑服务]
        
        subgraph Data [数据持久化]
            E[(主数据库)] --- F[(缓存中心)]
        end
        
        D --> Data
    end

    Client ==> C
    
    %% 样式美化
    style Client fill:#f9f9f9,stroke:#333,stroke-dasharray: 5 5
    style Server fill:#e1f5fe,stroke:#01579b

渲染效果：

4.2 局部样式设置：节点的“微整形”

你可以通过 style 命令针对特定节点进行外观定制。这在需要突出某个核心步骤或区分状态（如：成功 vs 失败）时非常有用。

语法解析：

• fill：填充颜色。
• stroke：边框颜色。
• stroke-width：边框粗细。
• color：文字颜色。
• stroke-dasharray：虚线效果（如 5 5 代表线段和间距均为5像素）。

代码示例：

flowchart LR
    Start([开始]) --> Process[核心加工]
    Process --> End([结束])

    style Start fill:#f5f5f5,stroke:#666,stroke-width:2px
    style Process fill:#fff4dd,stroke:#d4a017,stroke-width:4px
    style End fill:#333,color:#fff

渲染效果：

4.3 样式定义与类复用

当节点成百上千时，逐一写 style 是灾难性的。利用 classDef（类定义），你可以像 CSS 一样先定义好一套样式标准，然后批量应用。

语法解析：

• classDef className 属性:值,属性:值：定义一个样式类。
• class Node1,Node2 className：将定义好的类应用到指定的多个节点上。
• classDef default ...：如果你定义一个名为 default 的类，它将自动应用到所有未指定类的节点。

代码示例：

flowchart TD
    Node1[用户下单] --> Node2[库存检查]
    Node2 --> Node3{库存充足?}
    Node3 -- 是 --> Node4[支付确认]
    Node3 -- 否 --> Node5[订单取消]

    %% 1. 定义样式类
    classDef action fill:#e1f5fe,stroke:#01579b,color:#01579b,font-weight:bold
    classDef critical fill:#fff3e0,stroke:#e65100,color:#e65100
    classDef result fill:#f1f8e9,stroke:#33691e

    %% 2. 应用样式类
    class Node1,Node2 action
    class Node3 critical
    class Node4,Node5 result

渲染效果：

4.4 全局配置与主题定制

想要让整张图符合公司的品牌色调？你可以使用 Mermaid 的配置头部（YAML 风格）来一键更改全局变量。

语法解析：

• %%{init: { ... }}%%：初始化配置指令。
• theme：内置主题（default, forest, dark, neutral, base）。
• themeVariables：自定义变量。例如 primaryColor 会影响节点主色，lineColor 影响连线。

代码示例：

%%{init: { 
  'theme': 'base', 
  'themeVariables': { 
    'primaryColor': '#6200ee', 
    'primaryTextColor': '#fff', 
    'lineColor': '#bb86fc', 
    'edgeLabelBackground':'#fff',
    'fontSize': '16px'
  } 
}}%%
flowchart LR
    A[一键换装] --> B[全局统一]
    B --> C[专业审美]
    C --> D[领导点赞]

渲染效果：

从基础的 A --> B 到精美的架构图，Mermaid 的核心魅力在于：它让你专注于逻辑思考，而非像素对齐。 这种“文档即代码”的模式，不仅能显著提升文档的产出效率，更能让你的技术沉淀看起来更加专业。