生产白屏与not a function：Source Map和循环依赖排查实战
2026/10/11 4:04:38
本文主要介绍使用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, 5d4. 饼图
饼图以关键词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表示根节点，思维导图只有一个根节点((节点内容))表示圆形，如果没有指定形状就会使用默认形状思维导图中可选的形状：
[节点内容]：矩形(节点内容)：圆角矩形((节点内容))：圆形))节点内容((：爆炸形状)节点内容(：云朵形状
通过缩进表示不同节点之间的层级关系