所有流程图都由节点、几何形状和边、箭头或线组成。mermaid代码定义了这些节点和边的制作和交互方式。它还支持不同类型的箭头、多方向箭头以及与子图的链接。
flowchart LR idflowchart LR id
提示:id展示在方格中,即id即作为节点对象,也作为节点的名字。
默认节点对象就是节点的名称,但是我们也可以设置不同的名字
flowchart LR id1[This is the text in the box]flowchart LR id1[This is the text in the box]
TD
or TB
).flowchart TD Start --> Stopflowchart TD Start --> Stop
LR
).flowchart LR Start --> Stopflowchart LR Start --> Stop
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 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 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 circle))
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/] 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\]
flowchart TD A[/Christmas\] B[\Go shopping/]flowchart TD A[/Christmas\] B[\Go shopping/]
提示:可以连接两个节点通过一条线,可以设置不同类型的线和带有文字的线
flowchart LR A-->B C --- Dflowchart LR A-->B C --- D
flowchart LR A --- B
flowchart LR A-- This is the text! ---B OR flowchart LR A---|This is the text|Bflowchart LR A-- This is the text! ---B
flowchart LR A-->|text|B OR flowchart LR A-- text -->Bflowchart LR A-- text -->B
flowchart LR; A-.->B; B-. text .-> Cflowchart LR; A-.->B; B-. text .-> C
flowchart LR A ==> B C == text ==> Dflowchart LR A ==> B C == text ==> D
flowchart LR A -- text --> B -- text2 --> Cflowchart LR A -- text --> B -- text2 --> C
flowchart LR a --> b & c--> dflowchart LR a --> b & c--> d
flowchart TB A & B--> C & Dflowchart TB A & B--> C & D
备注:上图关系可以通过4行进行描述,一个建议-如果过度最求简洁可能会失效代码的可读性,不便于理解。
flowchart TB A --> C A --> D B --> C B --> D
flowchart LR A --o B B --x Cflowchart LR A --o B B --x C
flowchart LR A o--o B B <--> C C x--x Dflowchart 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 endflowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
flowchart TB c1-->a2 subgraph ide1 [one] a1-->a2 endflowchart 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 --> c2flowchart 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版本的原因,对子图的边和子图的方向不支持。
参考:https://mermaid-js.github.io/mermaid/#/flowchart