Markdown高级用法——mermaid

2024-01-15 05:36
文章标签 用法 高级 markdown mermaid

本文主要是介绍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 小程序 服务器 微信服务器

这篇关于Markdown高级用法——mermaid的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/607819

相关文章

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows

Python中的getopt模块用法小结

《Python中的getopt模块用法小结》getopt.getopt()函数是Python中用于解析命令行参数的标准库函数,该函数可以从命令行中提取选项和参数,并对它们进行处理,本文详细介绍了Pyt... 目录getopt模块介绍getopt.getopt函数的介绍getopt模块的常用用法getopt模

mysql中的group by高级用法

《mysql中的groupby高级用法》MySQL中的GROUPBY是数据聚合分析的核心功能,主要用于将结果集按指定列分组,并结合聚合函数进行统计计算,下面给大家介绍mysql中的groupby用法... 目录一、基本语法与核心功能二、基础用法示例1. 单列分组统计2. 多列组合分组3. 与WHERE结合使

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》:本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1:添加依赖步骤 2:解析 JWT2. 使用 N

Linux命令之firewalld的用法

《Linux命令之firewalld的用法》:本文主要介绍Linux命令之firewalld的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux命令之firewalld1、程序包2、启动firewalld3、配置文件4、firewalld规则定义的九大

SQL BETWEEN 的常见用法小结

《SQLBETWEEN的常见用法小结》BETWEEN操作符是SQL中非常有用的工具,它允许你快速选取某个范围内的值,本文给大家介绍SQLBETWEEN的常见用法,感兴趣的朋友一起看看吧... 在SQL中,BETWEEN是一个操作符,用于选取介于两个值之间的数据。它包含这两个边界值。BETWEEN操作符常用

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七