在Markdown中使用mermaid画图之流程图
流程图
流程图由流程图方向、节点、节点形状、节点间关系构成
声明流程图
首先将代码块的解释器类型定义为mermaid:
···mermaid
flowchart LR //flowchart 声明为流程图、LR确定流程图从左至右的方向
id1[test1] //id--创建出一个节点、括号内为该节点显示的内容
id2[test2]
id3[test3]
···
流程图的方向有以下几种选择：
- TB - 从上到下
- TD - 自上而下/与自上而下相同
- BT - 自下而上
- RL - 从右到左
- LR - 从左到右
创建节点&&节点形状
创建节点如上方代码块内容所示，仅需在流程图的声明下方使用id即可创建。
节点的形状在流程图中的声明样式有点类似于象形文字的感觉，所见即所得，例如长方形节点的形状是在id后面跟上[ ]，圆形倒角的长方形为( )，具体类型与使用方法如下所示：
- id( )
- id[ ]
- id[[ ]]
- id[( )]
- id(( ))
- id> ]
- id
- id{{ }}
- id[/ /]
- id[\ ]
- id[/ ]
- id[\ /]
节点间关系
节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。
在mermaid中有两种写法：
1.声明节点时顺带声明节点间关系，如：id1-->id2
2.单独声明节点与节点间关系，逻辑更清晰，如：id1\n id2\n id1-->id2
以下是上方的效果的书写格式
flowchart LR
id1[test1]
id2[test2]
id1 --> id2
A --> B
节点间关系的样式
- 带箭头的链接：A-->B
- 无箭头：A---B
- 箭头类型：--> --o --x
- 多向箭头：o--o <--> x--x
- 连接上带文字：A--test---B或A---|text|B
- 带箭头的链接带文字：A-->|text|B或A--text-->B
- 虚线链接：A-.->B
- 带文本的虚线链接：A-. text .->B
- 加粗的链接：A==text==>B
- 多重链接：A--text-->B--text-->C
- 简写多重关系：A-->B&C-->D 含义：A到B到D以及A到C到D
- A&B-->C&D:A与B分别到C与D
链接的长度
连接的长度由破折号的个数决定，当连接上带文字时，多出来的破折号需在文字右侧(因为添加在左侧数量超过两个破折号后会被认为成一个节点)
上方效果的书写格式：
flowchart LR
A--YES-->D[list]
C--YES------>E[list]
对于虚线链接或加粗的链接，要添加的字符为等号或点，如下表所示：
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 普通的 | --- | ---- | ----- |
| 正常带箭头 | --> | ---> | ----> |
| 加粗带箭头 | ==> | ===> | ====> |
| 虚线 | -.- | -..- | -...- |
| 虚线箭头 | -.-> | -..-> | -...-> |
更复杂的节点描述
如果你想写出更详细的内容，又怕描述中包含特殊关键字，可以像shell一样使用双引号包裹描述，双引号的内容忽略解释。
还是可以使用转义字符，具体如下所示：
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
给出的数字以 10 为底，因此#可以编码为#35;. 还支持使用 HTML 字符名称。
子图(节点间嵌套)
书写格式(子图与子图间可以相互嵌套)：
subgraph title //子图的名称
direction LR //子图的方向
graph definition //节点间链接
end
例：
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
one --> two
three --> two
two --> c2
注释
可以在流程图中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以%%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何流语法
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
美化节点
可以对节点应用特定样式，例如较粗的边框或不同的背景颜色。
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
比每次都定义样式更方便的是定义一个样式类，并将该类附加到应该具有不同外观的节点上。
类定义如下例所示：
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
将类附加到节点按以下方式完成：
class nodeId1 className;
也可以在一个语句中将一个类附加到节点列表：
class nodeId1,nodeId2 className;
添加类的更短形式是使用运算符将类名附加到节点:::，如下所示：
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
美化链接样式
可以设置普通的链接样式。例如，
linkStyle id3 stroke:#ff3,stroke-width:4px,color:red;
如果默认方法不能满足需要，则可以设置用于项目之间线条的曲线类型。可用的曲线样式包括basis、bump、linear、monotoneX、monotoneY、natural、step、stepAfter和stepBefore。
在此示例中，从左到右的图形使用stepBefore曲线样式：
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
有关可用曲线的完整列表，包括自定义曲线的说明，请参阅d3-shape项目中的Shapes文档 。
参考链接:
https://www.iodraw.com/codechart/tutorial/zh/flowchart.html
http://mermaid.js.org/intro/