Mermaid极简教程

ChubbyPP

392人浏览 · 2026-06-02 11:24:07

ChubbyPP · 2026-06-02 11:24:07 发布

本文主要介绍使用Mermaid绘制常用图表的基础语法，帮助大家快速入门
在线Mermaid渲染工具：Modern Mermaid

1. 流程图

流程图以关键词 graph 开头，并在其后编写方向参数，指定图表的布局方向
常用方向参数有：

TB (Top to Bottom，从上到下)
BT (Bottom to Top，从下到上)
LR (Left to Right，从左到右)
RL (Right to Lef，从右到左)

示例代码：

graph TB
    A[起床] --> B{查看冰箱}
    B --> |有食材| C[做三明治]
    B --> |无食材| D[叫外卖]
    C --> E[摆盘拍照]
    D --> E
    E --> F[享用早餐]

渲染效果：
在这里插入图片描述
解析：

graph TB

声明开始编写一个流程图，布局方向为从上到下
编写完流程图声明后，建议接下来的代码缩进4个空格(或一个Tab)，这样代码结构更清晰，可读性更高
但不缩进也能正常渲染

A[起床] --> B{查看冰箱}

每个节点需要一个 ID (Identifier，标识符)来在代码中表示该节点对象，ID可以由字母、数字、下划线组成
当节点数不超过26时，可以按照流程顺序使用A-Z，如果预估节点较多可以使用纯数字作为变量名(1~无限大)，或者同级分支的不同节点可以使用B1、B2这样的变量名来节省字母，大家可依据自己的习惯来命名
[] 表示矩形框，{} 表示菱形框
--> 表示节点之间的流程走向，流程走向和 ID 名称无关

B --> |有食材| C[做三明治]
B --> |无食材| D[叫外卖]
C --> E[摆盘拍照]
D --> E
E --> F[享用早餐]

箭头符号后添加用 | | 包裹的文本，可以显示在流程线上
节点只需在第一次创建的时候声明 ID、节点形状、文本内容，已经存在的节点可以只用 ID 代表该节点
如果想要代码更易读，也可以每次都加上节点形状、文本内容，例如：

B{查看冰箱} --> |有食材| C[做三明治]
B{查看冰箱} --> |无食材| D[叫外卖]
C[做三明治] --> E[摆盘拍照]
D[叫外卖] --> E[摆盘拍照]
E[摆盘拍照] --> F[享用早餐]

补充：([]) 表示椭圆形框，从上往下布局也可用 TD (Top Down)表示，和 TB 效果一样
示例代码：

graph TD
    A([开始]) --> B{工作正常吗?}
    B -->|是| C[太好了!]
    B -->|否| D[调试]
    D --> E[修复问题]
    E --> B
    C --> F([结束])

2. 时序图

时序图以关键词 sequenceDiagram 开头 (我感觉翻译为序列图更合适，重点不在时间)
从上往下纵向阅读每个箭头是事件发生的先后顺序，横向阅读箭头是参与者之间的消息交互 (事件)
示例代码1：

sequenceDiagram
    participant 顾客
    participant 手机
    participant 咖啡店

    顾客->>手机: 下单
    手机->>咖啡店:
    咖啡店-->>顾客:

渲染效果：
在这里插入图片描述

解析1：

participant 顾客
participant 手机
participant 咖啡店

participant 关键词用来声明参与者，渲染时会按照声明顺序，从左往右排列角色，如果不写，则会按照代码中参与者出现的先后顺序从左往右排列

participant 关键词可以换成 actor，矩形图案会变成一个人形图案，常用来表示人、使用者、用户等
例如：

sequenceDiagram
    actor 顾客
    participant 手机
    participant 咖啡店

    顾客->>手机: 下单
    手机->>咖啡店:
    咖啡店-->>顾客:

渲染效果：

顾客->>手机: 下单
手机->>咖啡店:
咖啡店–>>顾客:

在时序图中，->> 表示实线箭头，-->> 表示虚线箭头
由于时序图强调不同参与者之间的消息交互(事件)，因此一般每个箭头上都有本次交互的动作描述，在箭头目标参与者后面写一个英文冒号 :，在冒号后编写描述文本，不需要文本可以空着

示例代码2：

sequenceDiagram
    顾客->>手机: 下单
    手机->>咖啡店:
    咖啡店-->>顾客:
    Note over 手机,咖啡店: 系统自动处理<br>无需人工操作

渲染效果：
在这里插入图片描述

