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）。例如：

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

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

\

1. 子图（Subgraph）

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

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

1. 注释

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