当前位置: 首页 > news >正文

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 TDStart --> Stop
Start
Stop

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

代码:
flowchart LRStart --> Stop
Start
Stop

StartStop

可能的流程图方向是:

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

按钮样式

矩形

flowchart LRid1[This is the text in the box]
This is the text in the box

圆角矩形

flowchart LRid1(This is the text in the box)
This is the text in the box

腰圆形

flowchart LRid1([This is the text in the box])
This is the text in the box

箭头样式

实线箭头

flowchart LRA-->B
A
B

直线

flowchart LRA --- B
A
B

线上的文字

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

虚线链接

flowchart LRA-.->B;
A
B

带文字的虚线链接

flowchart LRA-. text .-> B
text
A
B

多方向箭头

flowchart LRA o--o BB <--> CC x--x D
A
B
C
D

对于点链接或粗链接,要添加的字符是等号或点,如下表所示:

长度123
普通的------------
正常带箭头-->--->---->
厚的============
粗带箭头==>===>====>
点状-.--..--...-
带有箭头的虚线-.->-..->-...->

闰年例子

闰年的定义是指能够整除4的年份。然而,有一个例外规则,即能够整除100但不能整除400的年份不算是闰年。这是为了修正日历系统中的误差,确保闰年的周期相对稳定。

因此,按照常见的规则:

  • 如果年份能够整除4,但不能整除100,那么它是一个闰年。
  • 如果年份能够整除100,但不能整除400,那么它不是闰年。
  • 如果年份能够整除400,那么它仍然是一个闰年。

举例来说:

  • 2000年是闰年,因为它能够整除4和400。
  • 1900年不是闰年,因为它能够整除4和100,但不能整除400。
  • 2024年是闰年,因为它能够整除4。
flowchart TDA([开始]) -->|Link text| B(Round edge)B[/输入y/] --> C{4能整除y}C ---->|| D[y不是闰年]C -->|| E{100能整除y}E -->|| F{400能整除y}F -->|| DE -->|| GF -->|| G[y是闰年]
Link text
开始
输入y
4能整除y
y不是闰年
100能整除y
400能整除y
y是闰年

时序图

HTTP建立连接

连接过程描述

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

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

  3. 客户端收到服务器的回复后,发送ACK(确认),完成三次握手过程。

sequenceDiagramparticipant Clientparticipant ServerClient->>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断开连接

sequenceDiagramparticipant Clientparticipant ServerClient->>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 小程序 服务器 微信服务器
http://www.lryc.cn/news/280513.html

相关文章:

  • cf919Div2C题题目总结
  • Pandas实战100例 | 案例 4: 数据选择和索引 - 选择特定的列和行
  • Netty-Netty实现自己的通信框架
  • 【算法刷题】总结规律 算法题目第2讲 [234] 回文链表,因为深浅拷贝引出的bug
  • RabbitMQ如何保证消息不丢失?
  • Random的使用
  • 通过反射修改MultipartFile类文件名
  • Macos下修改Python版本
  • 多种采购方式下,数智化招标采购系统建设解决方案
  • Java选择排序
  • [足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-1 坐标系与概念基准
  • 【金猿人物展】DataPipelineCEO陈诚:赋能数据应用,发挥未来生产力
  • 4D 毫米波雷达:智驾普及的新路径(二)
  • element plus自定义组件表单校验
  • C //练习 4-13 编写一个递归版本的reverse(s)函数,以将字符串s倒置。
  • DNS解析和主从复制
  • 光猫(无限路由器)插入可移动硬盘搭建简易版的NAS
  • SpringIOC之support模块GenericGroovyApplicationContext
  • Awesome 3D Gaussian Splatting Resources
  • 【镜像压缩】linux 上 SD/TF 卡镜像文件压缩到实际大小的简单方法(树莓派、nvidia jetson)
  • Zookeeper 和 naocs的区别
  • 2-6基础算法-快速幂/倍增/构造
  • 行业内参~移动广告行业大盘趋势-2023年12月
  • 【笔记】书生·浦语大模型实战营——第四课(XTuner 大模型单卡低成本微调实战)
  • 开源的Immich自建一个堪比 iCloud 的私有云相册和备份服务
  • SPI通信讲解
  • 本地一键部署grafana+prometheus
  • NIO核心依赖多路复用小记
  • 如何彻底卸载 Microsoft Edge?
  • JavaScript-对象-笔记