序列图是一种用于描述对象之间在时间上的交互顺序的图表。
它可以展示对象之间是如何相互作用的,以及这些交互的顺序。
Mermaid.js是一个开源项目,它允许你通过简单的文本代码来绘制图表。
无论你是开发者、学生还是普通用户,它都能帮助你将复杂的信息以直观和易懂的方式呈现出来。
来自 min2k 的 中文 Mermaid 在 Mermaid 的基础上引入了 AI 技术,实现了自动生成时序图的功能。
现在的用户只需输入内容,它就会自动将其转化为时序图。
这大大地提高了工作效率,省去了手写代码的麻烦。
访问 中文 Mermaid 体验 AI + 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 连接已关闭
由代码绘制出来的图表 上图完整地展示了TCP 协议在从连接到关闭的整个交互过程。
第 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 来自动生成时序图。
1
theoriz 18 天前
你的这个 prompt 要怎么写,感觉现在网站上的例子只是两个 mermaid 范例; AI 的作用没有感受到
|
2
churchmice 18 天前
何必呢,自己看一会掌握语法比对话一小时强多了
啥都搞对话,有种强造需求的感觉 |
4
wxd3li OP @churchmice 用 AI 整理,比较省时省力,你会语法的话,自己再整理一下,效果更佳
|
5
7gugu 17 天前
可以让 claude 帮你整理,你只要把流程说出来,claude 就能自动帮你转成 mermaid 的代码
|