Markdown高级用法——mermaid
Markdown高级用法——mermaid
起初是写文章，其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的，工作中又是腾讯文档，上面也能画图，但假如我笔记软件用语雀之类的又要把一张图反复粘贴，浪费内存，如果统一图床，又会有内外网权限问题，最终我找到了解决办法，谁说markdown只能写文档的，语法熟练以后比直接画图还快。
参考资料
https://zhuanlan.zhihu.com/p/70261692
https://mermaid.js.org/intro/
mermaid图表可视化工具
它是一个基于 JavaScript 的图表绘制工具，可呈现 Markdown 启发的文本定义以动态创建和修改图表。
他功能很强大，想深入了解的同学点上面两个链接进去学习，这里只介绍两种最常用的图表类型，几乎所有支持Markdown语法的编辑器都支持mermaid，比如我最常用的Typro(自带)，obsidion(需要安装第三方插件支持)，notion(原生支持)。
流程图
方向
该语句声明了流程图的方向。
这声明流程图是从上到下（TD或TB）的。
代码：
flowchart TD
Start --> Stop
Start
Stop
这声明流程图是从左到右定向的 ( LR)。
代码：
flowchart LR
Start --> Stop
Start
Stop
StartStop
可能的流程图方向是：
- TB——从上到下
- TD - 自上而下/与自上而下相同
- BT——从下到上
- RL——从右到左
- LR——从左到右
按钮样式
矩形
flowchart LR
id1[This is the text in the box]
This is the text in the box
圆角矩形
flowchart LR
id1(This is the text in the box)
This is the text in the box
腰圆形
flowchart LR
id1([This is the text in the box])
This is the text in the box
箭头样式
实线箭头
flowchart LR
A-->B
A
B
直线
flowchart LR
A --- B
A
B
线上的文字
flowchart LR
A-- This is the text! ---B
This is the text!
A
B
虚线链接
flowchart LR
A-.->B;
A
B
带文字的虚线链接
flowchart LR
A-. text .-> B
text
A
B
多方向箭头
flowchart LR
A o--o B
B <--> C
C x--x D
A
B
C
D
对于点链接或粗链接，要添加的字符是等号或点，如下表所示：
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 普通的 | --- |
---- |
----- |
| 正常带箭头 | --> |
---> |
----> |
| 厚的 | === |
==== |
===== |
| 粗带箭头 | ==> |
===> |
====> |
| 点状 | -.- |
-..- |
-...- |
| 带有箭头的虚线 | -.-> |
-..-> |
-...-> |
闰年例子
闰年的定义是指能够整除4的年份。然而，有一个例外规则，即能够整除100但不能整除400的年份不算是闰年。这是为了修正日历系统中的误差，确保闰年的周期相对稳定。
因此，按照常见的规则：
- 如果年份能够整除4，但不能整除100，那么它是一个闰年。
- 如果年份能够整除100，但不能整除400，那么它不是闰年。
- 如果年份能够整除400，那么它仍然是一个闰年。
举例来说：
- 2000年是闰年，因为它能够整除4和400。
- 1900年不是闰年，因为它能够整除4和100，但不能整除400。
- 2024年是闰年，因为它能够整除4。
flowchart TD
A([开始]) -->|Link text| B(Round edge)
B[/输入y/] --> C{4能整除y}
C ---->|否| D[y不是闰年]
C -->|是| E{100能整除y}
E -->|是| F{400能整除y}
F -->|否| D
E -->|否| G
F -->|是| G[y是闰年]
Link text
否
是
是
否
否
是
开始
输入y
4能整除y
y不是闰年
100能整除y
400能整除y
y是闰年
时序图
HTTP建立连接
连接过程描述
-
客户端向服务器发送SYN（同步）请求。
-
服务器收到请求后，回复SYN-ACK（同步-确认）。
-
客户端收到服务器的回复后，发送ACK（确认），完成三次握手过程。
sequenceDiagram
participant Client
participant Server
Client->>Server: SYN客户端向服务器发送SYN（同步）请求。
Server->>Client: SYN-ACK 服务器收到请求后，回复SYN-ACK（同步-确认）。
Client->>Server: ACK 客户端收到服务器的回复后，发送ACK（确认），完成三次握手过程。
Client Server SYN客户端向服务器发送SYN（同步）请求。 SYN-ACK 服务器收到请求后，回复SYN-ACK（同步-确认）。 ACK 客户端收到服务器的回复后，发送ACK（确认），完成三次握手过程。 Client Server
HTTP断开连接
sequenceDiagram
participant Client
participant Server
Client->>Server: FIN (Step 1)客户端向服务器发送FIN（终止）请求。
Note over Server: 服务器收到请求后，回复ACK（确认）表示已接收到FIN。
Server->>Client: ACK (Step 2)
Note over Client: 服务器向客户端发送FIN（终止）请求。
Server->>Client: FIN (Step 3)
Note over Client: 客户端收到请求后，回复ACK（确认），完成四次挥手过程。
Client->>Server: ACK (Step 4)
Note over Client,Server: Connection Closed
Client Server FIN (Step 1)客户端向服务器发送FIN（终止）请求。 服务器收到请求后，回复ACK（确认）表示已接收到FIN。 ACK (Step 2) 服务器向客户端发送FIN（终止）请求。 FIN (Step 3) 客户端收到请求后，回复ACK（确认），完成四次挥手过程。 ACK (Step 4) Connection Closed Client Server
微信小程序调用
sequenceDiagram
小程序 ->> 小程序 : wx.login()获取code
小程序 ->> + 服务器 : wx.request()发送code
服务器 ->> + 微信服务器 : code+appid+secret
微信服务器 -->> - 服务器 : openid
服务器 ->> 服务器 : 根据openid确定用户并生成token
服务器 -->> - 小程序 : token
小程序 服务器 微信服务器 wx.login()获取code wx.request()发送code code+appid+secret openid 根据openid确定用户并生成token token 小程序 服务器 微信服务器