一:基础语法--流程图

​ 所有流程图都由节点、几何形状和边、箭头或线组成。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

posted on 2021-09-13 22:23  爱我-中华  阅读(97)  评论(0编辑  收藏  举报