介绍

Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。

语法

流程图

所有流程图均由节点、几何形状和边、箭头或线组成

定义流程图的方向

  • LR——从左到右

    1
    2
    flowchart LR
        Start --> Stop

  • TB——从上到下

    1
    2
    flowchart TB	
        Start --> Stop
  • TD - 自上而下/与TB相同 
    1
    2
    flowchart TD	
        Start --> Stop

节点形状

  • 圆角矩形节点

    1
    2
    flowchart LR
        id1(This is the text in the box)

  • 体育场形节点

    1
    2
    flowchart LR
        id1([This is the text in the box])

  • 子程序形状的节点

    1
    2
    flowchart LR
        id1[[This is the text in the box]]

  • 圆柱形节点

    1
    2
    flowchart LR
        id1[(Database)]

  • 圆圈形式的节点

    1
    2
    flowchart LR
        id1((This is the text in the circle))

  • 不对称形状的节点

    1
    2
    flowchart LR
        id1>This is the text in the box]

  • 菱形

    1
    2
    3
    flowchart LR
        id1{This is the text in the box}

  • 平行四边形

    1
    2
    flowchart TD
        id1[\This is the text in the box\]

  • 平行四边形 （反向）

    1
    2
    flowchart TD
        id1[/This is the text in the box/]

  • 梯形

    1
    2
    flowchart TD
        A[/Christmas\]

  • 梯形（反向）

    1
    2
    flowchart TD
        B[\Go shopping/]

节点之间的链接

  • 基本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    	
    flowchart LR
        A-->B
        C--->D
        E --- F
        G-- This is the text! ---H
        I---|This is the text|J
        K-- text -->L
        M-.->N;
        O-. text .-> P
        Q ==> R
        S == text ==> T

​

  • 其他用法

    1
    2
    3
    4
    5
    6
    flowchart LR
       A -- text --> B -- text2 --> C
       a --> b & c--> d
       E & F--> G & H
       I --o J
       K --x L
    1
    2
    3
    4
    5
    6
    flowchart TD
        A[Start] --> B{Is it?}
        B -->|Yes| C[OK]
        C --> D[Rethink]
        D --> B
        B ---->|No| E[End]