V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wxd3li
V2EX  ›  分享创造

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

  •  
  •   wxd3li · 4 天前 · 900 次点击

    什么是时序图

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

    什么是 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 来自动生成时序图。

    6 条回复    2024-11-04 16:26:13 +08:00
    theoriz
        1
    theoriz  
       4 天前
    你的这个 prompt 要怎么写,感觉现在网站上的例子只是两个 mermaid 范例; AI 的作用没有感受到
    churchmice
        2
    churchmice  
       4 天前
    何必呢,自己看一会掌握语法比对话一小时强多了
    啥都搞对话,有种强造需求的感觉
    wxd3li
        3
    wxd3li  
    OP
       3 天前
    @theoriz 点击 整理成图 就行了
    wxd3li
        4
    wxd3li  
    OP
       3 天前
    @churchmice 用 AI 整理,比较省时省力,你会语法的话,自己再整理一下,效果更佳
    7gugu
        5
    7gugu  
       3 天前
    可以让 claude 帮你整理,你只要把流程说出来,claude 就能自动帮你转成 mermaid 的代码
    wxd3li
        6
    wxd3li  
    OP
       2 天前
    @7gugu claude 或 GPT 生成的结果针对性不强,有时存在错误。中文 Mermaid 针对性优化已经有数十项,而且你对生成的结果还可以手动调整。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:34 · PVG 11:34 · LAX 19:34 · JFK 22:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.