Markdown高级用法——mermaid

燃192

发布于 2024-01-17 14:48:46

4550

发布于 2024-01-17 14:48:46

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

这声明流程图是从左到右定向的 ( LR)。

代码：

flowchart LR
    Start --> Stop

StartStop

可能的流程图方向是：

TB——从上到下
TD - 自上而下/与自上而下相同
BT——从下到上
RL——从右到左
LR——从左到右

按钮样式

矩形

flowchart LR
    id1[This is the text in the box]

圆角矩形

flowchart LR
    id1(This is the text in the box)

腰圆形也叫跑道型

flowchart LR
    id1([This is the text in the box])

箭头样式

实线箭头

flowchart LR
    A-->B

直线

flowchart LR
    A --- B

线上的文字

flowchart LR
    A-- This is the text! ---B

虚线链接

flowchart LR
   A-.->B;

带文字的虚线链接

flowchart LR
   A-. text .-> B

多方向箭头

flowchart LR
    A o--o B
    B <--> C
    C x--x 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是闰年]

时序图

HTTP建立连接

连接过程描述

客户端向服务器发送SYN（同步）请求。
服务器收到请求后，回复SYN-ACK（同步-确认）。
客户端收到服务器的回复后，发送ACK（确认），完成三次握手过程。

sequenceDiagram
    participant Client
    participant Server
    Client->>Server: SYN客户端向服务器发送SYN（同步）请求。
    Server->>Client: SYN-ACK 服务器收到请求后，回复SYN-ACK（同步-确认）。
    Client->>Server: ACK 客户端收到服务器的回复后，发送ACK（确认），完成三次握手过程。

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

微信小程序调用

sequenceDiagram
    小程序 ->> 小程序 : wx.login()获取code
    小程序 ->> + 服务器 : wx.request()发送code
    服务器 ->> + 微信服务器 : code+appid+secret
    微信服务器 -->> - 服务器 : openid
    服务器 ->> 服务器 : 根据openid确定用户并生成token
    服务器 -->> - 小程序 : token

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-14，如有侵权请联系 cloudcommunity@tencent.com 删除

markdown