树形图 
括号图 
思维笔记 
流程图 - 基础语法
流程图由节点（几何形状）和连接线（箭头或线条）组成。Mermaid代码定义了节点和连接线的构建方式，并支持多种箭头类型、多向箭头以及与子流程的任意链接。
警告 如果你在流程图节点中使用单词 "end"，请将首字母或整个单词大写（例如："End" 或 "END"），全部小写输入 "end" 会导致流程图出错。
警告 如果你连接流程图节点时使用字母 "o" 或 "x" 作为首字母，请在字母前添加一个空格或将字母大写（例如："dev--- ops"、"dev---Ops"）。 输入"A---oB" 将创建一个圆点连接线。 输入 "A---xB" 将创建一个X型连接线。
一个节点（默认）
代码：
复制
嵌入
---
title: Node
---
flowchart LR
id
信息
id就是框中显示的内容。
提示
提示 流程图创建语法，除了使用 flowchart ，还可以使用 graph 。
一个带有文本的节点
也可以为方框设置与id不同的文本。如果多次执行此操作，系统将采用该节点最后指定的文本。此外，如果稍后为节点定义了连接线，则可以省略文本定义；渲染方框时将使用之前定义的文本。
代码：
复制
嵌入
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode文本
使用双引号 "text" 将Unicode文本封装。
代码：
复制
嵌入
flowchart LR
id["This ❤ Unicode"]
Markdown格式
使用双引号和反引号 "`text`" 将Markdown文本封装
代码：
复制
嵌入
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
方向
声明了流程图的方向
表示流程图是从上到下排列的（TD或TB）
代码：
复制
嵌入
flowchart TD
Start --> Stop
流程图方向包括:
- TB - 从上到下
- TD - 从上而下（与从上到下相同）
- BT - 从下到上
- RL - 从右到左
- LR - 从左到右
节点形状
圆角矩形
代码：
复制
嵌入
flowchart LR
id1(This is the text in the box)
体育场形
代码：
复制
嵌入
flowchart LR
id1([This is the text in the box])
子流程
代码：
复制
嵌入
flowchart LR
id1[[This is the text in the box]]
数据库
代码：
复制
嵌入
flowchart LR
id1[(Database)]
圆形
代码：
复制
嵌入
flowchart LR
id1((This is the text in the circle))
不对称形状
代码：
复制
嵌入
flowchart LR
id1>This is the text in the box]
菱形
代码：
复制
嵌入
flowchart LR
id1{This is the text in the box}
六边形
代码：
复制
嵌入
flowchart LR
id1{{This is the text in the box}}
平行四边形
代码：
复制
嵌入
flowchart TD
id1[/This is the text in the box/]
反向平行四边形
代码：
复制
嵌入
flowchart TD
id1[\This is the text in the box\]
梯形
代码：
复制
嵌入
flowchart TD
A[/ProcessOn\]
倒梯形
代码：
复制
嵌入
flowchart TD
B[\ProcessOn/]
双圆
代码：
复制
嵌入
flowchart TD
id1(((This is the text in the circle)))
Mermaid流程图节点形状扩展
Mermaid引入了30种新形状，以增强流程图创建的灵活性和精确度。这些新形状提供了更多选项，用来直观地表示流程、决策、事件、数据存储以及流程图中的其他元素，从而提高清晰度和语义含义。
形状定义的新语法
Mermaid现在支持一种通用语法来定义形状类型，以适应日益增多的形状。此语法允许你使用清晰且灵活的格式为节点指定特定形状。
复制
嵌入
A@{ shape: rect }
此语法将节点A创建为矩形。它的渲染方式与 [A] 或 A 相同。
节点形状完整列表
以下是新引入的节点形状及其相应的含义、简称和别名的完整列表：
| 语义名称 | 图形语法 | 语法简称 | 语法替代 | 详细描述 |
|---|---|---|---|---|
| 卡片 | Notched Rectangle | notch-rect | card, notched-rectangle | 表示一张卡片 |
| 整理 | Hourglass | hourglass | collate | 表示整理操作 |
| 通信链路 | Lightning Bolt | bolt | com-link, lightning-bolt | 通信链路 |
| 注释 | Curly Brace | brace | brace-l, comment | 添加注释 |
| 右侧注释 | Curly Brace | brace-r | 添加注释 | |
| 两侧带有花括号的注释 | Curly Braces | braces | 添加注释 | |
| 数据输入或输出 | Lean Right | lean-r | in-out, lean-right | 表示输入或输出 |
| 数据输入或输出 | Lean Left | lean-l | lean-left, out-in | 表示输出或输入 |
| 数据库 | Cylinder | cyl | cylinder, database, db | 数据库存储 |
| 判定 | Diamond | diam | decision, diamond, question | 决策步骤 |
| 延迟 | Half-Rounded Rectangle | delay | half-rounded-rectangle | 表示延迟 |
| 直接存取存储 | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | 直接存取存储 |
| 磁盘存储 | Lined Cylinder | lin-cyl | disk, lined-cylinder | 磁盘存储 |
| 显示 | Curved Trapezoid | curv-trap | curved-trapezoid, display | 表示信息在屏幕、终端等设备上显示 |
| 分割处理 | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | 分割处理形状 |
| 文档 | Document | doc | document | 表示一个文档 |
| 事件 | Rounded Rectangle | rounded | event | 表示一个事件 |
| 提取 | Triangle | tri | extract, triangle | 提取过程 |
| 分叉/合并 | Filled Rectangle | fork | join | 流程图中的分叉或合并 |
| 内部存储 | Window Pane | win-pane | internal-storage, window-pane | 内部存储 |
| 连接点 | Filled Circle | f-circ | filled-circle, junction | 连接点 |
| 带线文档 | Lined Document | lin-doc | lined-document | 带线文档 |
| 线条/阴影工艺 | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | 带线条的流程形状 |
| 循环限制 | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | 循环限制步骤 |
| 手动文件 | Flipped Triangle | flip-tri | flipped-triangle, manual-file | 手动文件操作 |
| 手工输入 | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | 手动输入步骤 |
| 手动操作 | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | 表示一项人工任务 |
| 多文档 | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| 多进程 | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| 不规则形状 | Odd | odd | 不规则形状 | |
| 纸带 | Flag | flag | paper-tape | 纸带 |
| 准备条件 | Hexagon | hex | hexagon, prepare | 准备或条件步骤 |
| 优先动作 | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | 优先动作 |
| 处理 | Rectangle | rect | proc, process, rectangle | 标准处理形状 |
| 开始 | Circle | circle | circ | 起点 |
| 开始 | Small Circle | sm-circ | small-circle, start | 小圆起点 |
| 停止 | Double Circle | dbl-circ | double-circle | 表示停止点 |
| 停止 | Framed Circle | fr-circ | framed-circle, stop | 表示停止点 |
| 存储数据 | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | 存储数据 |
| 子流程 | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | 子流程, 子程序 |
| 摘要 | Crossed Circle | cross-circ | crossed-circle, summary | 摘要 |
| 标签化文档 | Tagged Document | tag-doc | tagged-document | 标签化文档 |
| 已标准流程 | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| 终点 | Stadium | stadium | pill, terminal | 终点 |
| 文本块 | Text Block | text | 文本块 |
以下是使用新引入的状的流程图代码示例：
代码：
复制
嵌入
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
进程
代码：
复制
嵌入
flowchart TD
A@{ shape: rect, label: "This is a process" }
事件
代码：
复制
嵌入
flowchart TD
A@{ shape: rounded, label: "This is an event" }
子进程
代码：
复制
嵌入
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
数据库（圆柱体）
代码：
复制
嵌入
flowchart TD
A@{ shape: cyl, label: "Database" }
开始（圆形）
代码：
复制
嵌入
flowchart TD
A@{ shape: circle, label: "Start" }
不规则图形
代码：
复制
嵌入
flowchart TD
A@{ shape: odd, label: "Odd shape" }
判断（菱形）
代码：
复制
嵌入
flowchart TD
A@{ shape: diamond, label: "Decision" }
准备条件 (六边形)
代码：
复制
嵌入
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
数据输入/输出（向右倾斜）
代码：
复制
嵌入
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
数据输入/输出（向左倾斜）
代码：
复制
嵌入
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
优先动作 (梯形)
代码：
复制
嵌入
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
手动操作 (倒梯形)
代码：
复制
嵌入
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
停止 (双圆)
代码：
复制
嵌入
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
文本块
代码：
复制
嵌入
flowchart TD
A@{ shape: text, label: "This is a text block" }
卡片（缺口矩形）
代码：
复制
嵌入
flowchart TD
A@{ shape: notch-rect, label: "Card" }
带线/阴影流程
代码：
复制
嵌入
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
开始（小圆）
代码：
复制
嵌入
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
停止 (带框的圆)
代码：
复制
嵌入
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
分叉/合并 (长矩形)
代码：
复制
嵌入
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
整理（沙漏）
代码：
复制
嵌入
flowchart TD
A@{ shape: hourglass, label: "Collate" }
注释（大括号）
代码：
复制
嵌入
flowchart TD
A@{ shape: comment, label: "Comment" }
注释右侧（右侧大括号）
代码：
复制
嵌入
flowchart TD
A@{ shape: brace-r, label: "Comment" }
注释（两侧均带括号）
代码：
复制
嵌入
flowchart TD
A@{ shape: braces, label: "Comment" }
通信链路（闪电）
代码：
复制
嵌入
flowchart TD
A@{ shape: bolt, label: "Communication link" }
文档
代码：
复制
嵌入
flowchart TD
A@{ shape: doc, label: "Document" }
延迟（半圆角矩形）
代码：
复制
嵌入
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
代码：
复制
嵌入
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
磁盘存储（带槽圆柱体）
代码：
复制
嵌入
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
显示（显示形状）
代码：
复制
嵌入
flowchart TD
A@{ shape: curv-trap, label: "Display" }
分割处理（分割矩形）
代码：
复制
嵌入
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
提取（小三角形）
代码：
复制
嵌入
flowchart TD
A@{ shape: tri, label: "Extract" }
内部存储（窗口面板）
代码：
复制
嵌入
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
连接点（实心圆）
代码：
复制
嵌入
flowchart TD
A@{ shape: f-circ, label: "Connect" }
带线文档
代码：
复制
嵌入
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
循环限制 (缺口五边形)
代码：
复制
嵌入
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
手动文件 (翻转三角形)
代码：
复制
嵌入
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
手动输入 (直角梯形)
代码：
复制
嵌入
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
多文档 (堆叠文档)
代码：
复制
嵌入
flowchart TD
A@{ shape: docs, label: "Multi-document" }
多进程 (堆叠矩形)
代码：
复制
嵌入
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
纸带 (旗帜)
代码：
复制
嵌入
flowchart TD
A@{ shape: flag, label: "Paper tape" }
存储数据 (蝴蝶结矩形)
代码：
复制
嵌入
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
摘要 (带十字的圆圈)
代码：
复制
嵌入
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
标签化文档
代码：
复制
嵌入
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
标记的流程
代码：
复制
嵌入
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Mermaid流程图中的特殊形状
Mermaid还引入了图片来增强你的流程图，允许你直接在流程图中包含图片，从而提供更多的视觉背景和清晰度。
图片形状
你可以使用 image 在流程图中插入图片，定义图片的语法如下：
复制
嵌入
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
参数
- img：要显示图片的URL地址。
- label：与图片关联的文本标签，可以是任何字符串。如果未定义，则不会显示任何标签。
- pos：标签的位置。如果未定义，则标签将默认为图片底部。
- w：图片的宽度。如果未定义，则默认为图片的自然宽度。
- h：图片的高度。如果未定义，则默认为图片的自然高度。
- constraint：确定图片是否限制节点大小。此设置还确保图片保持其原始宽高比，并根据宽度调整高度。如果未定义，则默认为 off 。
图片为你的流程图提供了额外的灵活性和视觉吸引力，使其更具信息性和吸引力。
节点之间的连接
节点可以通过连接线和箭头连接。有不同类型的链接，也可以将文本字符串附加到链接上。
带箭头的链接
代码：
复制
嵌入
flowchart LR
A-->B
一个开放链接
代码：
复制
嵌入
flowchart LR
A --- B
带文本的链接
代码：
复制
嵌入
flowchart LR
A-- This is the text! ---B
或者
代码：
复制
嵌入
flowchart LR
A --- | This is the text| B
带有箭头和文本的链接
代码：
复制
嵌入
flowchart LR
A-->|text|B
或者
代码：
复制
嵌入
flowchart LR
A-- text -->B
虚线链接
代码：
复制
嵌入
flowchart LR
A-.->B;
带文本的虚线链接
代码：
复制
嵌入
flowchart LR
A-. text .->B;
粗链接
代码：
复制
嵌入
flowchart LR
A ==> B
带文本的粗链接
代码：
复制
嵌入
flowchart LR
A == |text| ==> B
隐形链接
代码：
复制
嵌入
flowchart LR
A ~~~ B
链接的链式连接
代码：
复制
嵌入
flowchart LR
A -- text --> B -- text2 --> C
也可以在同一行中声明多个节点链接，如下所示：
代码：
复制
嵌入
flowchart LR
a --> b & c--> d
你还可以描述依赖，就像下面的代码：
代码：
复制
嵌入
flowchart LR
a --> b & c--> d & e--> f
如果使用基本语法描述同一个图形，则需要8行。需要提醒的是，过度使用这种方法可能会使Markdown格式的流程图更难阅读。
代码：
复制
嵌入
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
为连接线添加ID
Mermaid现在支持给连接线添加ID，类似于将ID和元数据附加到节点上。这个功能为连接线上更高级的样式、类和动画功能奠定了基础。
语法：要为连接线添加ID，请在连接线语法前面加上ID，后面紧跟 @ 字符。例如：
代码：
复制
嵌入
flowchart LR
A e1@--> B
在此示例中，e1 是连接 A 和 B 的连接线的 ID。你可以在后续的定义或样式语句中使用这个 ID，就像使用节点一样。
打开动画
为连接线添加 ID 后，你可以通过定义连接线的属性来开启连接线的动画：
代码：
复制
嵌入
flowchart LR
A e1@==> B
e1@{ animate: true }
这告诉 Mermaid，连接线 e1 是动画。
选择动画类型
在初始版本中，支持两种动画速度：fast 和 slow。选择特定的动画类型是启用动画并一次性设置动画速度的简便方式。
代码：
复制
嵌入
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
使用 classDef 语句进行动画
你还可以通过为连接线分配一个类，然后在 classDef 语句中定义动画属性来为连接线添加动画。例如：
代码：
复制
嵌入
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
在这段代码中：
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate 定义了一个名为 animate 的类，并具有样式和动画属性。
- class e1 animate 将 animate 类应用于连接线 e1 上。
关于转义逗号的说明：在设置 stroke-dasharray 属性时，请记住将逗号转义为 ,，因为逗号在Mermaid的样式定义中用作分隔符。
新的箭头类型
支持新的箭头类型
- 带实心圆的连接线
- 带交叉标记的连接线
带实心圆的连接线
代码：
复制
嵌入
flowchart LR
A --o B
带交叉标记的连接线
代码：
复制
嵌入
flowchart LR
A --x B
多方向箭头
可以使用多方向箭头，例如：
代码：
复制
嵌入
flowchart LR
A o--o B
B <--> C
C x--x D
连接线长度
流程图中的每个节点，根据其连接的节点分配给渲染图中的一个等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量等级，但你可以通过在连接定义中添加额外的中划线，来要求某一连接比其他连接更长。
在这个示例中，在从节点 B 到节点 E 的连接中额外添加了两个中划线，使其跨越的等级比普通链接多两个：
代码：
复制
嵌入
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
当连接标签写在连接中间时，必须在连接右侧添加额外的中划线。这个示例与上一个示例等效：
代码：
复制
嵌入
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
对于点状线或粗链接，要添加的字符是等号或点，如下表所示：
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 普通连接 | --- | ---- | ----- |
| 普通连接带箭头 | --> | ---> | ----> |
| 粗连接 | === | ==== | ===== |
| 粗连接带箭头 | ==> | ===> | ====> |
| 点状线 | -.- | -..- | -...- |
| 点状线带箭头 | -.- | -..-> | -...-> |
特殊字符
可以将文本放在引号内以渲染更麻烦的字符。如下例所示：
代码：
复制
嵌入
flowchart LR
id1["This is the (text) in the box"]
用于转义字符的实体编码
可以使用示例的语法对字符进行转义。
代码：
复制
嵌入
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
给出的数字是十进制，因此 # 可以编码为 #35。也支持使用 HTML 字符名称。
子图
复制
嵌入
subgraph title
graph definition
end
下面是一个例子:
代码：
复制
嵌入
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
你还可以为子图设置 id。
代码：
复制
嵌入
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
流程图
使用流程图类型的图表，也可以像下面的流程图一样设置指向和来自子图的连接线。
代码：
复制
嵌入
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
子图方向
使用流程图类型时，你可以使用方向语句来设置子图的渲染方向，如下所示：
代码：
复制
嵌入
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
局限性
如果子图的任何节点与外部相连，子图的方向将被忽略。否则，子图将继承父图的方向：
代码：
复制
嵌入
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown字符串
Markdown字符串通过提供一种更灵活的字符串类型来增强流程图和思维导图，支持粗体和斜体等文本格式选项，并且能够在标签内自动换行文本。
代码：
复制
嵌入
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- 要加粗文本，请在文本前后使用两个星号（**）。
- 斜体使用单星号（*）放在文本的前后。
- 对于传统字符串，你需要添加 <br> 标签才能让文本在节点中换行。然而，Markdown字符串在文本过长时会自动换行，并且只需使用换行符而不是 <br> 标签就可以开始新的一行。
此功能适用于节点标签、连接线标签和子图标签
可以通过使用特定语法来禁用自动换行
代码：
复制
嵌入
---
config:
markdownAutoWrap: false
---
graph LR
注释
可以在流程图中输入注释，编辑器将忽略这些注释。注释需要独占一行，并且必须以双百分号（%%）开头。从注释开始到下一行的任何文本都会被视为注释，包括任何流程语法。
代码：
复制
嵌入
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
样式和类
链接样式
可以设置链接样式。例如，你可能想要设计一个在流程中向后移动的链接，由于链接不像节点那样有 ID，因此需要通过其他方式来决定链接应使用的样式。使用定义链接时的顺序号，或者使用默认值来应用于所有链接。
复制
嵌入
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
还可以通过在单个语句中用逗号分隔链接编号，向多个链接添加样式：
复制
嵌入
linkStyle 1,2,7 color:blue;
设置连接线曲线样式
如果默认方法不能满足你的需求，可以为项目之间连接线设置曲线样式。可用的曲线样式包括 basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter 和 stepBefore。
在下面的例子中，一个从左到右的图表使用了 stepBefore 曲线样式。
复制
嵌入
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
设置节点样式
可以对节点设定特定样式，例如较粗的边框或不同的背景颜色。
代码：
复制
嵌入
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
类
比每次定义样式更方便的是定义一个样式类，并将该类附加到需要不同外观的节点上。
类定义如下所示：
复制
嵌入
classDef className fill:pink,stroke:#333,stroke-width:4px;
此外，还可以在一条语句中为多个类定义样式：
复制
嵌入
classDef firstClassName,secondClassName font-size:12pt;
将类附加到节点的操作如下：
复制
嵌入
class nodeId1 className;
还可以在一条语句中将一个类附加到节点列表上：
复制
嵌入
class nodeId1,nodeId2 className;
添加类可以使用 ::: 运算符将类名附加到节点，如下所示：
代码：
复制
嵌入
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
声明节点之间的多个链接时可以使用这种形式：
代码：
复制
嵌入
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- 在图形声明中，语句现在也可以不以分号结束。在 0.2.16 版本之后，图语句以分号结尾只是可选的。因此，下面的图声明与旧的图声明一样也是有效的。
- 顶点和链接之间允许有一个空格。但是，顶点及其文本以及链接与其文本之间不应有任何空格。旧的图声明语法也仍然有效，因此这个新功能是可选的，旨在提高可读性。
下面是连接线的新声明，与旧的连接线声明一样也是有效的。
代码：
复制
嵌入
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
