mermaid图详解（一）流程图｜超详细的代码解释

本文参考Github项目

• https://github.com/mermaid-js/mermaid/

前言

那么这里博主先安利一些干货满满的专栏了！

首先是博主的高质量博客的汇总，这个专栏里面的博客，都是博主最最用心写的一部分，干货满满，希望对大家有帮助。

• 高质量博客汇总

然后就是博主最近最花时间的一个专栏《mermaid图详解》希望大家多多关注！

• http://t.csdnimg.cn/pX1jB

---

Mermaid流程图

1. 节点

1.1 默认的节点

flowchart LR
	id

id

也可以在框中设置与id不同的文本。如果多次这样做，则为将使用的节点找到的最后一个文本。此外，如果以后为节点定义边，则可以省略文本定义。渲染长方体时将使用先前定义的长方体。

1.2 节点带文字

flowchart LR
	id1[This is the text ]
	%% id1-->id1

flowchart LR
	id1[This is the text ]
	%% id1-->id1

我们可以设置文字的格式，通过把文字用"``"包括起来就行了，然后就是.md的格式。

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

`This **is** _Markdown_` `Line1 Line 2 Line 3`

1.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

flowchart LR
    Start --> Stop

Start

Stop

1.4 节点的形状

1.4.1 圆角

flowchart LR
	id1(hello world)

hello world

1.4.2 更圆的圆角

flowchart LR
	id1([hello world])

hello world

1.4.3 子例程形状中的节点

flowchart LR
    id1[[hello linux]]

hello linux

1.4.4 圆柱体形状

flowchart LR
    id1[(mysql)]

mysql

1.4.5 圆形

flowchart LR
    id1((I am in a circle))

I am in a circle

1.4.6 不对称形状的节点

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

This is the text in the box

1.4.7 菱形节点

flowchart LR
    id1{hello docker}

hello docker

1.4.8 六边形节点

This is the text in the box

1.4.9 平行四边形节点

flowchart TD
    id1[/This is the text in the box/]
    id2[\This is the text in the box\]

This is the text in the box

This is the text in the box

1.4.10 梯形节点

flowchart TD
    A[/Christmas\]
    B[\Go shopping/]

Trapezoid node

Go shopping

1.4.11 双重圆形

flowchart TD
    id1(((This is the text in the circle)))

flowchart TD
    id1(((This is the text in the circle)))

2. 节点之间的连接

2.1 带箭头和不带箭头的连接

flowchart LR
    A-->B
    B---C

A

B

C

2.2 连接上的文字

带箭头不带箭头是一样的。

flowchart LR
    A---|连接上的文字|B  
    %% ||包裹可以要也可以不要
    A-->|text|B

连接上的文字

text

A

B

3.3 虚线连接

flowchart LR
   A-.->B;
   A-.->|yes|B;

yes

A

B

2.4 粗线连接

flowchart LR
   A ==> B

yes

A

B

2.5 隐形连接

在某些情况下，如果要更改节点的默认位置，这可能是一个有用的工具。

flowchart LR
    A ~~~ B

flowchart LR
    A ~~~ B

2.6 连接链

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

a

b

c

d

A

B

C

D

2.7 其它的一些箭头形式

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

A

B

C

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

A

B

C

D

2.8 链接的长度

流程图中的每个节点最终都会根据其链接到的节点分配给渲染图中的一个级别，即垂直或水平级别（取决于流程图的方向）。默认情况下，链接可以跨越任意数量的列，但您可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接更长。

在以下示例中，在从节点B到节点E的链接中添加了两个额外的破折号，因此它比常规链接多跨两个列。

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Yes

No

Start

Is it?

OK

Rethink

End

3. 子图

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

three

one

c2

c1

two

b2

b1

a2

a1

当然也还可以为子图设置显式 id。

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

one

a2

a1

c1

子图和子图之间也可以有关系的。

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

three

one

c2

c1

two

b2

b1

a2

a1

使用 graphtype 流程图，您可以使用方向语句来设置子图渲染的方向，如本例所示。

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

TOP

B1

f1

i1

B2

f2

i2

A

B

如果任何子图的节点链接到外部，则子图方向将被忽略。 相反，子图将继承父图的方向。

flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is mantained
    outside --> subgraph1
    %% Link *within* subgraph2:
    %% subgraph2 inherits the direction of the top-level graph (LR)
    outside ---> top2

subgraph2

bottom

top

subgraph1

bottom

top

outside