使用 ChatGPT 来设计系统时序图

太过爱你忘了你带给我的痛 2023-09-24 19:34 115阅读 0赞

### 前言 ###

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

### 什么是 Mermaid ###

Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。  
可以先确认一下 ChatGPT 是否可以为案例解释生成图表并同时分析图表的影响因素。登录到 chat.openai.com，下面就来开启对话。

> 第 1 步：让我们定义用例

本来可以定义自己的用例，但可以先测试 ChatGPT 的在这方面的表现，所以要求它先来定义一个  
![在这里插入图片描述][c21924db24a249428bea6cbcace2f797.png]

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

看起来不错，那么就从定义数据模型开始，所以让 ChatGPT 来做，下面是结果：  
![在这里插入图片描述][5ecfe16400a540079926765701cbf813.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 的表格格式进行描述：  
![在这里插入图片描述][0984280a43444539837b2a1f26ac2014.png]  
这是一个好的开始。

> 第 3 步：定义关系，实体关系图

![在这里插入图片描述][79ac9bf0818f4268803d0bff9713be78.png]

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

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

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

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

并将其复制到包含在 \{mermaid\} 标签内的 Markdown 编辑器中，效果如下：  
![在这里插入图片描述][55d15e1451fc4b3c842fc80c0d640933.png]  
太好了，正在按照预期进展。有一个类图/实体关系图。接下来看看还有什么可能？

> 第 4 步：时序图

![在这里插入图片描述][fce242198a5d482fb3d69b916653d6d9.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 编辑器中：

![在这里插入图片描述][69f5af79edcc481892070e5e1b532b4f.png]

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

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

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

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

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

![在这里插入图片描述][0ff713324a434eb0a965f32516e80f55.png]  
从整个过程看，效果还不错，考虑的比较全面。

### 总结 ###

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

[c21924db24a249428bea6cbcace2f797.png]: https://img-blog.csdnimg.cn/c21924db24a249428bea6cbcace2f797.png
[5ecfe16400a540079926765701cbf813.png]: https://img-blog.csdnimg.cn/5ecfe16400a540079926765701cbf813.png
[0984280a43444539837b2a1f26ac2014.png]: https://img-blog.csdnimg.cn/0984280a43444539837b2a1f26ac2014.png
[79ac9bf0818f4268803d0bff9713be78.png]: https://img-blog.csdnimg.cn/79ac9bf0818f4268803d0bff9713be78.png
[55d15e1451fc4b3c842fc80c0d640933.png]: https://img-blog.csdnimg.cn/55d15e1451fc4b3c842fc80c0d640933.png
[fce242198a5d482fb3d69b916653d6d9.png]: https://img-blog.csdnimg.cn/fce242198a5d482fb3d69b916653d6d9.png
[69f5af79edcc481892070e5e1b532b4f.png]: https://img-blog.csdnimg.cn/69f5af79edcc481892070e5e1b532b4f.png
[0ff713324a434eb0a965f32516e80f55.png]: https://img-blog.csdnimg.cn/0ff713324a434eb0a965f32516e80f55.png