解析2：
可以使用 Note 关键词添加备注，<br> 表示插入换行
语法格式：Note [right of | left of | over] [参与者]: 备注内容

Note over 手机,咖啡店: 系统自动处理<br>无需人工操作

over 可以让备注横跨在多个参与者中间 (显示在它们上面)，用英文逗号分隔多个参与者
right of 和 left of 只能绑定单个参与者，备注在目标参与者的左侧或右侧

3. 甘特图

甘特图是一种将活动与时间关联的可视化工具，能够清晰地展示各个活动的持续时间
甘特图以关键词 gantt 开头
示例代码：

gantt
    title 新功能开发计划
    dateFormat YYYY-MM-DD
    
	section 计划
	需求分析    :done, req, 2025-04-22, 3d
	设计        :design, after req, 5d
	section 开发
	编码        :code, after design, 7d
	section 测试
	单元测试    :unit, after code, 3d
	集成测试    :integration, after unit, 4d
	section 部署
	部署上线    :deploy, after integration, 2d

渲染效果：
在这里插入图片描述
解析：

title 新功能开发计划
dateFormat YYYY-MM-DD

在开头使用 title 关键词声明标题，使用 dateFormat 关键词声明时间格式

section 计划
需求分析    :done, req, 2025-04-22, 3d
设计        :design, after req, 5d
section 开发
编码        :code, after design, 7d
section 测试
单元测试    :unit, after code, 3d
集成测试    :integration, after unit, 4d
section 部署
部署上线    :deploy, after integration, 2d

使用 section 关键词给不同任务阶段分组，并编写任务内容
语法格式：
section 分组名
任务名 :任务标记(可选), 标识ID, 开始时间, 结束时间或任务时长

不需要任务标记时可以不写，任务标记可选的关键词有：

crit (critical，关键任务)，标记为红色色块
done (已完成任务)，标记为灰色色块
milestone (里程碑)，标记为菱形，一般里程碑的任务时长设置为0d

如果颜色没有变化，大家可以切换渲染主题
在这里插入图片描述

任务起止时间格式：

固定起止日期
任务A :taskA, 2025-06-01, 2025-06-05
起始时间 + 任务时长(天数)
任务B :taskB, 2025-06-01, 3d
跟着上个任务结束(after + ID)，常用格式
任务C :task3, after taskB, 2d

其它示例代码：

gantt
    title 项目开发时间线
    dateFormat YYYY-MM-DD
    section 规划阶段
    需求分析            :a1, 2024-01-01, 10d
    设计原型            :a2, after a1, 15d
    section 开发阶段
    后端API开发         :a3, 2024-01-26, 20d
    前端UI开发          :a4, after a3, 15d
    系统集成            :a5, after a4, 10d
    section 测试阶段
    单元测试            :a6, after a5, 7d
    集成测试            :a7, after a6, 5d
    section 部署阶段
    生产环境部署        :a8, after a7, 5d

4. 饼图

饼图以关键词 pie 开头
示例代码：

pie
    title 一天的时间分配
    "睡眠" : 8
    "工作" : 9
    "学习" : 2
    "娱乐" : 3
    "其他" : 2

渲染效果：颜色分不清可以换 Playful Doodle 主题
在这里插入图片描述
解析：

title 一天的时间分配

使用 title 关键词指定饼图的标题

“睡眠” : 8
“工作” : 9
“学习” : 2
“娱乐” : 3
“其他” : 2

使用类似Python字典中键值对的格式声明饼图中各扇区的数据值
"分类1" : 数值
"分类2" : 数值
渲染时会自动计算百分比

5. 思维导图

思维导图以关键词 mindmap 开头
示例代码：

mindmap
  root((今日新闻))
    财经
      股票市场
        科技股
        能源股
      宏观经济
        GDP 数据
        CPI 数据
    科技
      AI
        ChatGPT
        生成式 AI
      消费电子
        手机发布
        可穿戴设备
    社会
      城市事件
      天气灾害
    国际
      国际关系
      全球疫情

渲染效果：颜色区别不大的可以换 Playful Doodle 主题
在这里插入图片描述
解析：

root 表示根节点，思维导图只有一个根节点
((节点内容)) 表示圆形，如果没有指定形状就会使用默认形状

思维导图中可选的形状：
- [节点内容] ：矩形
- (节点内容) ：圆角矩形
- ((节点内容)) ：圆形
- ))节点内容(( ：爆炸形状
- )节点内容( ：云朵形状
通过缩进表示不同节点之间的层级关系