# Mermaid

<https://mermaid.nodejs.cn/intro/syntax-reference.html?#diagram-breaking>

<https://github.com/mermaid-js/mermaid>

1. 节点定义
   1. 基本语法：节点的格式通常是`[节点名称]`或者`(节点名称)`，方括号和圆括号在显示上略有不同，方括号一般用于矩形节点，圆括号用于圆形节点。例如`A[这是一个矩形节点]`、`B(这是一个圆形节点)`。
   2. 带样式的节点：可以通过在节点定义中添加样式来改变节点外观。例如，`style [节点名称] fill:#f9f,stroke:#333,stroke - width:4px;`，这里`fill`表示填充颜色，`stroke`表示边框颜色，`stroke - width`表示边框宽度。
2. 节点之间的连线
   1. 基本连线：使用`-->`来表示节点之间的简单连线，方向是从左边节点指向右边节点。例如`A[节点A] --> B[节点B]`，表示从节点 A 连接到节点 B。
   2. 带文本的连线：如果要在连线上添加文本，可以使用`|文本内容|`的格式放在连线中间。例如`A[节点A] -->|这是连线文本|B[节点B]`。
   3. 不同样式的连线：可以对线的样式进行修改，如`-.-`表示虚线，`==>`表示粗线等。例如`A[节点A] -.-|这是虚线连线文本|B[节点B]`。
3. 流程图方向
   1. 从上到下（默认）：使用`graph TD`来定义一个从上到下（Top - Down）的流程图，其中`T`表示顶部（Top），`D`表示底部（Down）。例如：

<figure><img src="https://552748460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff2WqPy2HCEeg2e5DJYFU%2Fuploads%2Fgit-blob-b384cf8790c477bb9a9505211c06d04f460f0b00%2Fimage%20(3)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

* 从左到右：使用`graph LR`来定义一个从左到右（Left - Right）的流程图，其中`L`表示左边（Left），`R`表示右边（Right）。例如：

<figure><img src="https://552748460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff2WqPy2HCEeg2e5DJYFU%2Fuploads%2Fgit-blob-8fe14ca7e92065afad71dc1803c0ceefc614c47a%2Fimage%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

* 其他方向：还可以定义从下到上（`graph BT`）或者从右到左（`graph RL`）的流程图，不过这两种方向相对较少使用。

\\

4. 子图（Subgraph）
   1. 定义子图：使用`subgraph`关键字来定义一个子图，后面跟着子图的标题。例如：

<figure><img src="https://552748460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff2WqPy2HCEeg2e5DJYFU%2Fuploads%2Fgit-blob-8983538888e40aaafb7b66b68a2ee18486227d9d%2Fimage%20(2)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

* 嵌套子图：子图可以进行嵌套，以构建更复杂的层次结构。例如：

<figure><img src="https://552748460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff2WqPy2HCEeg2e5DJYFU%2Fuploads%2Fgit-blob-fd4612706219631336ba6864e62b89da9cbaf343%2Fimage%20(3)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

5. 注释
   1. 在 Mermaid 流程图中，可以使用`%%`来添加注释。注释内容不会在流程图中显示，只是用于帮助理解代码。例如：

<figure><img src="https://552748460-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff2WqPy2HCEeg2e5DJYFU%2Fuploads%2Fgit-blob-4e1ab180724bfa8048e9130f24502c4bde8d4ef5%2Fimage%20(4)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>
