使用 ChatGPT 生成图表

作者：由 Adrian Tam 于 2023 年 7 月 20 日在 ChatGPT 中发布 2

经过适当内容训练的大型语言模型，不仅可以生成英文文本，还可以生成其他响应。例如，ChatGPT 以能够生成多种编程语言的代码而闻名。事实上，您还可以让 ChatGPT 生成其他内容，例如图片。在这篇文章中，您将学习

如何让 ChatGPT 生成框图和序列图
让 ChatGPT 为您创建图表的通用规则

通过我的书《最大化 ChatGPT 的生产力》，开始并应用 ChatGPT。它提供了真实用例和提示示例，旨在帮助您快速使用 ChatGPT。

让我们开始吧。

使用 ChatGPT 生成图表
图片由作者使用 Stable Diffusion 生成。保留部分权利。

概述

这篇博文分为三部分；它们是：

构建系统设计的框图
构建序列图
图形生成的限制和技巧

构建系统设计的框图

在当今的软件行业，考虑可伸缩性是不可避免的。这意味着相当大的系统必须分解成更小的部分，并在隔离的硬件上运行。这些部分将通过网络协作以完成一项任务。这与互联网时代之前软件被设计成安装并在单台计算机上运行的情况形成对比。

让我们考虑一个可以与移动应用程序交互的云文件存储系统。如果您在互联网上搜索，了解此类系统如何支持海量用户并不困难。但是，一张图片胜过千言万语。您可以向 ChatGPT 描述这样的系统，并要求它生成图片。提示可以如下

一个云文件存储服务具有以下组件

1. 一个移动客户端，包含本地数据库、索引控制器、块控制器和监视器组件
2. 控制器和监视器组件通过负载均衡器与服务器端进行交互
3. 服务器端有一个通知服务器，将文件更新等消息推送到客户端，客户端的监视器组件将处理这些消息
4. 文件的上传和下载由文件处理服务器处理，文件被索引并分解成块。块存储在云存储中。
5. 文件的元数据由元数据服务器处理并存储在元数据数据库中
6. 所有这些操作都通过构建在 Kafka 之上的消息队列进行流式处理。

请使用 Mermaid 语法为此创建框图。

在构建此类提示时，有两个关键属性

您清楚地列出了系统组件以及它们如何相互交互
您要求为图表使用 Mermaid 语法

提供组件应包含的内容以及它们应如何交互的详细信息对于在图表中正确设置元素非常重要。但是，ChatGPT 可以生成文本，但不能生成图形。为了获得图表，您需要一种能够以纯文本形式呈现的图形生成语言。 Mermaid.js 就是一个例子。

ChatGPT 的响应如下

当然！这里有一个框图，代表了云文件存储服务中的组件及其交互。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

mermaid
复制代码
graph TD

subgraph 移动客户端
  A[本地数据库] --> B[索引控制器]
  B --> C[块控制器]
  C --> D[监视器]
结束

subgraph 服务器端
  E[负载均衡器] --> F[控制器]
  E --> G[监视器]
  F --> H[文件处理服务器]
  H --> I[云存储]
  F --> J[元数据服务器]
  J --> K[元数据数据库]
  J --> L[通知服务器]
  L --> G
结束

subgraph 消息队列
  M[Kafka]
结束

A -- 通知更改 --> D
D -- 监视事件 --> G
G -- 通知事件 --> D
F -- 上传/下载文件 --> H
H -- 存储/检索块 --> I
F -- 处理元数据 --> J
J -- 存储元数据 --> K
F -- 发送通知 --> L
L -- 发布消息 --> M
M -- 订阅消息 --> G

在此图表中，移动客户端包含本地数据库、索引控制器、块控制器和监视器组件。这些组件通过负载均衡器与服务器端组件进行交互。服务器端包含控制器、文件处理服务器、元数据服务器和通知服务器。文件处理服务器负责文件的上传和下载，将文件分解成块并存储在云存储中。元数据服务器处理文件的元数据并将其存储在元数据数据库中。通知服务器将文件更新等消息推送到客户端，由监视器组件处理。所有这些操作都通过基于 Kafka 的消息队列进行流式处理。

请注意，这是一个简化的表示，根据云文件存储服务的具体实现，可能还会有其他组件或交互。

响应中的代码块是 Mermaid.js 语法的图表。如果您将它们复制到在线的 Mermaid Live Editor 中，您将得到以下结果

Mermaid 是一个 JavaScript 库，可以在网页上渲染各种图形。您可以进一步优化 Mermaid 代码以添加颜色或将块移动到画布上的不同位置。但是，如果您需要系统可视化，ChatGPT 已经提供了很大的帮助。

事实上，您可以将此技术与其他技术结合使用，例如向 ChatGPT 提供系统的整体目标，并要求它告诉您系统组件。然后在后续的提示中，要求 ChatGPT 将其转换为图表。

您可以尝试以下提示作为示例

Twitter 这样的社交媒体背后有哪些系统组件？它们是如何交互的？

然后在后续的提示中，

请用 Mermaid 语法为上述内容提供一个框图。

构建序列图

作为另一个例子，让我们让 ChatGPT 生成序列图。这是软件工程中另一种常用的图形，用于描述不同组件在时间线上如何交互。

与上述情况相反，让我们让 ChatGPT 在同一个提示中找出组件和交互，并生成图片

用户如何与 Web 应用交互并使用 OAuth2 登录？请生成一个 PlantUML 语法的序列图来解释。

OAuth2 是 Web 应用中一种常见的身份验证方式，Web 应用服务器不需要您创建账户，而是使用其他平台的账户。例如，您可以使用您的 Google 账户登录 ChatGPT。Google 会检查您的密码，但应用程序（ChatGPT）不是 Google 的一部分。此过程中涉及多个方。

以下是 ChatGPT 向您解释此过程的方式

当然！我可以帮助您生成 PlantUML 语法的序列图，以说明用户如何与 Web 应用交互并使用 OAuth2 登录。这是图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

plantuml
复制代码
@startuml
actor 用户
participant "Web 应用" as WebApp
participant "OAuth2 提供商" as OAuthProvider

User -> WebApp: 访问 Web 应用
WebApp -> User: 显示登录按钮
User -> WebApp: 点击登录按钮
WebApp -> OAuthProvider: 将用户重定向到 OAuth2 提供商
User -> OAuthProvider: 输入凭据
OAuthProvider -> User: 验证凭据
OAuthProvider -> WebApp: 将用户重定向回 Web 应用并附带授权码
WebApp -> OAuthProvider: 发送授权码
OAuthProvider -> WebApp: 发送访问令牌
WebApp -> User: 登录用户
@enduml

在此图中，步骤如下

1. 用户访问 Web 应用。
2. Web 应用向用户显示登录按钮。
3. 用户点击登录按钮。
4. Web 应用将用户重定向到 OAuth2 提供商。
5. 用户在 OAuth2 提供商的登录页面上输入其凭据。
6. OAuth2 提供商验证用户的凭据。
7. OAuth2 提供商将用户重定向回 Web 应用，并附带授权码。
8. Web 应用将授权码发送给 OAuth2 提供商。
9. OAuth2 提供商用访问令牌交换授权码。
10. OAuth2 提供商将访问令牌发送回 Web 应用。
11. Web 应用使用访问令牌登录用户。

请注意，此图表提供了 OAuth2 登录流程的高级概述，可能不包含协议的所有复杂性或特定实现细节。它只是对一般流程的简化表示。