Mermaid流程图

所有流程图都由节点，几何形状和边缘，箭头或线条组成。mermaid代码定义了这些节点和边缘的制作和交互方式。
它还可以容纳不同的箭头类型、多方向箭头以及与子图之间的链接。

1、流程图的方向

• TB - 从上到下
• TD - 自上而下/与上到下相同
• BT - 从下到上
• RL - 从右到左
• LR - 从左到右

flowchart TDStart --> Stop

flowchart LRStart --> Stop

2、节点形状

• 具有圆边的节点

flowchart LRid1(This is the text in the box)

• 体育场形节点

flowchart LRid1([This is the text in the box])

• 子例程形状中的节点

flowchart LRid1[[This is the text in the box]]

• 圆柱形节点

flowchart LRid1[(Database)]

• 圆形节点

flowchart LRid1((This is the text in the circle))

• 不对称形状的节点

flowchart LRid1>This is the text in the box]

• 菱形

flowchart LRid1{This is the text in the box}

• 六边形节点

flowchart LRid1{{This is the text in the box}}

• 平行四边形

flowchart TDid1[/This is the text in the box/]

• 平行四边形替代

flowchart TDid1[\This is the text in the box\]

• 梯形

flowchart TDA[/Christmas\]

• 梯形替代

flowchart TDB[\Go shopping/]

3、节点之间的链接

节点可以使用链接/边连接。可以具有不同类型的链接或将文本字符串附加到链接。

• 带箭头的链接

flowchart LRA-->B

• 打开的链接

flowchart LRA --- B

• 链接上的文字

flowchart LRA-- This is the text! ---B

或

flowchart LRA---|This is the text|B

• 带有箭头和文本的链接

flowchart LRA-->|text|B

或

flowchart LRA-- text -->B

• 虚线链接

flowchart LRA-.->B;

• 带文本的虚线链接

flowchart LRA-. text .-> B

• 粗链接

flowchart LRA ==> B

• 包含文本的粗链接

flowchart LRA == text ==> B

• 链式链接
  可以在同一行中声明许多链接，如下所示：

flowchart LRA -- text --> B -- text2 --> C

也可以在同一行中声明多个节点链接，如下所示：

flowchart LRa --> b & c--> d

以一种非常富有表现力的方式描述依赖项。就像下面的一行：

flowchart TBA & B--> C & D

使用基本语法描述相同的关系图，则需要四行

flowchart TBA --> CA --> DB --> CB --> D

• 新的箭头类型

flowchart LRA --o BB --x C

• 多方向箭头

flowchart LRA o--o BB <--> CC x--x D

• 链接的最小长度
  流程图中的每个节点最终被分配给渲染图中的等级，即根据其链接到的节点分配给垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的排名，但您可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接长。
  在以下示例中，在从节点 B 到节点 E 的链接中添加了两个额外的短划线，以便它比常规链接跨越两个等级：

flowchart TDA[Start] --> B{Is it?}B -->|Yes| C[OK]C --> D[Rethink]D --> BB ---->|No| E[End]

当链接标签写入链接中间时，必须在链接的右侧添加额外的破折号。以下示例等效于上一个示例：

flowchart TDA[Start] --> B{Is it?}B -- Yes --> C[OK]C --> D[Rethink]D --> BB -- No ----> E[End]

长度	1	2	3
正常	—	----	-----
正常箭头	–>	—>	---->
粗	===	====	=====
粗箭头	==>	===>	====>
点	-.-	-. .-	-…-
带点的箭头	-.->	-…->	-…->

4、 破坏语法的特殊字符

• 可以将文本放在引号内，以便呈现更复杂的字符。如下例所示：

flowchart LRid1["This is the (text) in the box"]

• 用于转义字符的实体代码

    flowchart LRA["A double quote:#quot;"] -->B["A dec char:#9829;"]

5、子图

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end

还可以为子图设置显式 ID

flowchart TBc1-->a2subgraph ide1 [one]a1-->a2end

使用graphtype流程图，还可以设置子图的边，如下图所示。

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2

使用 graphtype 流程图，您可以使用方向语句来设置子图将呈现的方向，如本例所示

flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2

6、注释

注释可以在流程图中输入，解析器将忽略该流程图。注释需要位于自己的行中，并且必须以（双百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何流语法%%

flowchart LR
%% this is a comment A -- text --> B{node}A -- text --> B -- text2 --> C

7、样式和类

7.1 设置节点样式

flowchart LRid1(Start)-->id2(Stop)style id1 fill:#f9f,stroke:#333,stroke-width:4pxstyle id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

8、顶点和链接之间有空格且不带分号的图形声明

在图形声明中，语句现在也可以不带分号结尾。在 0.2.16 版本之后，用分号结束图形语句只是可选的。因此，下面的图形声明与图形的旧声明一起也是有效的。
顶点和链接之间允许使用单个空格。但是，顶点与其文本以及链接与其文本之间不应有任何空格。图形声明的旧语法也可以使用，因此这个新功能是可选的，引入以提高可读性。

flowchart LRA[Hard edge] -->|Link text| B(Round edge)B --> C{Decision}C -->|One| D[Result one]C -->|Two| E[Result two]

参考：流程图 - 基本语法