Mermaid

本文最后更新于：2022年4月19日星期二晚上9点58分 +08:00

这里说的是markdown中对mermaid流程图的应用

时间线

2022年3月16日

Flowchat

2022年3月16日

Sequence Diagram

2022年3月16日

Pie Chart

2022年3月16日

Class Diagram

mermaid是什么

Mermaid单词是美人鱼的意思，它可以配合Markdown食用，可以用于绘制流程图、状态图、时序图、饼图、分类图、甘特图等等，语法方便简洁，容易快速上手

流程图graph
语法规则

graph 方向关键字
其他语句
方向关键字
- TB: 从上到西安
- BT: 从下到上
- LR: 从左到右
- RL: 从右到左
- TD: 从上到下
实例代码

graph LR
开始 –> 结束
实际效果
```
graph LR
  开始 --> 结束
```
流程图实操
流程图中的节点有很多形状，表示的含义不尽相同

Mermaid默认节点形状为直角矩形

graph Dir(方向，下同)
sign(随意取名)[中括号表示直角矩形]
实例代码

graph TD
默认效果
id[测试]
效果展示
```
graph TD
默认效果
id[测试]
```

圆角矩形，圆括号表示圆角矩形
实例代码

graph TD
id(圆角矩形)
效果展示
```
graph TD
id(圆角矩形)
```

子程序，双括号表示子程序
实例代码

graph TD
id [[套娃]]
效果展示
```
graph TD
id[[套娃]]
```

圆柱形，方括号套圆括号
实例代码

graph TD
id[(data)]
效果展示
```
graph TD
id[(data)]
```

圆形，双圆括号表示
实例代码

graph TD
id(circle)
效果展示
```
graph TD
id((circle))
```

右向旗帜，左大于+右方括号
实例代码

graph RL
id>右满舵]
效果展示
```
graph RL
id>右满舵]
```

菱形，花括号表示，条件判断
实例代码

graph TD
id{if}
效果展示
```
graph TD
id{if}
```

六角矩形，双花括号
实例代码

graph TD
id
效果展示
```
graph TD
id{{snowflake}}
```

平行四边形，方括号配双斜杠
实例代码

graph TD
id[/snowflake/]
效果展示
```
graph TD
id[/snowflake/]
```

反平行四边形，方括号配双反斜杠
实例代码

graph TD
id[\snowflake]
效果展示
```
graph TD
id[\snowflake\]
```

正梯形，方括号配正反斜杠
实例代码

graph TD
id[/snowflake]
效果展示
```
graph TD
id[/snowflake\]
```

反体形，方括号配正反斜杠
实例代码

graph TD
id[\snowflake/]
效果展示
```
graph TD
id[\snowflake/]
```

节点换行，html
照样食用
实例代码

graph TD
id{snowflake
snow}
效果展示
```
graph TD
id{snowflake<br>snow}
```

节点显示关键字符号，双引号
实例代码

graph TD
id[“(圆括号)”]
效果展示
```
graph TD
id["(圆括号)"]
```

带箭头连线
实例代码

graph LR
A–>B
效果展示
```
graph LR
A-->B
```

无箭头连线
实例代码

graph LR
A—B
效果展示
```
graph LR
A---B
```

带文字无箭头连线
实例代码

graph LR
A–text—B
C—|TEXT|D
% 两种食用方式
效果展示
```
graph LR
A--text---B
C---|TEXT|D
```

带箭头虚线连线
实例代码

graph LR
A-.->B
效果展示
```
graph LR
A-.->B
```

带文字箭头虚线连线
实例代码

graph LR
A-.text.->B
效果展示
```
graph LR
A-.text.->B
```

无箭头粗线连接
实例代码

graph LR
A===B
效果展示
```
graph LR
A===B
```

箭头粗线连接
实例代码

graph LR
A==>B
效果展示
```
graph LR
A==>B
```

箭头文字粗线连接
实例代码

graph LR
A==text==>B
效果展示
```
graph LR
A==text==>B
```

链式连接
实例代码

graph LR
A–文字–>B–文字–>C–文字–>D

效果展示

graph LR
A--文字-->B--文字-->C--文字-->D

