树形图 
括号图 
思维笔记 
流程图 - 基础语法
流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何制作节点和边，并适应不同的箭头类型、多方向箭头以及任何与子图的链接。
如果你在流程图节点中使用单词 "end"，请将整个单词或任何字母大写（例如，"End" 或 "END"）。输入全部小写字母的 "end" 将破坏流程图。
如果你使用字母 "o" 或 "x" 作为连接流程图节点的首字母，请在字母前添加空格或将字母大写（例如，"dev--- ops"、"dev---Ops"）。输入 "A---oB" 将创建 circle edge。输入 "A---xB" 将创建 cross edge。
一个节点（默认）
代码：
复制
嵌入
---
title: Node
---
flowchart LR
id
信息
id是框中显示的内容
提示
除了flowchart，还可以使用 graph
带有文本的节点
也可以在框中设置与 id 不同的文本。如果执行此操作多次，则它将是为要使用的节点找到的最后一个文本。此外，如果稍后为节点定义边，则可以省略文本定义。渲染盒子时将使用先前定义的值。
代码：
复制
嵌入
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
统一码文本
使用 " 将 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 LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
代码：
复制
嵌入
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[【Database】]
数据库
代码：
复制
嵌入
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[/Christmas\]
手动操作
代码：
复制
嵌入
flowchart TD
B[\Go shopping/]
停止
代码：
复制
嵌入
flowchart TD
id1(((This is the text in the circle)))
Mermaid 流程图中的扩展节点形状
Mermaid Mermaid 引入了 30 种新形状，以增强流程图创建的灵活性和精确度。这些新形状提供了更多选项来直观地表示流程、决策、事件、数据存储以及流程图中的其他元素，从而提高清晰度和语义含义。 2 种特殊形状来增强你的流程图：图标和图片。这些形状允许你直接在流程图中包括图标和图片，从而提供更多的视觉背景和清晰度。
形状定义的新语法
Mermaid 现在支持定义形状类型的通用语法，以适应不断增长的形状数量。此语法允许你使用清晰灵活的格式将特定形状分配给节点：
复制
嵌入
A@{ shape: rect }
此语法将节点 A 创建为矩形。它的渲染方式与 A["A"] 或 A 相同。
新形状的完整列表
以下是新引入的形状及其相应的语义含义、简称和别名的完整列表：
| Semantic Name | Shape Name | Short Name | Description | Alias Supported |
|---|---|---|---|---|
| Card | Notched Rectangle | notch-rect | Represents a card | card, notched-rectangle |
| Collate | Hourglass | hourglass | Represents a collate operation | collate, hourglass |
| Com Link | Lightning Bolt | bolt | Communication link | com-link, lightning-bolt |
| Comment | Curly Brace | brace | Adds a comment | brace-l, comment |
| Comment Right | Curly Brace | brace-r | Adds a comment | |
| Comment with braces on both sides | Curly Braces | braces | Adds a comment | |
| Data Input/Output | Lean Right | lean-r | Represents input or output | in-out, lean-right |
| Data Input/Output | Lean Left | lean-l | Represents output or input | lean-left, out-in |
| Database | Cylinder | cyl | Database storage | cylinder, database, db |
| Decision | Diamond | diam | Decision-making step | decision, diamond, question |
| Delay | Half-Rounded Rectangle | delay | Represents a delay | half-rounded-rectangle |
| Direct Access Storage | Horizontal Cylinder | h-cyl | Direct access storage | das, horizontal-cylinder |
| Disk Storage | Lined Cylinder | lin-cyl | Disk storage | disk, lined-cylinder |
| Display | Curved Trapezoid | curv-trap | Represents a display | curved-trapezoid, display |
| Divided Process | Divided Rectangle | div-rect | Divided process shape | div-proc, divided-process, divided-rectangle |
| Document | Document | doc | Represents a document | doc, document |
| Event | Rounded Rectangle | rounded | Represents an event | event |
| Extract | Triangle | tri | Extraction process | extract, triangle |
| Fork/Join | Filled Rectangle | fork | Fork or join in process flow | join |
| Internal Storage | Window Pane | win-pane | Internal storage | internal-storage, window-pane |
| Junction | Filled Circle | f-circ | Junction point | filled-circle, junction |
| Lined Document | Lined Document | lin-doc | Lined document | lined-document |
| Lined/Shaded Process | Lined Rectangle | lin-rect | Lined process shape | lin-proc, lined-process, lined-rectangle, shaded-process |
| Loop Limit | Trapezoidal Pentagon | notch-pent | Loop limit step | loop-limit, notched-pentagon |
| Manual File | Flipped Triangle | flip-tri | Manual file operation | flipped-triangle, manual-file |
| Manual Input | Sloped Rectangle | sl-rect | Manual input step | manual-input, sloped-rectangle |
| Manual Operation | Trapezoid Base Top | trap-t | Represents a manual task | inv-trapezoid, manual, trapezoid-top |
| Multi-Document | Stacked Document | docs | Multiple documents | documents, st-doc, stacked-document |
| Multi-Process | Stacked Rectangle | st-rect | Multiple processes | processes, procs, stacked-rectangle |
| Odd | Odd | odd | Odd shape | |
| Paper Tape | Flag | flag | Paper tape | paper-tape |
| Prepare Conditional | Hexagon | hex | Preparation or condition step | hexagon, prepare |
| Priority Action | Trapezoid Base Bottom | trap-b | Priority action | priority, trapezoid, trapezoid-bottom |
| Process | Rectangle | rect | Standard process shape | proc, process, rectangle |
| Start | Circle | circle | Starting point | circ |
| Start | Small Circle | sm-circ | Small starting point | small-circle, start |
| Stop | Double Circle | dbl-circ | Represents a stop point | double-circle |
| Stop | Framed Circle | fr-circ | Stop point | framed-circle, stop |
| Stored Data | Bow Tie Rectangle | bow-rect | Stored data | bow-tie-rectangle, stored-data |
| Subprocess | Framed Rectangle | fr-rect | Subprocess | framed-rectangle, subproc, subprocess, subroutine |
| Summary | Crossed Circle | cross-circ | Summary | crossed-circle, summary |
| Tagged Document | Tagged Document | tag-doc | Tagged document | tag-doc, tagged-document |
| Tagged Process | Tagged Rectangle | tag-rect | Tagged process | tag-proc, tagged-process, tagged-rectangle |
| Terminal Point | Stadium | stadium | Terminal point | pill, terminal |
| Text Block | Text Block | text | Text block |
以下是使用一些新引入的形状的示例流程图
代码：
复制
嵌入
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: 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" }
Com Link（闪电）
代码：
复制
嵌入
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://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
参数
- 图片：要显示的图片的 URL。
- 标签：与图片关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。
- pos：标签的位置。如果未定义，则标签将默认为图片底部。可能的值是：
t,b,l,r。 - w：图片的宽度。如果未定义，则默认为图片的自然宽度。
- h：图片的高度。如果未定义，则默认为图片的自然高度。
- 约束：确定图片是否应限制节点大小。此设置还确保图片保持其原始纵横比，并根据宽度
（w）调整高度（h）。如果未定义，则默认为 off 可能的值是：：on,off。
这些新形状为你的流程图提供了额外的灵活性和视觉吸引力，使其更具信息性和吸引力。
节点之间的连接
节点可以通过链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。
带箭头的链接
代码：
复制
嵌入
flowchart LR
A-->B
一个打开的链接
代码：
复制
嵌入
flowchart LR
A --- B
带文本的链接
代码：
复制
嵌入
flowchart LR
A-- This is the text! ---B
or
代码：
复制
嵌入
flowchart LR
A --- | This is the text| B
带有箭头和文本的链接
代码：
复制
嵌入
flowchart LR
A-->|text|B
or
代码：
复制
嵌入
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
如果使用基本语法描述同一个图，则需要四行。警告一句，这样做可能会导致流程图更难以 Markdown 形式阅读。我想到了瑞典语“lagom”。意思是，不能太多，也不能太少。这也适用于表达语法。
代码：
复制
嵌入
flowchart TB
A --> C
B --> C
A --> D
B --> D
将 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;"]
给出的数字以 10 为基数，因此 # 可以编码为 #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
子图中的方向
使用 graphtype 流程图，你可以使用方向语句来设置子图渲染的方向，如本例所示。
代码：
复制
嵌入
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 字符串会自动换行，并允许你只需使用换行符而不是
标记来开始新行。
此功能适用于节点标签、边标签和子图标签
可以通过使用禁用自动换行
代码：
复制
嵌入
---
config:
markdownAutoWrap: false
---
graph LR
工具提示文本用双引号引起来。工具提示的样式由 .mermaidTooltip 类设置。
代码：
复制
嵌入
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click C call callback() "Tooltip for a callback"
click D href "https://www.github.com" "This is a tooltip for a link"
默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过向点击定义添加链接目标来更改此设置（支持 _self、_blank、_parent 和 _top）：
代码：
复制
嵌入
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
注释
可以在流程图中输入注释，解析器将忽略这些注释。注释需要独占一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何流语法
代码：
复制
嵌入
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
样式和类别
设置链接样式
可以设置链接样式。例如，你可能想要设计一个在流程中向后移动的链接。由于链接没有像节点一样的 id，因此需要其他一些方法来决定链接应附加到什么样式。使用图表中定义链接时的顺序号来代替 ids，或者使用默认值应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：
复制
嵌入
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
- 在图形声明中，语句现在也可以不以分号结束。
- 顶点和链接之间允许有一个空格。但是，顶点及其文本以及链接及其文本之间不应有任何空格。图形声明的旧语法也将起作用，因此这个新功能是可选的，引入它是为了提高可读性。
下面是图边的新声明，它与旧的图边声明一起有效。
代码：
复制
嵌入
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
