1. 介绍

Mermaid 是一个基于 JavaScript 的图表生成工具，通过简单的文本语法生成流程图、时序图、甘特图等，支持 Markdown 和多种编辑器。

官方在线编辑器: https://mermaid.live/
官网教程地址: https://mermaid.js.org/intro/

2. 教程

2.1 流程图(Flowcharts)

流程图由 节点（几何形状）和 边（箭头或线条）组成，Mermaid 代码通过简单语法定义其结构和样式。
warning

1. 若节点文本包含 end，必须大写（如 End/END），否则会破坏流程图。
2. 若边连接符首字母为 o 或 x，需添加空格或大写 (e.g., "dev--- ops", "dev---Ops").
   A---oB 会生成 圆形箭头
   A---xB 会生成 交叉箭头

2.1.1 基础节点

---
title: Node
---
flowchart LR
    id

flowchart 可以用graph替换
id 为节点 ID，默认显示为矩形框

2.1.2 自定义节点文本

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

2.1.3 特殊格式支持 和 Markdown 格式化

特殊格式用双引号 "包裹 (好像不用也可以)

flowchart LR
    id["This ❤ Unicode"]

用双引号和反引号包裹

---
config:
  flowchart:
    htmlLabels: false
---
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

2.1.4 方向控制

通过声明 flowchart 方向 指定布局方向
TB - Top to bottom
TD - Top-down/ same as top to bottom
BT - Bottom to top
RL - Right to left
LR - Left to right

graph TD
    start-->stop

效果等同如下
graph TD
    start
    stop
    start-->stop

在 Mermaid 中，当你在连接关系中提到一个尚未声明的节点时，该节点会自动被创建。所以两种写法都会生成一个包含两个节点（start 和 stop）以及从 start 指向 stop 的箭头的相同图表。

2.1.5 节点形状

1. A(文本) 圆角矩形
2. A([文本]) 椭圆形（体育场）
3. A[[文本]] 子程序形状
4. A[(文本)] 圆柱形
5. A((文本)) 圆形
6. A>文本] 不对称形状
7. A{文本} 菱形（决策）
8. A{{文本}} 六边形
9. A[/文本/] 平行四边形
10. A[\文本\] 反向平行四边形
11. A[/文本\] 梯形
12. A[\文本/] 反向梯形
13. A(((文本))) 双圆形
14. [] 矩形

graph TB
    id1(123)
    id2([2143])
    id3[[2143]]
    id4[(123)]
    id5((123))
    id5>文本]
    id7{213}
    id8{{123}}
    id9[/文本/]
    id10[\fff\]
    id11[/ff\]
    id12[\ff/]
    id13(((324)))

2.1.6 扩展节点形状

定义形状类型的通用语法

通过 `@{ shape: <缩写> }` 语法指定形状
若需自定义显示文本，需通过 label: "文本" 显式指定。
`@{ shape: <缩写> label: "文本"}`


A@{ shape: rect }
效果类似:A["A"], 或者 A

完整列表,下面是新引入的形状及其相应的语义、短名称和别名的综合列表:

