mermaid图详解(一)流程图|超详细的代码解释
本文参考Github项目
前言
那么这里博主先安利一些干货满满的专栏了!
首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助。
然后就是博主最近最花时间的一个专栏《mermaid图详解》希望大家多多关注!
Mermaid流程图
1. 节点
1.1 默认的节点
flowchart LR
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
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
1.4 节点的形状
1.4.1 圆角
flowchart LR
id1(hello world)
1.4.2 更圆的圆角
flowchart LR
id1([hello world])
1.4.3 子例程形状中的节点
flowchart LR
id1[[hello linux]]
1.4.4 圆柱体形状
flowchart LR
id1[(mysql)]
1.4.5 圆形
flowchart LR
id1((I am in a circle))
1.4.6 不对称形状的节点
flowchart LR
id1>This is the text in the box]
1.4.7 菱形节点
flowchart LR
id1{hello docker}
1.4.8 六边形节点
1.4.9 平行四边形节点
flowchart TD
id1[/This is the text in the box/]
id2[\This is the text in the box\]
1.4.10 梯形节点
flowchart TD
A[/Christmas\]
B[\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
2.2 连接上的文字
带箭头不带箭头是一样的。
flowchart LR
A---|连接上的文字|B
%% ||包裹可以要也可以不要
A-->|text|B
3.3 虚线连接
flowchart LR
A-.->B;
A-.->|yes|B;
2.4 粗线连接
flowchart LR
A ==> B
2.5 隐形连接
在某些情况下,如果要更改节点的默认位置,这可能是一个有用的工具。
flowchart LR
A ~~~ B
flowchart LR
A ~~~ B
2.6 连接链
flowchart LR
a --> b & c--> d
A & B--> C & D
2.7 其它的一些箭头形式
flowchart LR
A --o B
B --x C
flowchart LR
A o--o B
B <--> C
C x--x 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]
3. 子图
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 one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
使用 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
如果任何子图的节点链接到外部,则子图方向将被忽略。 相反,子图将继承父图的方向。
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