Markdown流程图--基础语法

2024-02-05 21:50:16

一：基础语法--流程图

所有流程图都由节点、几何形状和边、箭头或线组成。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版本的原因，对子图的边和子图的方向不支持。

参考：https://mermaid-js.github.io/mermaid/#/flowchart

码农公寓