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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

JavaScript Array.from及其相关用法详解(示例演示)

《JavaScriptArray.from及其相关用法详解(示例演示)》Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array... 目录一、Array.from 方法概述1. 方法介绍2. 示例演示二、结合实际场景的使用1. 初始化二

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

使用Python和python-pptx构建Markdown到PowerPoint转换器

《使用Python和python-pptx构建Markdown到PowerPoint转换器》在这篇博客中,我们将深入分析一个使用Python开发的应用程序,该程序可以将Markdown文件转换为Pow... 目录引言应用概述代码结构与分析1. 类定义与初始化2. 事件处理3. Markdown 处理4. 转

关于@RequestParam的主要用法详解

《关于@RequestParam的主要用法详解》:本文主要介绍关于@RequestParam的主要用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 基本用法2. 默认值3. 可选参数4. 绑定到对象5. 绑定到集合或数组6. 绑定到 Map7. 处理复杂类

SQL中的CASE WHEN用法小结

《SQL中的CASEWHEN用法小结》文章详细介绍了SQL中的CASEWHEN函数及其用法,包括简单CASEWHEN和CASEWHEN条件表达式两种形式,并通过多个实际场景展示了如何使用CASEWH... 目录一、简单CASE WHEN函数:二、CASE WHEN条件表达式函数三、常用场景场景1:不同状态展