PasseRR

xie__hai@sina.com

Mermaid之流程图(flowchart)

07 Dec 2021 » md, others

流程图

流程图是对过程、算法、流程的一种图像表示,在技术设计、交流及商业简报等领域有广泛的应用。 通常用一些图框来表示各种类型的操作,在框内写出各个步骤,然后用带箭头的线把它们连接起来, 以表示执行的先后顺序。用图形表示算法,直观形象,易于理解。有时候也被称之为输入-输出图。 顾名思义,就是用来直观地描述一个工作过程的具体步骤。这种过程既可以是生产线上的工艺流程, 也可以是完成一项任务所必需的管理过程。

mermaid flowchart文档

mermaid关键字flowchart

图例方向

关键字描述
TBtop to bottom, 从顶到底
TDtop-down, 同TB
BTbottom to top, 从底到顶
RLright to left, 从右到左
LRleft to right, 从左到右

节点形状

形状效果
(圆角)

flowchart LR
id1(圆角)

([圆边])

flowchart LR
id1([圆边])

[[子程序]]

flowchart LR
id1[[子程序]]

((圆形))

flowchart LR
id1((圆形))

[(圆柱体)]

flowchart LR
id1[(圆柱体)]

>不对称的]

flowchart LR
id1>不对称的]

{菱形}

flowchart LR
id1{菱形}

{{六边形}}

flowchart LR
id1{{六边形}}

[/平行四边形/]

flowchart LR
id1[/平行四边形/]

[/梯形\]

flowchart LR
id1[/梯形\]

连接

连接符号

连接代码效果
--直线---

flowchart LR
A --- B
C --直线--- D
E ---|直线| F


flowchart LR
A --- B
C --直线--- D
E ---|直线| F

--箭头直线-->

flowchart LR
A --> B
C --箭头直线--> D
E -->|箭头直线| F


flowchart LR
A --> B
C --箭头直线--> D
E -->|箭头直线| F

==粗直线===

flowchart LR
A === B
C ==直线=== D
E ===|直线| F


flowchart LR
A === B
C ==直线=== D
E ===|直线| F

==粗箭头直线==>

flowchart LR
A ==> B
C ==粗箭头直线==> D
E ==>|粗箭头直线| F


flowchart LR
A ==> B
C ==粗箭头直线==> D
E ==>|粗箭头直线| F

-.虚线.-

flowchart LR
A -.- B
C -.虚线.- D
E -.-|虚线| F


flowchart LR
A -.- B
C -.虚线.- D
E -.-|虚线| F

-.箭头虚线.->

flowchart LR
A -.-> B
C -.箭头虚线.-> D
E -.->|箭头虚线| F


flowchart LR
A -.-> B
C -.箭头虚线.-> D
E -.->|箭头虚线| F

连接长度

连接类型长度1长度2长度3
直线------------
箭头直线-->--->---->
粗直线============
粗箭头直线==>===>====>
虚线-.--..--...-
箭头虚线-.->-..->-...->

连接链

连续连接

flowchart LR
A --- B --文字--> C -.- D -.文字.- E === F ==文字==> G
flowchart LR
A --- B --文字--> C -.- D -.文字.- E === F ==文字==> G

相同线连接

flowchart LR
a --> b & c--> d
flowchart LR
a --> b & c--> d
flowchart TD
A & B--> C & D
flowchart TD
A & B--> C & D

超链接

flowchart LR
    A-->B
    click A "https://mermaid-js.github.io/" _blank
    click B "https://www.xiehai.win" _blank
flowchart LR
    A-->B
    click A "https://mermaid-js.github.io/" _blank
    click B "https://www.xiehai.win" _blank

子图

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