首页 > 极客资料 博客日记
用文字“画出”时序图:用 AI+Mermaid.js 解决交互过程中的问题
2024-11-01 17:30:04极客资料围观13次
文章用文字“画出”时序图:用 AI+Mermaid.js 解决交互过程中的问题分享给大家,欢迎收藏极客之家,专注分享技术知识
什么是时序图
序列图是一种用于描述对象之间在时间上的交互顺序的图表。
它可以展示对象之间是如何相互作用的,以及这些交互的顺序。
什么是Mermaid
Mermaid.js是一个开源项目,它允许你通过简单的文本代码来绘制图表。
无论你是开发者、学生还是普通用户,它都能帮助你将复杂的信息以直观和易懂的方式呈现出来。
什么是中文Mermaid
来自 min2k 的 中文Mermaid 在Mermaid的基础上引入了AI技术,实现了自动生成时序图的功能。
现在的用户只需输入内容,它就会自动将其转化为时序图。
这大大地提高了工作效率,省去了手写代码的麻烦。
访问 中文Mermaid 体验 AI + Mermaid,提升你的效率,解决你的问题。
Mermaid时序图的示例
文本代码
sequenceDiagram
participant Client
participant Server
Client ->> Server:SYN
note right of Client:发送SYN请求
Server -->> Client:SYN-ACK
note right of Server:回复SYN-ACK
Client ->> Server:ACK
note right of Client:确认SYN-ACK
note over Client,Server:TCP连接已建立
Client -->> Server:数据传输
note right of Client:发送数据
Server -->> Client:数据传输
note right of Server:接收数据
Client -->> Server:FIN
note right of Client:发送FIN请求
Server -->> Client:ACK
note right of Server:确认FIN请求
Server -->> Client:FIN
note right of Server:发送FIN请求
Client -->> Server:ACK
note right of Client:确认FIN请求
note over Client,Server:TCP连接已关闭
由代码绘制出来的图表
sequenceDiagram
participant Client
participant Server
Client ->> Server:SYN
note right of Client:发送SYN请求
Server -->> Client:SYN-ACK
note right of Server:回复SYN-ACK
Client ->> Server:ACK
note right of Client:确认SYN-ACK
note over Client,Server:TCP连接已建立
Client -->> Server:数据传输
note right of Client:发送数据
Server -->> Client:数据传输
note right of Server:接收数据
Client -->> Server:FIN
note right of Client:发送FIN请求
Server -->> Client:ACK
note right of Server:确认FIN请求
Server -->> Client:FIN
note right of Server:发送FIN请求
Client -->> Server:ACK
note right of Client:确认FIN请求
note over Client,Server:TCP连接已关闭
上图完整地展示了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 来自动生成时序图。
版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”