技术文档

Appearance

On this page

Mermaid的样式 ​

流程图 ​

定义流程图方向 ​

先定义图向的方向如下图所示: ​

用词 flowchart x;含义
TB从上到下
BT从下到上
LR从左到右
RL从右到左

1. 从上到下 ​

js
flowchart TB
    A --> B
flowchart TB
    A --> B
null

2. 从下到上 ​

js
flowchart BT
    A --> B
flowchart BT
    A --> B
null

3. 从左到右 ​

js
flowchart LR
    A --> B
flowchart LR
    A --> B
null

4. 从右到左 ​

js
flowchart RL
    A --> B
flowchart RL
    A --> B
null

定义节点的样式 ​

节点之间的连线: ​

节点1 ​

js
flowchart LR
    id1(This is the text in the box)
flowchart LR
    id1(This is the text in the box)
null

节点2 ​

js
flowchart LR
    id1([one])
    id2(two)
    id1-->id2
flowchart LR
    id1([one])
    id2(two)
    id1-->id2
null

节点3 ​

js
flowchart LR
    id1[[This is the text in the box]]
flowchart LR
    id1[[This is the text in the box]]
null

节点4 ​

js
flowchart LR
    id1[(Database)]
flowchart LR
    id1[(Database)]
null

节点5 ​

js
flowchart LR
    id1((This is the text in the circle))
flowchart LR
    id1((This is the text in the circle))
null

节点6 ​

js
flowchart LR
    id1>This is the text in the box]
flowchart LR
    id1>This is the text in the box]
null

节点7 ​

js
flowchart LR
    id1{This is the text in the box}
flowchart LR
    id1{This is the text in the box}
null

节点8 ​

js
flowchart LR
    id1{{This is the text in the box}}
flowchart LR
    id1{{This is the text in the box}}
null

节点9 ​

js
flowchart RL
    id1[/This is the text in the box/]
flowchart RL
    id1[/This is the text in the box/]
null

节点10 ​

js
flowchart RL
    id1[\This is the text in the box\]
flowchart RL
    id1[\This is the text in the box\]
null

节点11 ​

js
flowchart RL
    A[/Christmas\]
flowchart RL
    A[/Christmas\]
null

节点12 ​

js
flowchart RL
    A[/Christmas\]
flowchart RL
    A[/Christmas\]
null

节点13 ​

js
flowchart RL
    B[\Go shopping/]
flowchart RL
    B[\Go shopping/]
null

节点14 ​

js
flowchart RL
    id1(((This is the text in the circle)))
flowchart RL
    id1(((This is the text in the circle)))
null

定义节点的连线样式 ​

节点之间的连线: ​

箭头含义
>添加尾部箭头
-不添加尾部箭头
--单线
--text--单线加文字
==粗线
==text==粗线加文字
-.-虚线
-.text.-虚线加文字
null

带箭头点与点连接样式 ​

样式1 ​

js
flowchart LR
    A-->|text|B
flowchart LR
    A-->|text|B
null

样式2 ​

js
flowchart LR
    A-- text -->B
flowchart LR
    A-- text -->B
null

样式3 ​

js
flowchart LR;
   A-.->B;
flowchart LR;
   A-.->B;
null

样式4 ​

js
flowchart LR
   A-. text .-> B
flowchart LR
   A-. text .-> B
null

样式5 ​

js
flowchart LR
   A ==> B
flowchart LR
   A ==> B
null

样式6 ​

js
flowchart LR
   A == text ==> B
flowchart LR
   A == text ==> B
null

样式7 ​

js
flowchart LR
   A -- text --> B -- text2 --> C
flowchart LR
   A -- text --> B -- text2 --> C
null

样式8 ​

js
flowchart LR
   a --> b & c--> d
flowchart LR
   a --> b & c--> d
null

样式9 ​

js
flowchart TB
    A & B--> C & D
flowchart TB
    A & B--> C & D
null

样式10 ​

js
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
null

样式11 ​

js
flowchart LR
    A --o B
    B --x C
flowchart LR
    A --o B
    B --x C
null

样式12 ​

js
flowchart LR
    A o--o B
    B <--> C
    C x--x D
flowchart LR
    A o--o B
    B <--> C
    C x--x D
null

样式13 ​

js
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]
null

样式14 ​

js
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]
null

子图样式 ​

子图语法样式:

subgraph title
    graph definition
end
subgraph title
    graph definition
end

子图样式1 ​

js
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
null

子图样式2 ​

js
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
null

子图样式3 ​

js
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
null

Copyright © 2022-2023 Richard Wang