语义名称 (Semantic Name)	形状名称 (Shape Name)	缩写 (Short Name)	描述 (Description)	支持别名 (Alias Supported)
Bang	Bang	bang	感叹号形状	bang
Card	Notched Rectangle	notch-rect	表示卡片	card, notched-rectangle
Cloud	Cloud	cloud	云形状	cloud
Collate	Hourglass	hourglass	表示合并操作	collate, hourglass
Com Link	Lightning Bolt	bolt	通信链接	com-link, lightning-bolt
Comment	Curly Brace	brace	添加注释（左侧括号）	brace-l, comment
Comment Right	Curly Brace	brace-r	添加注释（右侧括号）	-
Comment with braces on both sides	Curly Braces	braces	添加双侧括号注释	-
Data Input/Output	Lean Right	lean-r	表示输入或输出	in-out, lean-right
Data Input/Output	Lean Left	lean-l	表示输出或输入	lean-left, out-in
Database	Cylinder	cyl	数据库存储	cylinder, database, db
Decision	Diamond	diam	决策步骤	decision, diamond, question
Delay	Half-Rounded Rectangle	delay	表示延迟	half-rounded-rectangle
Direct Access Storage	Horizontal Cylinder	h-cyl	直接访问存储	das, horizontal-cylinder
Disk Storage	Lined Cylinder	lin-cyl	磁盘存储	disk, lined-cylinder
Display	Curved Trapezoid	curv-trap	表示显示器	curved-trapezoid, display
Divided Process	Divided Rectangle	div-rect	分割流程形状	div-proc, divided-process, divided-rectangle
Document	Document	doc	表示文档	doc, document
Event	Rounded Rectangle	rounded	表示事件	event
Extract	Triangle	tri	提取流程	extract, triangle
Fork/Join	Filled Rectangle	fork	流程中的分支/合并	join
Internal Storage	Window Pane	win-pane	内部存储	internal-storage, window-pane
Junction	Filled Circle	f-circ	连接点	filled-circle, junction
Lined Document	Lined Document	lin-doc	带线条的文档	lined-document
Lined/Shaded Process	Lined Rectangle	lin-rect	带线条的流程	lin-proc, lined-process, lined-rectangle
Loop Limit	Notched Pentagon	notch-pent	循环限制步骤	loop-limit, notched-pentagon
Manual File	Flipped Triangle	flip-tri	手动文件操作	flipped-triangle, manual-file
Manual Input	Sloped Rectangle	sl-rect	手动输入步骤	manual-input, sloped-rectangle
Manual Operation	Trapezoid Base Top	trap-t	表示手动任务	inv-trapezoid, manual, trapezoid-top
Multi-Document	Stacked Document	docs	多个文档	documents, st-doc, stacked-document
Multi-Process	Stacked Rectangle	st-rect	多个流程	processes, procs, stacked-rectangle
Odd	Odd	odd	特殊形状	-
Paper Tape	Flag	flag	纸带形状	paper-tape
Prepare Conditional	Hexagon	hex	准备或条件步骤	hexagon, prepare
Priority Action	Trapezoid Base Bottom	trap-b	优先操作	priority, trapezoid, trapezoid-bottom
Process	Rectangle	rect	标准流程形状	proc, process, rectangle
Start	Circle	circle	起始点	circ
Start	Small Circle	sm-circ	小型起始点	small-circle, start
Stop	Double Circle	dbl-circ	表示停止点	double-circle
Stop	Framed Circle	fr-circ	带边框的停止点	framed-circle, stop
Stored Data	Bow Tie Rectangle	bow-rect	存储的数据	bow-tie-rectangle, stored-data
Subprocess	Framed Rectangle	fr-rect	子流程	framed-rectangle, subproc, subprocess
Summary	Crossed Circle	cross-circ	摘要	crossed-circle, summary
Tagged Document	Tagged Document	tag-doc	带标签的文档	tag-doc, tagged-document
Tagged Process	Tagged Rectangle	tag-rect	带标签的流程	tag-proc, tagged-process, tagged-rectangle

2.1.7 特殊形状

Mermaid还引入了两种特殊形状来增强您的流程图：图标和图像。这些形状允许您直接在流程图中包含图标和图像，从而提供更多的视觉背景和清晰度。
您可以使用 icon 形状在流程图中插入图标。使用前，需先注册图标包（icon pack）。具体方法请参考 自定义图标注册指南。

图标

flowchart TD
    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }

参数说明

参数	说明	可选值
icon	图标名称（需来自已注册的图标包）	如 fa:fa-twitter
form	图标的背景形状（可选，不设置则无背景）	square（方形）、circle（圆形）、rounded（圆角）
label	图标的文本标签（可选，不设置则不显示）	任意字符串
pos	标签位置（可选，默认为底部 b）	t（顶部）、b（底部）
h	图标高度（像素，可选，默认 48）

图像

可以使用 image 形状在流程图中插入外部图片

flowchart TD
    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }

参数	说明	可选值
img	图片 URL（必填）	如 https://example.com/1.png
label	图片的文本标签（可选，不设置则不显示）	任意字符串
pos	标签位置（可选，默认为底部 b）	t（顶部）、b（底部）
w / h	图片宽度和高度（像素，可选，默认使用图片原始尺寸）	数值（如 100）
constraint	是否保持图片比例（可选，默认 off）	on（保持比例）、off（不保持）

2.1.8 节点间的连接方式