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(原生支持)。

流程图

方向

该语句声明了流程图的方向。

这声明流程图是从上到下(TDTB)的。

代码:
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建立连接

连接过程描述

  1. 客户端向服务器发送SYN(同步)请求。

  2. 服务器收到请求后,回复SYN-ACK(同步-确认)。

  3. 客户端收到服务器的回复后,发送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 小程序 服务器 微信服务器

你可能感兴趣的:(前端,笔记)