逻辑&连接
实例代码

graph TB
A & B–>C & D
a–>b & c–>d
%注意空格缩进！

效果展示

graph TB
A & B-->C & D
   a-->b & c-->d

综合实例
graph TD
n1[数学知识] –记忆请求–> n2
n2(脑子运转) –> n3{神经分发}
n3 –困难–> n4[A]
```
  n4 --"转发"--> web[G]
```
n3 –困难–> n5[B]
```
  n5 --"转发"--> web
```
n3 –困难–> n6[C]
```
  n6 --"转发"--> web
```
n3 –简单–> n7[D]
n3 –困难–> n8[E]
n3 –困难–> n9[F]
n7 –> n10{记住了吗}
```
 n10 --是-->n11[I]
 n10 --否-->n12[J]
```

效果展示

graph TD
  n1[数学知识] --记忆请求--> n2
  n2(脑子运转) --> n3{神经分发}
  n3 --困难--> n4[A]
      n4 --"学不会"--> bin[bin]
  n3 --困难--> n5[B]
      n5 --"学不会"--> bin
  n3 --困难--> n6[C]
      n6 --"学不会"--> bin
  n3 --简单--> n7[D]
  n3 --困难--> n8[E]
  n3 --困难--> n9[F]
  n7 --> n10{记住了吗}
     n10 --是-->n11[I]
     n10 --否-->n12[bin]

简化版
实例代码
graph TD
n1[数学知识] –记忆请求–> n2
n2(脑子运转) –> n3{神经分发}
n3–困难–>n4[A] & n5[B] & n6[C] & n7[D] & n8[E] & n9[F]
n4 & n5 & n6 –学不会–> n13[垃圾桶]
n7 –> n10{记住了吗}
```
 n10 --是-->n11[学废了]
 n10 --否-->n13
```

效果展示

graph TD
n1[数学知识] --记忆请求--> n2
n2(脑子运转) --> n3{神经分发}
n3--困难-->n4[A] & n5[B] & n6[C] & n7[D] & n8[E] & n9[F]
n4 & n5 & n6 --学不会--> n13[垃圾桶]
n7 --> n10{记住了吗}
   n10 --是-->n11[学废了]
   n10 --否-->n13

序列图实操

关键字
- sequenceDiagram: 开启序列图的方式
- participant: 定义序列图中对象
- actor: 一个比较Q的图样，定义序列图对象
- activate: 用以开启或结束交互
- Note: [right of |left of | over][Actor]
- loop: 循环
- alt else end opt: 条件语句
- par and end: 并列架构
- Message: 信息传递，语法为
  
  [actor][arrow][actor]: message text
  arrow支持六种形式
  
  -> 粗线无箭头
  –> 虚线无箭头
  ->> 粗线有箭头
  –>> 虚线有箭头
  -x 带×的实线
  –x 带x的虚线
  -) 带开箭头的实线
  –) 带开箭头的虚线

箭头样式实例

sequenceDiagram
participant A
participant B
A -> B: 干饭？
B --> A: 吃啥？
A ->> B: 烤肉！
B -->> A: 太贵啦！
A -x B: 不行，说好了的！
B --x A: 等发工资了嘛
A -) B: 行吧
B --) A: 所以吃啥？

Activate
实例代码

sequenceDiagram
A->>B: Hello
activate B
B–>> A: Hello!
deactivate B
也可以这么写
sequenceDiagram
C->>+B hello % +表示激活
B–>>-C hello % -表示失活

效果展示

sequenceDiagram
A->>B: Hello
activate B
B-->>A: Hello!
deactivate B
C->>+B: hello
B -)-C: hello

Note
实例代码

sequenceDiagram
actor Ron
Note right of Ron: note % left of |over | right of

效果展示

sequenceDiagram 
actor Ron
Note right of Ron: note1
Note over Ron: note2
Note left of Ron: note3

loop
实例代码
sequenceDiagram
participant wsy
participant zlh
loop Every day
```
zlh->>wsy: wsyyyds!
```
end

效果展示

sequenceDiagram
participant wsy
participant zlh
loop Every day
    zlh->>wsy: wsyyyds!
