![2bd32c9df805acf79668365f68d7e84a.png](https://i-blog.csdnimg.cn/blog_migrate/24b21e644ebcefd66f72c1ab691be01e.png)
还在为文档中的各种图表而烦恼吗?还在苦逼的学习各种画图软件吗?还在反复调试各种图表的颜色吗?
现在,统统的这些都不需要了!!!你只需要掌握mermaid
,这些问题都可以全部解决。mermaid
是针对Markdown
语法而设计的一款用于在文档中产生精美图表的语言,直接使用简单的语法就可以画出美观的流程图、时序图、甘特图、饼图等一些列图表。废话不多说了,下面就来看一下它的强大之处。
1. 流程图
先来个示例看一下
![0a8f392e3db75f813b3539e6b92a094d.png](https://i-blog.csdnimg.cn/blog_migrate/487904713c88f0586180303b075972de.png)
1.1 节点
流程图的节点形状有矩形、圆角、圆柱、圆形、菱形、梯形、六边形、平行四边形等等,通过<>[]{}()
等符号进行控制。
graph TD
A[矩形] --> B(圆角) --> C{菱形}
D([This is the text in the box]) --> E[[带边框的矩形]] --> F[平行四边形]
G{{六边形}} --> H((圆形)) --> I[/平行四边形/]
J>非对称图形] --> K[/梯形] --> L[梯形/]
M[(圆柱形)]
![687a368c42b9cb6dff041f54e1946a64.png](https://i-blog.csdnimg.cn/blog_migrate/4267b7fa99d43eb254fb6984e7aa98a2.png)
1.2 连接
在流程图的连接中,有实线、虚线、带箭头、不带箭头、连接线加粗、箭头类型、连接线加文字等类别。
graph LR
A --> B
B ---|text| C
D -.- E
E -.text.-F
G ==> H
![61e3f9bdc8b1d40c38888d4c12ed3327.png](https://i-blog.csdnimg.cn/blog_migrate/cc56c55b1aa2f0b5cb6a19227ba05571.png)
flowchart LR
A <--> B
C o--o D
E x--x F
![dd2e52b6c8c4f21492f09c7de966ace1.png](https://i-blog.csdnimg.cn/blog_migrate/732d797a6a3e2603b75131e12339467b.png)
1.3 子图
可以在一个图中添加子图,使用下述命令
subgraph title
graph definition
end
例子
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
![4deec6126e8b64853917f75ca4765ff2.png](https://i-blog.csdnimg.cn/blog_migrate/dfd31a35dcdb334a80bcdc3647e92ed7.png)
1.4 方向
在流程图中,通过以下语句控制方向
graph TB % 从上到下
graph BT % 从下到上
graph LR % 从左到右
graph RL % 从右到左
1.5 样式配置
在graph
中可以通过style
关键字配置边框样式,包括填充颜色、边线颜色、边线实虚等等。可参考CSS
样式表。
graph LR
id1(Start)-->id2(Stop)
style id1 fill: #f9f, stroke: #333, stroke-width: 4px;
style id2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 5,5;
![13457abd90bedb34e6415376191b7423.png](https://i-blog.csdnimg.cn/blog_migrate/9df1768b77c8b0c907198d8cdaefe2ce.png)
同样,可以通过classDef
关键字对样式进行统一配置
graph LR
classDef default fill: #f9a, stroke: #333, stroke-width: 4px;
A(start) --> B(process1)
A(start) --> C(process2)
B(process1) --> D(Stop)
C(process2) --> D(stop)
![f32bad5effc3b58f6bb44ccb84f4d34f.png](https://i-blog.csdnimg.cn/blog_migrate/982c04b4158c223a6a5e5cf7a8a76e80.png)
2. 类图
同样先来一个示例
![ee12427d288b79ca51bc01cd04914105.png](https://i-blog.csdnimg.cn/blog_migrate/ef911c206e084d4c7bd217485e6efbfa.png)
类图是用来描述类属性、方法以及类指向问题的工具,通过类图可以直观的了解类有哪些属性、哪些方法,遵循怎样的关系(继承、组合......)。类图由三部分构成,顶部区域是类的名称、中间区域是类的属性、底部区域是类的方法。
2.1 类定义
定义一个类有三种方法,隐式定义、使用:
定义、使用{}
定义
%% 隐式定义
classDiagram
class Animal
Vehicle <|-- Car
%% 使用 : 定义
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
%% 使用{}定义
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount)
}
![03e2aeecf3d7e7a4b4d4ccf9be0f0d07.png](https://i-blog.csdnimg.cn/blog_migrate/66dfc1893b369382ddc45794a4c3645d.png)
2.2 类属性、方法
类的属性和方法通过判断()
是否存在加以区分
classDiagram
class BankAccount{
+String owner %% 属性
+BigDecimal balance
+deposit(amount) bool %% 方法 bool返回类型
+withdrawl(amount) %% 方法 参数为amount
}
![a3eb68cafdd56b303b70853e81414470.png](https://i-blog.csdnimg.cn/blog_migrate/3454ae590aee71c8846b94a48aa13b7b.png)
2.3 类间关系
类间关系有继承、实现、组合、依赖等,在类图中以连接形式的不同加以区分。
![8cca3250af2be5696baa79d14b4cdfa9.png](https://i-blog.csdnimg.cn/blog_migrate/3e2b96eb4262f803a4dd7cc1e146976a.png)
2.4 类注释
类注释使用<<>>
定义,注释放在尖括号中间,用于指示类的性质,有如下四种性质
类注释的定义方法有两种,单独定义或者与类定义一起放在嵌套结构{}
中
单独定义
classDiagram
class Shape
<<interface>> shape
嵌套定义
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
}
![fcb7adf659258cb542ce1a3d001b2bba.png](https://i-blog.csdnimg.cn/blog_migrate/91b8498c21c1b99cc4db0d4829499d57.png)
3. 状态图
在状态图中,[*]
表示起点和终点,不同的是,起点表现为实心圆,而终点则是同心圆,内圆为实心。初始状态只能有一个,而终止状态可以有多个。
示例
![3ce264478e8e33b775a138c724b1e442.png](https://i-blog.csdnimg.cn/blog_migrate/93f413e18adee072f67b566b5521e26f.png)
3.1 状态分流与合并
stateDiagram
state fork_state <<fork>>
state join_state <<join>>
[*] --> fork_state
fork_state --> state1
fork_state --> state2
fork_state --> state3
state3 --> [*]
state1 --> join_state
state2 --> join_state
join_state --> [*]
![40b9b56c699d33a5752a5ec5978ea857.png](https://i-blog.csdnimg.cn/blog_migrate/a41f6a6601cbb7720073c9b29758352e.png)
3.2 独立状态并行图
在一个系统中会存在多个状态图,其各自相互独立,并行运转,互不干扰。
stateDiagram
state Active {
state one {
[*] --> state1
state1 --> state2
state2 --> state1
--
[*] --> state3
state3 --> state4
state4 --> state3
}
state two {
[*] --> state1
state1 --> state2
state2 --> state1
--
[*] --> state3
state3 --> state4
state4 --> state3
}
}
![b89ef3d7e5ef3b0b6c4b39f10c591f67.png](https://i-blog.csdnimg.cn/blog_migrate/cb33788dd1898561e121638905ec1557.jpeg)
4. 饼图
pie
title 电影
"喜剧" : 38
"恐怖片" : 85
"动作片" : 100
"音乐剧" : 150
![ff1f8b34f613e3908cf54321c02f22d7.png](https://i-blog.csdnimg.cn/blog_migrate/b26f1337bebced942dcb77787498ba85.png)
5. 甘特图
甘特图用来用来组织一个大型项目的时间和任务,横轴表示时间节点,纵轴表示任务分布。
5.1 定义
dateFormat YYYY-MM-DD %% 声明时间表示方法
title 软件开发甘特图 %% 甘特图题目
section 设计 %% 任务类别
5.2 section
每一个section
可以包含多个子任务,一个子任务由状态、名称、时间来描述。
5.2.1 状态
%% 状态的表示方式
active % 活跃
done % 完成
crit % 关键阶段
5.2.2 名称
%% 名称
name1
name2
5.2.3 时间
%% 起始时间
2020-02-05 % 标准时间格式
after name1 % 在name1子任务完成之后立即开始
%% 截止时间
2020-02-09 % 标准时间格式
3d % 3 days
20h % 20 hours
5.3 示例
gantt
dateFormat YYYY-MM-DD
title XXX 2020上半年规划
section 专业学习
专业课 : active, name1, 2020-02-24, 2020-05-21
选修课 : done, name2, 2020-03-15, 2020-06-01
期末考试 : active, name3, after name2, 14d
section 夏令营
联系导师 : crit, name11, 2020-04-15, 2020-05-20
申请院校 : active, name22, after name11, 30d
清华大学 : active, name33, after name3, 1d
南开大学 : done, name44, 2020-07-01, 2020-07-10
中科院 : active, name55, 2020-07-20, 5d
section 公司实习
修改简历 : crit, name111, 2020-04-05, 10d
简历投递 : done, name222, after name111, 20d
电话面试 : crit, name333, 2020-05-26, 30d
未来任务 : active, after name333, 10d
![fe27816651c19a43c4f21006ab96a8c1.png](https://i-blog.csdnimg.cn/blog_migrate/4fcd992f1af4d9733026987bf23f3cbe.png)
6. 序列图
序列图一般用于网络处理,或者会话处理。
6.1 定义
sequenceDiagram % 声明序列图
participant P1 % 参与者P1
participant P2 % 参与者P2
6.2 activate
activate P1 % 表示P1正在处理中
6.3 循环
loop 循环条件
循环内容
end
6.4 分支
%% 分支(存在else)
alt 条件1
分支1
else 条件2
分支2
end
%% 分支(不存在else)
opt 条件描述
分支描述
end
6.5 连接线配置
6.6 标注配置
标注用来对连接线进行提示,语法如下:
Note 位置 of 参与者 : 标注文字
位置有三种,如下:
6.7 示例
sequenceDiagram
participant BOY
participant GIRL
loop 日常杀狗系列
BOY -->> GIRL : 早安呐
GIRL -->> BOY : 早哇,待会儿干嘛?
activate BOY
Note left of BOY : 思考ing...
alt 不知道
BOY -->> GIRL : 没啥想干的...
else 出去玩
BOY -->> GIRL : 你快去吃饭吧,吃完我们出去玩耍
end
opt 吃
GIRL -->> BOY : 好的呢,爱你哟
end
BOY -->> GIRL : 哈哈哈我也爱你
end
![4a6925e5d1f2f824ce047cd9e3367036.png](https://i-blog.csdnimg.cn/blog_migrate/ab4558b20dcc8c3b76d5037222e24887.jpeg)
转载请注明出处!