Mermaid语法、实战
概述
官网，开源（GitHub，83.6K Star，8.2K Fork）基于JS的绘图工具，使用类似于Markdown语法，使用户可方便快捷地通过代码创建图表。官方文档。
官网提供两种使用模式：
- 在线体验：无需登录，功能够用；
- Pro版：仅7天免费，年费120刀；提供高级版功能，如团队协作、演示模式、白板、多人编辑、插件、AI加强等。
个人用户，使用免费版即可，官方给出各种类型图例的示意图，参考官方示例和文档，不懂的问GPT。
设置功能菜单：
这就很恶心啊：
解决方法：刷新浏览器。
支持绘制：
- 饼状图：使用
pie关键字 - 流程图：
graph或flowchart，没有区别 - 序列图：
sequenceDiagram - 甘特图：
gantt - 类图：
classDiagram - 状态图：
stateDiagram，推荐使用stateDiagram-v2 - 用户旅程图：
journey - 实体关系图：
erDiagram - 脑图：
mindmap - 架构图：
architecture-beta - 块图：
block-beta - C4：
C4Context - Git Flow：
gitGraph - 看板：
kanban - 包图：
packet，如TCP包 - 象限图：
quadrantChart - 雷达图：
radar-beta - 树图：
treemap-beta - 桑基图：
sankey-beta - 需求分析图：
requirementDiagram - 时间线图：
timeline - XY图：即横纵坐标图，
xychart-beta - Zen UML图：
zenuml
基本规则（语法）：
- 节点使用英文字母表示，支持大写和小写，一般都是大小，如A、B…；
- 节点后使用英文中括号表示节点内容，如
A[开始]； - 两个节点之间使用
-->连接，如A[用户]-->B[工作]； - 判断节点，即菱形节点使用
{}； - 节点连线之间若有文本，使用
||，如A-->|备注|B； - 左右布局使用
flowchart LR（Left Right缩写），上下布局使用flowchart TD（Top Down缩写）；
方向布局定义，需放置在第一行：
- 从上往下：
graph或graph TB或graph TD - 从左往右：
graph LR - 从右往左：
graph RL - 从下往上：
graph BT
实战
颜色：
#ff0：黄#00f：蓝#f00：红
流程图
入门示例：
渲染效果：
注意事项：
- 大小写敏感，linkStyle，不能写成linkstyle；
%%用于注释，但在图里看不出效果来（TODO）；
另一个案例
graph TD
A[用户输入]-->B[协调器]
B-->C{是否需要背景调研？}
C-->|是|D[背景研究]
D-->E[规划器]
C-->|否|E
E-->F[研究计划]
F-->G{人工申核？}
G-->|是|H[人工反馈]
H-->E
G-->|否|I[研究团队]
I-->J[程序员]
I-->K[研究员]
J-->L[报告生成器]
K-->L
L-->M[最终报告]
放在官网和Typora都可以成功渲染，在CSDN编辑器里，渲染失败。
截图就不放出来了。
类图
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
渲染效果图
注意事项：
<|--表示继承关系，父类在左侧，子类在右侧；- 类成员（属性、方法）前面的符号表示其访问修饰符（visibility，即可见性）
- 没有符号则默认是
+，即Public；
| 符号 | 含义 | 对应编程语言中的常见修饰符 |
|---|---|---|
+ | Public | 公有，任何地方可访问 |
- | Private | 私有，仅类内部可访问 |
# | Protected | 受保护，类及其子类可访问 |
~ | Package/Internal | 包级/内部，同一模块或包内可访问 |
序列图
sequenceDiagram
Alice->>+Johnny:Hello Johnny, how are you?
Alice->>+Johnny:Johnny, can you hear me?
Johnny-->>-Alice:Hi Alice, I can hear you!
Johnny-->>-Alice:I feel great~
渲染效果图：
注意事项：
- 符号很重要，几种常见符号如下；
- 英文冒号
:必不可少； +和-必须要成对出现，负责激活条无效；
| 符号 | 含义 |
|---|---|
->> | 同步消息（实线箭头），发送方等待接收方响应 |
-->> | 异步消息/返回消息（虚线箭头），通常用于回复 |
->>+ | 发送消息并激活接收方生命线（出现激活条） |
-->>- | 返回消息并结束当前激活（激活条结束） |
经典的TCP三次握手序列图：
sequenceDiagram
participant Client
participant ServerClient->>+Server:SYN(同步请求)
Server->>+Client:SYN-ACK(同步确认)
Client->>-Server:ACK(确认)
经典的TCP四次挥手序列图：
饼图
渲染效果
注意事项：
title可有可无，最好加上不然不明所以；title可放在第一行或另起一行（第二行）；- 空格或缩进可有可无；
- 必须用英文双引号。
Git Flow
关于Git Flow，即Git工作流，是一种Git分支管理合并规范，在大型、复杂项目中具有重要作用。参考团队协作最佳实践Git Flow。
gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
CSDN编辑器不支持渲染时间线图，效果如下：
注意事项：
- 默认工作分支是
main分支； - 从
main分支拉取新分支，提交代码，发布版本（此图没有体现出来），合并到main分支； - 上图表示的Git Flow还是非常非常简单，现实开发实践中，还有
hotfix、release等分支；也会基于develop分支再拉取新分支，等等。
ER图
即实体关系图，常用于数据库开发中。
以非常经典的RBAC为例，绘制ER图：
CSDN支持渲染，效果图：
注意事项：
||--o{表示两张表之间有关联关系，关系用英文双引号括起来，关系的主语是前者
时间线图
timeline title 中共四大举办地
1921.07.23: 上海: 嘉兴
1922.07.16: 上海
1923.06.12: 广州
1925.01.11: 上海
CSDN编辑器不支持渲染时间线图，效果如下：
注意事项：
- 英文冒号后面需要留一个空格；
脑图
mindmap
root(LLM)基础发展历史概念Prompt提示词工程CoT上下文工程Embedding智能体RAG进阶多智能体训练预训练微调全量参数微调LoRAQLoRA
CSDN编辑器不支持渲染时间线图，效果如下：
相比于XMind这种脑图工具，层级效果不明显（也有可能是先入为主的刻板印象）。
注意事项：
- 通过两个空格缩进来建立下一级目录
状态图
上下布局渲染效果图：
注意事项：
- 默认是上下布局，通过指定
direction来改变布局方向，如direction LR左右布局； direction指令需要放在第二行，不能和类型指令放在同一行；- 通过
<br>换行； - TODO：连线有交叉，怎么去除？？
甘特图
象限图
quadrantChart
title 紧急 + 重要
x-axis not urgent --> urgent
y-axis not important --> important
quadrant-1 urgent and important
quadrant-2 important but not urgent
quadrant-3 Neither important nor urgent
quadrant-4 urgent but not important
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
CSDN编辑器不支持渲染时间线图，效果如下：
注意事项：
title可以是中文或英文；x-axis、quadrant-i、Campaign X必须是英文，否则渲染失败（官方编辑器、以及Typora）；
XY图
xychart-beta
title "销售收入"
x-axis [Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec]
y-axis "收入(单位元)" 4000 --> 13000
bar [5000,6000,7500,8200,9500,10500,11000,10200,9200,8500,7000,6000]
line [4000,8000,6000,8200,13000,11000,10000,8000,9000,6000,7000,4000]
CSDN编辑器不支持渲染时间线图，效果如下：
注意事项：
title和y-axis支持中英文，需要使用英文双引号；- Y坐标使用
-->指定数据区间范围； - 同时支持
bar和line两种图形样式； x-axis数组元素个数和bar和line的元素个数最好相等，虽然不会渲染失败，但会出现缺失值。
看板图
---
config:kanban:ticketBaseUrl: 'https://org.atlassian.net/browse/#TICKET#'
---
kanban[待办][TODO1]TODO2[进行中][doing][待部署][后端Java User SVC]@{ assigned: 'Johnny' }[待测试][Python]@{ ticket: MC-2038, assigned: Deep, priority: 'High' }[已完成][前端UI]@{ priority: 'Very High'}[无法复现][安卓端]
由于CSDN不支持渲染这种类型的图，图片贴出效果
解读：
---标记块可有可无；- 两个空格缩进；
priority用于表示任务优先级，优先级越高，颜色越红。
桑基图
雷达图
Zen UML图
不是Beta版，不过Typora渲染不出来，只能在官网。
zenumltitle Order Service@Actor Client #FFEBE6@Boundary OrderController #0747A6@EC2 <<BFF>> OrderService #E3FCEFgroup BusinessService {@Lambda PurchaseService@AzureFunction InvoiceService}@Starter(Client)// `POST /orders`OrderController.post(payload) {OrderService.create(payload) {order = new Order(payload)if(order != null) {par {PurchaseService.createPO(order)InvoiceService.createInvoice(order)}}}}
渲染效果
也没多好看，绘制UML图，还是用Plant UML或其他工具好了。
TODO：Zen UML和UML区别？？
Flowchart
官网，另一款开源（GitHub，8.7K Star，1.2K Fork）流程图制作工具。
var chart = flowchart.parse(`st=>start: Startcond=>condition: Decision?act=>operation: Action 1e=>end: Endst->condcond(yes)->act->econd(no)->e
`);
对比
都是基于文本生成流程图的JS工具，都受文本即图理念影响：类似PlantUML、Graphviz，但更面向Web，目标相似，但设计哲学、语法、功能范围和生态定位有显著区别。
| 项目 | Mermaid | Flowchart |
|---|---|---|
| 类型 | 多图种支持的图表库 | 专注流程图的轻量库 |
| 支持图表 | 流程图、时序图、甘特图、类图、状态图、饼图、旅程图等 | 仅流程图 |
| 语法风格 | 类Markdown，声明式 | 自定义DSL，类似编程语句 |
| 生态 | 广泛集成于Obsidian、GitBook、VS Code、Notion（通过插件）、Docusaurus、Typora等 | 几乎无现代工具集成 |
| 渲染方式 | SVG（可交互、可缩放） | SVG（但样式和交互能力较弱） |