mermaid语言绘制图形

mermaid语言绘制图形

绘制流程图

graph TD;
A-->B
A-->C
B-->D
C-->D

绘制UML时序图

sequenceDiagram
# participant 参与者
participant Alice
participant Job
participant John
Alice->>John: 你好,John,你还好吗
loop Healthcheck
John->>John: fight against 疑难杂症
# loop代表循环块，end结束循环
end
# Note right of 代表在右侧写注释
Note right of John: 多虑了
John->>Alice: 没事了
John->>Job: 你呢
Job->>John: 我好极了!

绘制甘特图

gantt
dateFormat  YYYY-MM-DD
title 时间安排表
excludes weekdays 2023-01-10

section 工作模块
已完成任务            :done,    des1, 2023-01-06,2023-01-08
活跃任务               :active,  des2, 2023-01-09, 3d
未来任务               :         des3, after des2, 5d
未来任务2               :         des4, after des3, 5d

绘制类图

classDiagram
# arraylongclass属于class01，<|--箭头形状
class01 <|-- ArrayLongClass:Cool
# *-- 代表关联关系
class03 *-- class04	
# o-- 代表聚合关系
class05 o-- class06
class09 --* c3
class09 -->c2 : where am i
class08 <-->c2 : cool label
# .. 代表虚线，存在组合关系
# 聚合与组合的区别，两者都是描述整体与部分的关系，聚合关系较弱，一个类（整体）包含一个类的对象（部分），但是两者的声明周期互不影响
# 组合关系较强，部分不能脱离整体存在
class07 .. class08
class09 --* class07
class01:size()
class01:int arraytolist()
class01:int listToStream()

git图

ER图

erDiagram
# 一对多
customer ||--o{order:places
order ||--|{line-item:contains
# 多对多
customer }|..|{delivery-address:users

用户旅程图

journey
# 标题
title 我的工作日
# 模块
section 去工作
# 我，喝茶，花了5个单位的时间
喝茶:5:我
# 我，上楼，花了3个单位的时间，数字可表示单位时间，也可以表示快乐程度，数值越大，越快乐。
上楼:3:我
一起工作:1:我,猫
section 回家
下楼梯:5:我
坐下:5:猫

状态机

从初始状态到静止以及运动两种状态的转换

stateDiagram-v2
# 初始状态到静止状态
[*]-->still
# 静止到初始
still-->[*]
# 静止到移动
still-->moving
moving-->still
# crash，奔溃
moving-->crash
#  奔溃回到初始状态
crash-->[*]

饼状图

pie
# 数字代表参数的数量，386/总数就是在饼状图中的比例
"Dogs" : 386
"Cats" : 85
"Rats" : 15