markdown基础用法: 参考MarkDown基础,请自行确认使用的markdown渲染是否支持mermaid渲染图形
一、整体结构
选项 |
描述 |
类型及相关配置 |
声明图形类型及其声明,例如mermaid TB; |
图形内容 |
相关的图形内容文本 |
引入流程图的方式各有不同,原生使用 ```mermaid
方式引入,而本站使用基于LoveIt主题的hugo引入方式为模板
二、流程图flowchart
2.1 基础
1
2
|
flowchart [流程图方向]
[流程图内容]
|
核心考虑内容:流程图方向、节点内容、节点形状和节点连接线
2.2 流程图方向
标志 |
含义 |
解释 |
TB |
top bottom |
从上到下 |
BT |
bottom top |
从下到上 |
RL |
right left |
从右到左 |
LR |
left right |
从左到右 |
TD |
|
等同于TB |
2.3 节点内容
几何图形节点是流程图中的核心元素,其要素包括形状和内容。在 Mermaid 语法中,不加任何修饰的文字内容会被渲染成几何图形节点。
1
2
|
flowchart LR
A[描述] --> B
|
2.4 节点形状
使用不同的符号标识不同形状
符号 |
形状 |
[] |
矩形 |
() |
圆角矩形 |
>] |
不对称矩形 |
{} |
棱形 |
(()) |
圆形 |
1
2
3
4
5
6
|
flowchart TD
a1[带文本矩形]
a2(带文本圆角矩形)
a3>带文本不对称矩形]
b1{带文本菱形}
c1((带文本圆形))
|
2.5 节点连接线
连接线 |
描述 |
--- |
实现 |
=== |
加粗实现 |
-.- |
虚号 |
--> |
带箭头实现 |
==> |
带箭头加粗实线 |
-.-> |
带箭头虚线 |
--yes-- |
实线备注 |
==yes== |
加粗实线备注 |
-.yes.- |
虚线备注 |
--yes--> |
带箭头实线备注 |
==yes==> |
带箭头加粗实线备注 |
-.yes.-> |
带箭头虚线备注 |
节点可任意指向一个或多个,每行声明一个节点指向
2.6 子视图
通过在节点内容中使用subgraph
声明子流程图,该子流程图可视为一个普通节点使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
三、时序图
时序图样例,官方文档:Sequence Diagram
1
2
3
4
5
6
7
8
9
10
11
|
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
|
四、甘特图
甘特图样例,官方文档:Gantt
1
2
3
4
5
6
7
8
9
10
|
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
|
五、类图
官方文档:Class Diagram
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
|
六、其他
其他更多的图形类型请参考mermaid官网 mermaid.js.org
参考资料