Mermaid 图表教程

什么是 Mermaid

Mermaid 是一个基于文本的图表工具，可以通过简单的文本描述来生成各种图表。它使用类似 Markdown 的语法，可以嵌入在 Markdown 文件中，由 Mermaid 渲染引擎解析并生成 SVG/PNG 图表。

支持的图表类型

流程图

flowchart TD
    A[开始] --> B{判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E

• 方向：TD (上到下), BT (下到上), LR (左到右), RL (右到左)
• 节点形状：[] 矩形, () 圆角, {} 菱形, [] 圆柱
• 连接线：--> 实线, -- 虚线, -.- 点线
• 箭头样式：>|实心箭头, >空心箭头
• 连接文字：|文字| 在箭头后添加说明

时序图

sequenceDiagram
    participant A as 客户端
    participant B as 服务器
    participant C as 数据库
    A->>B: 发送请求
    B->>C: 查询数据
    C-->>B: 返回结果
    B-->>A: 响应结果

• 参与者：使用 participant 关键字定义
• 消息类型：-> 实线箭头, --> 虚线箭头, ->> 实线返回
• 激活框：activate/deactivate 表示激活状态
• 注释：Note 用于添加说明
• 循环/条件：loop/alt/opt 表示复杂逻辑

类图

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +String name
    Animal : +int age
    Animal: +makeSound()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -sizeInFeet
        -canEat()
    }

• 继承：<|-- 表示继承关系
• 接口：<| 表示实现关系
• 关联：--> 表示关联关系
• 成员：+ public, - private, # protected
• 方法：() 表示方法，无括号表示属性

状态图

stateDiagram-v2
    [*] --> 初始状态
    初始状态 --> 处理中: 触发事件
    处理中 --> 完成: 处理成功
    处理中 --> 错误: 处理失败
    完成 --> [*]
    错误 --> [*]

• 开始/结束：[*] 表示开始或结束状态
• 状态转换：--> 表示状态变化
• 复合状态：使用 state 定义复合状态

甘特图

gantt
    title 项目进度表
    dateFormat YYYY-MM-DD
    section 阶段一
    任务A: a1, 2024-01-01, 7d
    任务B: a2, after a1, 5d
    section 阶段二
    任务C: c1, after a2, 10d
    任务D: c2, after c1, 5d

• 标题：title 定义图表标题
• 日期格式：dateFormat 定义日期显示格式
• 任务定义：任务名, 开始日期, 持续时间
• 依赖关系：after 关键字表示依赖前置任务
• 分组：section 用于任务分组

饼图

pie title 市场份额
    "产品A" : 45
    "产品B" : 30
    "产品C" : 15
    "其他" : 10

• 标题：title 定义图表标题
• 数据：使用 "标签" : 数值 格式

使用技巧

• 调试：使用 format.cool 的 Mermaid 工具实时预览
• 换行：使用 \n 在节点文本中换行
• 特殊字符：使用引号包裹包含特殊字符的文本
• 注释：使用 %% 开头添加注释
• 样式：使用 subgraph 定义子图进行分组