Markdown流程图--基础语法
一：基础语法--流程图
所有流程图都由节点、几何形状和边、箭头或线组成。mermaid代码定义了这些节点和边的制作和交互方式。它还支持不同类型的箭头、多方向箭头以及与子图的链接。
1.1：节点（默认的）
flowchart LR
id
flowchart LR
id
提示：id展示在方格中，即id即作为节点对象，也作为节点的名字。
1.2：带有文字的节点
默认节点对象就是节点的名称，但是我们也可以设置不同的名字
flowchart LR
id1[This is the text in the box]
flowchart LR
id1[This is the text in the box]
二：流程图的方向
2.1:设置从上到下的方向(TD or TB).
flowchart TD
Start --> Stop
flowchart TD
Start --> Stop
2.1:设置从左到右的方向 (LR).
flowchart LR
Start --> Stop
flowchart LR
Start --> Stop
2.3:流程图的方向
- TB - top to bottom（上到下）
- TD - top-down/ same as top to bottom上到下）
- BT - bottom to top（下到上）
- RL - right to left（右到左）
- LR - left to right（左到右）
三：节点的形状
3.1:圆边的节点
flowchart LR
id1(This is the text in the box)
flowchart LR
id1(This is the text in the box)
3.2:足球场形状的节点
flowchart LR
id1([This is the text in the box])
flowchart LR
id1([This is the text in the box])
3.3:子程序（subroutine）节点
flowchart LR
id1[[This is the text in the box]]
flowchart LR
id1[[This is the text in the box]]
3.4:圆柱形节点
flowchart LR
id1[(Database)]
flowchart LR
id1[(Database)]
3.5:圆形节点
flowchart LR
id1((This is the text in the circle))
flowchart LR
id1((This is the text in the circle))
3.6:菱形节点
flowchart LR
id1{This is the text in the box}
flowchart LR
id1{This is the text in the box}
3.7 :六角形节点
flowchart LR
id1{{This is the text in the box}}
3.8:平行四边形
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
3.9:梯形节点
flowchart TD
A[/Christmas\]
B[\Go shopping/]
flowchart TD
A[/Christmas\]
B[\Go shopping/]
四：连接两个节点
提示：可以连接两个节点通过一条线，可以设置不同类型的线和带有文字的线
4.1:带箭头的连接线
flowchart LR
A-->B
C --- D
flowchart LR
A-->B
C --- D
4.2:直接连接
flowchart LR
A --- B
4.3:带文字的线
flowchart LR
A-- This is the text! ---B
OR
flowchart LR
A---|This is the text|B
flowchart LR
A-- This is the text! ---B
4.4:带箭头的文字线
flowchart LR
A-->|text|B
OR
flowchart LR
A-- text -->B
flowchart LR
A-- text -->B
4.5：虚线和带文字的虚线
flowchart LR;
A-.->B;
B-. text .-> C
flowchart LR;
A-.->B;
B-. text .-> C
4.6:加粗线
flowchart LR
A ==> B
C == text ==> D
flowchart LR
A ==> B
C == text ==> D
五：多条线
5.1:一行中（多个节点）声明多条线
flowchart LR
A -- text --> B -- text2 --> C
flowchart LR
A -- text --> B -- text2 --> C
flowchart LR
a --> b & c--> d
flowchart LR
a --> b & c--> d
5.2:在一行中描述一个依赖关系
flowchart TB
A & B--> C & D
flowchart TB
A & B--> C & D
备注：上图关系可以通过4行进行描述，一个建议-如果过度最求简洁可能会失效代码的可读性，不便于理解。
flowchart TB
A --> C
A --> D
B --> C
B --> D
新的箭头类型
flowchart LR
A --o B
B --x C
flowchart LR
A --o B
B --x C
多方向的箭头
flowchart LR
A o--o B
B <--> C
C x--x D
flowchart LR
A o--o B
B <--> C
C x--x D
加长线
In the following example, two extra dashes are added in the link from node B to node E, so that it spans two more ranks than regular links:
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];
对于虚线或粗线链接，添加的字符为等号或点，汇总如下表
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal | --- |
---- |
----- |
| Normal with arrow | --> |
---> |
----> |
| Thick | === |
==== |
===== |
| Thick with arrow | ==> |
===> |
====> |
| Dotted | -.- |
-..- |
-...- |
| Dotted with arrow | -.-> |
-..-> |
-...-> |
子图-语法
subgraph title
graph definition
end
举例：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
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 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 TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
结束语：基本的流程图语法已经介绍完毕，可能是因为Typora版本的原因，对子图的边和子图的方向不支持。
