用文字“画出”时序图:用 AI+Mermaid.js 解决交互过程中的问题

devtools/2024/11/8 0:46:19/

什么是时序图

序列图是一种用于描述对象之间在时间上的交互顺序的图表。
它可以展示对象之间是如何相互作用的,以及这些交互的顺序。

什么是Mermaid

Mermaid.js是一个开源项目,它允许你通过简单的文本代码来绘制图表。
无论你是开发者、学生还是普通用户,它都能帮助你将复杂的信息以直观和易懂的方式呈现出来。

什么是中文Mermaid

来自 min2k 的 中文Mermaid 在Mermaid的基础上引入了AI技术,实现了自动生成时序图的功能。
现在的用户只需输入内容,它就会自动将其转化为时序图
这大大地提高了工作效率,省去了手写代码的麻烦。

访问 中文Mermaid 体验 AI + Mermaid,提升你的效率,解决你的问题。

Mermaid的示例

文本代码

sequenceDiagramparticipant Clientparticipant ServerClient ->> Server:SYNnote right of Client:发送SYN请求Server -->> Client:SYN-ACKnote right of Server:回复SYN-ACKClient ->> Server:ACKnote right of Client:确认SYN-ACKnote over Client,Server:TCP连接已建立Client -->> Server:数据传输note right of Client:发送数据Server -->> Client:数据传输note right of Server:接收数据Client -->> Server:FINnote right of Client:发送FIN请求Server -->> Client:ACKnote right of Server:确认FIN请求Server -->> Client:FINnote right of Server:发送FIN请求Client -->> Server:ACKnote right of Client:确认FIN请求note over Client,Server:TCP连接已关闭

由代码绘制出来的图表

mermaid"> mermaid-svg-XfEsXGFIW6oLjCg2" width="100%" xmlns="http://www.w3.org/2000/svg" height="1137" style="max-width: 550px;" viewbox="-50 -10 550 1137" class="mermaid-svg"> Client Server SYN 发送SYN请求 SYN-ACK 回复SYN-ACK ACK 确认SYN-ACK TCP连接已建立 数据传输 发送数据 数据传输 接收数据 FIN 发送FIN请求 ACK 确认FIN请求 FIN 发送FIN请求 ACK 确认FIN请求 TCP连接已关闭 Client Server

上图完整地展示了TCP协议在连接和关闭时的整个交互过程。

Mermaid的语法解释

第1行是图表类型,默认是:sequenceDiagram
接下来的 participant 定义了此次时序图的参与者,分别有 Client 和 Server
接下来的 Client ->> Server:SYN,表示从 Client 绘制一条实心线到 Sever 上,其线的描述为:SYN
接下来的 note right of Client:发送SYN请求,表示添加一个注解,放在 Client 的右侧,内容为:发送SYN请求
最后的 note over Client,Server:TCP连接已关闭,表示添加一个注解,横跨在 Client 和 Sever 之上,内容为:TCP连接已关闭

以上就是Mermaid时序图的常用语法。
若你不想手动编写代码的话,可以使用 min2k 的 中文Mermaid 来自动生图。


http://www.ppmy.cn/devtools/132167.html

相关文章

【计算机网络】零碎知识点(易忘 / 易错)总结回顾

一、计算机网络的发展背景 1、网络的定义 网络是指将多个计算机或设备通过通信线路、传输协议和网络设备连接起来,形成一个相互通信和共享资源的系统。 2、局域网 LAN 相对于广域网 WAN 而言,局域网 LAN 主要是指在相对较小的范围内的计算机互联网络 …

《Java 实现选择排序:原理剖析与代码详解》

目录 一、引言 二、选择排序原理 三、代码分析 1. 代码整体结构 2. main方法 3. sort方法(选择排序核心逻辑) 四、测试结果 一、引言 排序算法在计算机科学领域中是非常重要的一部分,它能够帮助我们将无序的数据按照特定的顺序进行排列…

Redis - 数据库管理

Redis 提供了⼏个⾯向Redis数据库的操作,分别是dbsize、select、flushdb、flushall命令, 本机将通过具体的使⽤常⻅介绍这些命令。 一、切换数据库 select dbIndex 许多关系型数据库,例如MySQL⽀持在⼀个实例下有多个数据库存在的&#…

大数据新视界 -- 大数据大厂之经典案例解析:广告公司 Impala 优化的成功之道(下)(10/30)

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Python接口自动化测试实战

🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 接口自动化测试是指通过编写程序来模拟用户的行为,对接口进行自动化测试。Python是一种流行的编程语言,它在接口自动化测试中得到了广泛…

全面解析:网络协议及其应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 # 全面解析:网络协议及其应用 文章目录 网络协议概述定义发展历程主要优势 主要网络协议应用层协议传输层协议网络层…

关于英语背单词

背单词 印欧语音变化规律,要想记得牢,肯定是强联系,强逻辑,而不是死记1. 关于元音互换2. g=k(c)=h互换,读作汉语发音 哥 克 吃3. s=t=d4. u=v=w5. m=n=l=r 莫 呐 了 日6. b=p=m=f=v互换常用词根,词的根本,看到什么就知道和什么相关1. 核心词根124个2. 多认词根(128个)…

[C语言]strstr函数的使用和模拟实现

1.strstr函数的使用 char * strstr ( const char *str1, const char * str2); 返回一个指向str1中str2第一次出现的指针&#xff0c;如果str2中没有str1则返回 NULL。。 实例&#xff1a; #include <stdio.h> #include <string.h> int main() {char str[] "…