使用 ChatGPT 来设计系统时序图

4,225 阅读6分钟

ChatGPT 的受欢迎程度不断增长,现在被广泛用于各种应用程序。作为一名全栈工程师,出于对技术的追求,使用 ChatGPT 来探索一些可能的使用场合,本文就来探索 ChatGPT 设计一个资产购买系统并画出 Mermaid 流程图,开始之前介绍一下 Mermaid。

什么是 Mermaid

Mermaid 是一个基于 JavaScript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

可以先确认一下 ChatGPT 是否可以为案例解释生成图表并同时分析图表的影响因素。登录到 chat.openai.com,下面就来开启对话。

第 1 步:让我们定义用例

本来可以定义自己的用例,但可以先测试 ChatGPT 的在这方面的表现,所以要求它先来定义一个。

image.png

第 2 步:让我们为用例定义一个数据模型

看起来不错,那么就从定义数据模型开始,所以让 ChatGPT 来做,下面是结果:

image.png

下面是 ChatGPT 提供的用例模型格式:

Use Case:
- Name:
- Description:

Actor:
- Name:
- Description:

Preconditions:
- Preconditions 1
- Preconditions 2
...

Steps:
1. Step 1
2. Step 2
...
n. Step n

Postconditions:
- Postcondition 1
- Postcondition 2
...

Exceptions:
- Exception 1
- Exception 2
...

Extensions:
- Extension 1
- Extension 2
...

这种模型可以根据具体的用例进行扩展和修改,以满足需求分析和设计过程中的实际需要。

看起来不错,接下来看看它可以为图表做什么。更深入地研究数据模型,所以下一个提示是:

继续提问:更详细地描述数据模型或使用 Markdown 的表格格式

ChatGPT:以下是一个更详细的用例数据模型,使用 Markdown 的表格格式进行描述:

image.png

这是一个好的开始。

第 3 步:定义关系,实体关系图

image.png

继续提问:这太完美了,想用 Mermaid 图来描述关系,你能给我输出这个的图的 Markdown 吗?

ChatGPT:当然,以下是使用 Mermaid 描述实体关系图的 Markdown 代码:

graph LR
Customer(顾客) -- 一对多 --> Order(订单)
Customer -- 有 --> 客户ID
Customer -- 有 --> 姓名
Customer -- 有 --> 地址
Order -- 有 --> 订单ID
Order -- 有 --> 日期

注意,需要在支持 Mermaid 图的 Markdown 编辑器或平台中使用上述代码才能正确显示实体关系图。

并将其复制到包含在 {mermaid} 标签内的 Markdown 编辑器中,效果如下:

image.png

太好了,正在按照预期进展。有一个类图/实体关系图。接下来看看还有什么可能?

第 4 步:时序图

image.png

title 简单交互

participant Object A
participant Object B

Object A->Object B: 请求
Object B-->Object A: 响应

在上面的示例中,有两个对象 A 和 B 参与交互。A 向 B 发送了一个请求,B 接收到请求并返回响应。

时序图通常用于描述系统或模块之间的交互过程,也可以用于设计和测试等阶段的文档化,以便更好地理解和分析系统行为。它能够帮助开发人员更好地理解系统的交互行为,并且可以作为项目文档的一部分。

接下来,尝试提出假设性提示来检查响应。第一个意图是创建一个序列图。

继续提问:资产的购买交易将如何影响上述表格,想将其描述为序列图。你能帮忙描述一下 Mermaid 的 markdown 格式的图表吗?

ChatGPT:如果要在时序图中描述资产购买交易对数据模型的影响,可能需要添加新的参与者(例如购买方、卖方、支付系统等),以及新的消息来表示交互过程。下面是一个使用 Mermaid 描述资产购买交易的示例代码:

sequenceDiagram
    participant Buyer
    participant Seller
    participant Asset
    participant PaymentSystem
    Buyer->>Seller: 发出购买请求
    Seller->>Asset: 检查资产是否可用
    Asset-->>Seller: 返回资产可用性
    alt 资产可用
        Seller->>PaymentSystem: 向支付系统发送付款请求
        PaymentSystem->>Buyer: 返回付款链接
        Buyer->>PaymentSystem: 完成付款
        PaymentSystem->>Seller: 确认付款完成
        Seller->>Asset: 发送资产给买方
        Asset-->>Seller: 更新资产状态
        Seller-->>Buyer: 发送购买确认
    else 资产不可用
        Seller-->>Buyer: 发送购买失败信息
    end

上述示例中,我们使用了 sequenceDiagram 关键字来创建一个新的时序图,然后定义了四个参与者:买方(Buyer)、卖方(Seller)、资产(Asset)和支付系统(PaymentSystem)。在交互中,买方向卖方发出购买请求,卖方检查资产是否可用,然后向支付系统发送付款请求。如果资产可用,支付系统返回付款链接,买方完成付款后,支付系统向卖方确认付款完成,然后卖方将资产发送给买方,更新资产状态,并向买方发送购买确认。如果资产不可用,则卖方向买方发送购买失败信息。

注意,Mermaid 的 Markdown 语法比较灵活,可以根据具体需求进行调整和扩展。使用 Mermaid 可以方便地创建各种类型的图表,包括流程图、序列图、实体关系图等。

将其复制到 markdown 编辑器中:

image.png

第五步:资产购买交易状态转移图

ChatGPT:下面是一个使用 Mermaid 描述资产购买交易状态转移图的示例代码:

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 用户支付
    已支付 --> 已确认 : 系统确认收款
    已确认 --> 已分配 : 资产分配完成
    已分配 --> 已完成 : 用户确认收货
    已完成 --> [*]

上述示例中,我们定义了五个状态:待支付、已支付、已确认、已分配 和 已完成,用方框表示。在初始状态(用星号 [*] 表示)下,系统处于待支付状态。当用户发出支付命令后,系统从待支付状态转移到已支付状态;当系统确认收到用户的付款后,系统从已支付状态转移到已确认状态;当系统完成资产分配后,系统从已确认状态转移到已分配状态;当用户确认收到资产后,系统从已分配状态转移到已完成状态。最后,当交易完成后,系统回到初始状态,重新进入待支付状态。

在状态转移图中,箭头表示状态转移,箭头上的文本表示转移的条件或事件。在本例中,箭头上的文本表示用户执行的操作,例如 用户支付、系统确认收款、资产分配完成 和 用户确认收货。在状态转移图中,可以很好地描述资产购买交易的状态转移过程,有助于我们理解交易的各个阶段和状态。

image.png

从整个过程看,效果还不错,考虑的比较全面。

总结

本文通过 ChatGPT 来设计基于 Mermaid 的系统时序图,确定在效率上提高了不少,合理利用 ChatGPT 可以给我们工作带来很多超乎想象的效果。