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

[wxd3li]

什么是时序图

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

什么是 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 连接已关闭

由代码绘制出来的图表 上图完整地展示了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 来自动生成时序图。

[theoriz]

你的这个 prompt 要怎么写，感觉现在网站上的例子只是两个 mermaid 范例； AI 的作用没有感受到

[churchmice]

何必呢，自己看一会掌握语法比对话一小时强多了
啥都搞对话，有种强造需求的感觉

[wxd3li]

@theoriz 点击 整理成图 就行了

[wxd3li]

@churchmice 用 AI 整理，比较省时省力，你会语法的话，自己再整理一下，效果更佳

[7gugu]

可以让 claude 帮你整理，你只要把流程说出来，claude 就能自动帮你转成 mermaid 的代码

[wxd3li]

@7gugu claude 或 GPT 生成的结果针对性不强，有时存在错误。中文 Mermaid 针对性优化已经有数十项，而且你对生成的结果还可以手动调整。