end

Alt
实例代码

sequenceDiagram
Wsy-)Zlh: 大佬在搞啥
alt is studying
Wsy->>Zlh: 卷
else if playing
Wsy–>Zlh: 寓学于玩
end
opt Extra response
Wsy–)Zlh: 牛哇牛哇
end

效果展示

sequenceDiagram
Actor Wsy
Actor Zlh
Wsy-)Zlh: 大佬在搞啥
alt  studying
  Wsy->>Zlh: 卷
else  playing
  Wsy-->Zlh: 寓学于玩
end
opt Extra response
  Wsy--)Zlh: 牛哇牛哇
end

Parallel

实例代码

sequenceDiagram
par mmr to mr
mmr–>mr: hello mr
and mmr to wsy
mmr–>wsy hello wsy
end
实例二套娃
sequenceDiagram
par Alice to Bob
  Alice->>Bob: Go help John
and Alice to John
  Alice->>John: I want this done today
  par John to Charlie
      John->>Charlie: Can we do this today?
  and John to Diana
      John->>Diana: Can you help us today?
  end
end

效果展示

sequenceDiagram
par mmr to mr
mmr-->mr: hello mr 
and mmr to wsy
mmr-->wsy: hello wsy
end

sequenceDiagram
  par Alice to Bob
      Alice->>Bob: Go help John
  and Alice to John
      Alice->>John: I want this done today
      par John to Charlie
          John->>Charlie: Can we do this today?
      and John to Diana
          John->>Diana: Can you help us today?
      end
  end

sequenceNumbers：添加autonumber
实例代码
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
```
  John->>John: Fight against hypochondria
```
end
Note right of John: Rational thoughts!
John–>>Alice: Great!
John->>Bob: How about you?
Bob–>>John: Jolly good!

效果展示

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

饼图

语法架构
- pie 开启饼图
- title 命名饼图(可选)
- label 用”xx”包裹的饼图组成内容
  - 比如：”不及格人数”: 68
实例代码

pie
title 量子力学考试结果分布
“优秀”： 5
“及格”： 68
“挂科”： 43

效果展示

pie 
title 量子力学考试结果分布
"优秀": 5
"及格": 68
"挂科": 43

分类图

小U应该不常用，不细讲
语法架构
- classDiagram 开启
- class classname 命名类
- classmember 类成员
类成员关系
实例代码

classDiagram 反向
classA <|– classB
classC *– classD
classE o– classF
classG <– classH
classI – classJ
classK <.. classL
classM <|.. classN
classO .. classP

classDiagram 正向
classA –|> classB : Inheritance
classC –* classD : Composition
classE –o classF : Aggregation
classG –> classH : Association
classI – classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

效果展示

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

classDiagram 
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

其他的图样小U应该不会用到，就先不写啦，更多详情可以点击下方链接前往mermaid官网查看

mermaid一个好用的图标工具

beautify

您阅读这篇文章共花了：

Invitation

Floral-Sunsunrise

FeynmanDirac

created:12/03/2022

Welcome to Floral-Sunsunrise

sitelink

https://blog.starysky.top

This is an identification card as an honored membership of FeynmanDirac

Happy to see you follow FeynmanDirac, enjoy science together

Mermaid

链接：传送门

作者

USTC-elbitsiserri

创作于

2022-04-28

更新于

2022-04-19

许可协议

CC BY-NC-SA 4.0

免责声明 1 小站名称：USTC-茶糜花开
2 小站网址：https://blog.starysky.top
3 除标注`转载`字样的文章外，小站所发布的文章由小U均由撰写，仅供学习参考，我们尽最大能力保障文章内容的准确性和科学性
4 小站所转载的文章的内容与观点，不代表`USTC-茶糜花开`的立场，文章所有权归属作者所有
5 小站将在《中华人民共和国网络安全法》、《中华人民共和国计算机信息系统安全保护条例》等法律法规的框架下依法依规运行
7 本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于任何未授权用途

张量分析Ⅰ 上一篇

Electromagnetic theory of light 下一篇

验证码启动中...

mermaid是什么

流程图graph

流程图实操

序列图实操

饼图

分类图