在使用markdown写文章的时候经常需要添加一些流程图、时序图等，markdown中画流程图可以使用flowchart，时序图可以使用sequence画图，另外可以使用mermaid进行绘图，mermaid是一个用户画流程图、状态图、时序图、甘特图等多种图的库，使用JS进行本地渲染。下面具体介绍一下mermaid的使用。
流程图
流程图方向定义
下面这段代码声明了一个流程图和流程图的方向顺序。定义的方向是自上而下。
1
2
|
graph TB
Start --> Stop
|
可以使用的方向有以下几种
- TB - Top Bottom 自上而下
- BT - Bottom Top 自下而上
- RL - Right Left 自右向左
- LR - Left Right 自左向右
- TD - 与TB相同，Top Down 自上而下
节点形状定义
| 节点形状 |
表示 |
描述 |
| 默认方形节点 |
id |
默认节点是方形节点，id直接作为描述显示在方形节点中 |
| 带自定义文本的方形节点 |
id[name] |
id为节点的标示，name为节点上的描述文字 |
| 圆角节点 |
id(name) |
id为节点标示，name显示在圆角节点中 |
| 原形节点 |
id((name)) |
id为节点标示，name显示在圆形节点中 |
| 不对称节点 |
id>name] |
目前只有左边的图形可用，反过来的镜像图形不可用，后面的版本可能会发生变化 |
| 菱形节点 |
id{name} |
id为节点标示，name显示在菱形节点中 |
下面是一个示例
1
2
3
4
5
6
7
|
graph LR
默认节点
id1[自定义文本]
id2(圆角节点)
id3((圆形节点))
id4>不对称节点]
id5{菱形节点}
|
节点连线定义
节点之间可以使用连接线连接。可以使用多种不同的连接线连接两个图形。
连线可以分为实线和虚线，带箭头不带箭头，细线和粗线，带文字和不带文字的区别，下面我们一一介绍
箭头在mermaid中以>结束，不带箭头以-结束。
实线在mermaid中以--表示，虚线以-.-表示
细线在mermaid中以-表示，粗线以=表示
连线上带有文字有两种表达方式，一种是在连线中间加上文字--文字-->，一种是在连线后用双竖线表示---|文字|
下面列举几个具体的例子
1
2
3
4
5
6
7
8
|
graph LR
A --- B
B --> C
C -.- D
D -.-> E
E ==> F
F -- text --> G
G -->|text|H
|
特殊字符
如果描述文字中有关键字字符，可以使用引号来将它引起来，如：
1
2
|
graph LR
id1["This is the (text) in box"]
|
在节点描述等的定义中也可以使用转义字符
1
2
|
graph LR
A["A double quote: #quot;"] --> B["A dec char:#9829;"]
|
子流程图
子流程图的语法定义如下：
1
2
3
|
subgraph title
graph definition
end
|
下面是一个示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
graph TB
c1 --> a2
subgraph one
a1 --> a2
end
subgraph two
b1 --> b2
end
subgraph three
c1 --> c2
end
|
对fontawesome的支持
在定义流程图中，可以添加fontawesome定义的图标，通过fa:#icon class name#来访问
1
2
3
4
5
|
graph TB
B["fa:fa-twitter for peace"]
B --> C[fa:fa-ban forbidden]
B --> D[fa:fa-spinner]
B --> E[A fa:fa-camera-retro perhaps?]
|
其他语法说明
- 在定义图形时，语句现在也可以不使用分号作为结束。在发布0.2.16版本以后，语句结束时需要添加分号只是可选的。
- 节点和链接之间允许有单个空格。但是，节点及其文本和链接及其文本之间不应该有任何空格。这个新的特性也是可选的，是为了提高可读性而引入的。
时序图
参与者
参与者可以隐式定义也可以显示定义。在隐式定义时参与者或者Actor按照图源文本中的外观顺序呈现。有时候可能希望以与消息出现顺序不同的顺序显示参与者。这时候可以通过执行显示定义来指定Actors的外观显示顺序。
隐式定义：
1
2
3
|
sequenceDiagram
Alice ->> John: Hello John, how are you?
John -->> Alice: Great!
|
显示定义：
1
2
3
4
5
|
sequenceDiagram
participant John
participant Alice
Alice ->> John: Hello John, how are you?
John -->> Alice: Great!
|
参与者可以有一个方便的标识符和一个描述性标签。
1
2
3
4
5
|
sequenceDiagram
participant A as Alice
participant J as John
A ->> J: Hello John, how are you?
J -->> A: Great!
|
消息
消息可以使用实线或者虚线来表示。具体表示方式为
[Actor][Arrow][Actor]:Message text
目前mermaid支持六种不同方式的连线箭头
| 类型 |
描述 |
| -> |
没有箭头的实线 |
| –> |
没有箭头的虚线 |
| -» |
有箭头的实线 |
| –» |
有箭头的虚线 |
| -x |
带叉号的实线（异步） |
| –x |
带叉号的虚线（异步） |
1
2
3
4
5
6
7
|
sequenceDiagram
A -> B: 没有箭头的实线
A --> B: 没有箭头的虚线
A ->> B: 有箭头的实线
A -->> B: 有箭头的虚线
A -x B: 带叉号的实线（异步）
A --x B: 带叉号的虚线（异步）
|
对象激活
在时序图中可以激活和去激活一个参与者，激活/去激活使用各自单独的声明
1
2
3
4
5
|
sequenceDiagram
Alice ->> John: Hello John, how are you?
activate John
John -->> Alice: Greate!
deactivate John
|
也可以使用在消息箭头后追加+/-的方式来激活去激活对象
1
2
3
|
sequenceDiagram
Alice ->> +John: Hello John, how are you?
John --> -Alice: Greate!
|
激活去激活在同一个Actor上可以叠加的
1
2
3
4
5
|
sequenceDiagram
Alice ->> +John: Hello John, how are you?
Alice ->> +John: John, can you hear me?
John -->> -Alice: Hi Alice, I can hear you!
John -->> -Alice: I feel greate!
|
Notes注释
可以为一个时序图图形添加注释，添加的方式为：Note [right of | left of | over] [Actor]: Text in note content
1
2
3
|
sequenceDiagram
participant John
Note right of John: Text in note
|
也可以创建一个横跨两个参与者的注释
1
2
3
|
sequenceDiagram
Alice -> John: Hello John, how are you
Note over Alice,John: A typical interaction
|
循环
循环使用的方式为：
1
2
3
|
loop Loop text
... statements ...
end
|
下面是一个示例
1
2
3
4
5
|
sequenceDiagram
Alice -> John: Hello John, how are you?
loop Every minute
John --> Alice: Great!
end
|
条件判断Alt与Opt
Alt使用方式
1
2
3
4
5
|
alt Describing text
... statements ...
else
... statements ...
end
|
Opt使用方式
1
2
3
|
opt Describing text
... statemetns ...
end
|
1
2
3
4
5
6
7
8
9
10
11
|
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
alt is sick
Bob ->> Alice: Not so good :（
else is well
Bob ->> Alice: Feeling fresh like a daisy
end
opt Extra response
Bob ->> Alice: Thanks for asking
end
|