1. Overview
测试环境: Typora
- Mermaid可以通过解析类Markdown的文本语法来实现图表的创建和动态修改。
- 支持的图表类型
- 流程图
graphorflowchart - 时序图
sequenceDiagram - 甘特图
gantt - 类图
classDiagram - 状态图
stateDiagram - 饼图
pie - 旅程图
journey
- 流程图
2. 图表实例
2.1. 流程图
方向
%% 我是注释, 不会显示
graph TB
上 --> 下
graph BT
下 --> 上
graph LR
左 --> 右
graph RL
右 --> 左
形状
graph TB
默认方形 ---
id1[方形] ---
id2(圆边矩形) ---
id3([体育场形]) ---
id4[[子程序形]] ---
id5[(圆柱形)] ---
id6((圆形)) ---
id7{菱形} ---
id8{{六角形}} ---
id9[/平行四边形/] ---
id10[\反向平行四边形\] ---
id11[/梯形\] ---
id12[\反向梯形/]
箭头
graph LR
S1[实线] --> E1[实线] --Msg--> E12[实线]
S2[粗实线] ==> E2[粗实线] ==Msg==> E21[粗实线]
S3[虚线] -.-> E3[虚线] -.Msg.-> E31[虚线]
S4[实线] --- E4[粗实线] === E41[虚线] -.- E42[ ]
多重链
graph LR
A --> B & C --> D
F & G --> H & I
子图
将graph改为flowchart
flowchart
A --> B
subgraph First
A1 --> B1
end
subgraph Second
A2 --> B2
end
描边
flowchart LR
A:::red & B:::green --> C:::blue
classDef red stroke:#f00
classDef green stroke:#0f0
classDef blue stroke:#00f
实例
graph LR
1-1 --> 2-1
1-2 --> |Text| 2-2
1-3 -.Text.-> 2-3
1-4(1-4) --> 2-4(2-4)
1-5((1-5)) --> 2-5((2-5))
1-6{1-6} -..-> 2-6{2-6}
2.2. 时序图
实例
sequenceDiagram
A ->> B: Hello, B, have you finished ?
loop Check
B ->> B: Have I finished ?
end
Note right of B: Rational thougths
B -->> A: Of course I did.
B ->> A: How about you ?
A -->> B: Me too.
2.3. 甘特图
实例
gantt
title 计划
dateFormat YYYY-MM-DD
section Section1
Completed :done, des1, 2023-04-01, 2023-04-03
Active :active, des2, 2023-04-02, 1d
Parallel 1 :des3, after des1, 1d
Parallel 2 :des4, after des1, 1d
Parallel 3 :des5, after des3, 1d
Parallel 4 :des6, after des4, 1d
2.4. 类图
实例
classDiagram
Base <|-- Derived1
Base <|-- Derived2: With Meg
Base -- Derived3
Base <-- Derived4
Base *-- Derived5
class Base {
<<Interface>>
+int public_var_
-int private_var_
+void getPublicMethod()
-void getPrivateMethod()
}
class Derived1 {
<<Inherited>>
-dobule private_d1_var_
+void setPrivateD1Var()
}
class Derived2 {
<<Inherited>>
-dobule private_d2_var_
+void setPrivateD2Var()
}
2.5. 状态图
实例
stateDiagram
[*] --> 登陆状态
登陆状态 --> 登陆失败
登陆失败 --> [*]
登陆状态 --> 登陆成功
登陆成功 --> 进入系统
进入系统 --> 浏览信息
浏览信息 --> 退出系统
退出系统 --> [*]
2.6. 饼图
实例
pie
title Fruit
"Apple" : 40
"Orange": 30.55
"Banana": 30
"Peach" : 20
"Pear" : 10
2.7. 用户心情旅程图
journey
title My Working Day
section Go to work
Get up: 5: Me
Go upstairs: 3: Me
Do Work: 1: Me, Dog
section Go home
Sit up: 1: Me
Go off Work: 3: Me
Get home: 5: Me
