面向讀者：軟件工程師、架構(gòu)師、IT人士、設(shè)計(jì)人員等

文章目標(biāo)：提高我們的工作效率

概述

構(gòu)建系統(tǒng)設(shè)計(jì)框架圖

構(gòu)建序列圖

圖形生成的限制和技巧

概括

使用適當(dāng)內(nèi)容訓(xùn)練的大型語(yǔ)言模型可以生成的響應(yīng)不僅僅是英語(yǔ)文本。例如，ChatGPT 已知能夠生成多種編程語(yǔ)言的代碼。事實(shí)上，您還可以讓 ChatGPT 生成其他內(nèi)容，例如圖片、圖表等。
讓我們開始吧。

概述

這篇文章分為三個(gè)部分；他們是

• 構(gòu)建系統(tǒng)設(shè)計(jì)框架圖
• 構(gòu)建序列圖
• 圖形生成的限制和技巧

構(gòu)建系統(tǒng)設(shè)計(jì)框架圖

在當(dāng)今的軟件行業(yè)，不可避免地要考慮可擴(kuò)展性。這意味著一個(gè)相當(dāng)大的系統(tǒng)必須分解成更小的部分并在隔離的硬件上運(yùn)行。這些部分將通過網(wǎng)絡(luò)協(xié)作來完成任務(wù)。這與前互聯(lián)網(wǎng)時(shí)代形成鮮明對(duì)比，當(dāng)時(shí)軟件被設(shè)計(jì)為在單臺(tái)計(jì)算機(jī)上安裝和運(yùn)行。

讓我們考慮一個(gè)可以與移動(dòng)應(yīng)用程序交互的基于云的文件存儲(chǔ)系統(tǒng)。如果你在網(wǎng)上搜索一下，不難了解到這樣一個(gè)系統(tǒng)是如何構(gòu)建的，能夠支持海量的用戶。但一張圖片勝過一千個(gè)文字。你可以向 ChatGPT 描述這樣一個(gè)系統(tǒng)，并要求它生成一張圖片。提示可以如下：

云文件存儲(chǔ)服務(wù)具有以下組件：

1. 一個(gè)移動(dòng)客戶端，包含本地?cái)?shù)據(jù)庫(kù)、索引控制器、塊控制器和觀察者組件
2. 控制器和觀察者組件通過負(fù)載均衡器與服務(wù)器端交互
3. 服務(wù)器上有一個(gè)通知服務(wù)器將文件更新等消息推送到客戶端，客戶端的觀察程序組件將處理這些消息。
4. 文件的上傳和下載由文件處理服務(wù)器處理，文件被索引并分解為塊。這些塊存儲(chǔ)在云存儲(chǔ)中。
5. 文件的元數(shù)據(jù)由元數(shù)據(jù)服務(wù)器處理并存儲(chǔ)在元數(shù)據(jù)數(shù)據(jù)庫(kù)中。
6. 所有這些操作都使用構(gòu)建在 Kafka 之上的消息隊(duì)列來簡(jiǎn)化。

請(qǐng)使用 Mermaid 語(yǔ)法為此創(chuàng)建一個(gè)框圖。

構(gòu)建此類提示有兩個(gè)關(guān)鍵屬性：

• 清楚地記下了系統(tǒng)組件以及它們?nèi)绾蜗嗷プ饔?/li>
• 請(qǐng)求對(duì)圖表使用 Mermaid 語(yǔ)法

詳細(xì)說明應(yīng)包含哪些組件以及它們應(yīng)如何交互對(duì)于正確顯示圖中的元素非常重要。但是，ChatGPT 可以生成文本，但不能生成圖形。為了獲得圖表，您需要一種可以以純文本形式呈現(xiàn)的圖形生成語(yǔ)言。Mermaid.js就是一個(gè)例子。

ChatGPT 的響應(yīng)如下：

當(dāng)然！以下是表示云文件存儲(chǔ)服務(wù)中的組件及其交互的框圖：

mermaid
Copy code
graph TD
?
subgraph Mobile Client
??A[Local Database] --> B[Index Controller]
??B --> C[Chunk Controller]
??C --> D[Watcher]
end
?
subgraph Server Side
??E[Load Balancer] --> F[Controllers]
??E --> G[Watcher]
??F --> H[File Processing Server]
??H --> I[Cloud Storage]
??F --> J[Metadata Server]
??J --> K[Metadata Database]
??J --> L[Notification Server]
??L --> G
end
?
subgraph Message Queue
??M[Kafka]
end
?
A -- Notify changes --> D
D -- Watch events --> G
G -- Notify events --> D
F -- Upload/Download files --> H
H -- Store/Retrieve chunks --> I
F -- Process metadata --> J
J -- Store metadata --> K
F -- Push notifications --> L
L -- Publish messages --> M
M -- Subscribe to messages --> G

移動(dòng)客戶端由本地?cái)?shù)據(jù)庫(kù)、索引控制器、塊控制器和觀察器組件組成。這些組件通過負(fù)載平衡器與服務(wù)器端組件交互。服務(wù)器端由控制器、文件處理服務(wù)器、元數(shù)據(jù)服務(wù)器和通知服務(wù)器組成。文件處理服務(wù)器處理文件的上傳和下載，將它們分解成塊并將它們存儲(chǔ)在云存儲(chǔ)中。元數(shù)據(jù)服務(wù)器處理文件的元數(shù)據(jù)并將其存儲(chǔ)在元數(shù)據(jù)數(shù)據(jù)庫(kù)中。通知服務(wù)器將消息（例如文件更新）推送到客戶端，這些消息由觀察器組件處理。所有這些操作都使用構(gòu)建在 Kafka 之上的消息隊(duì)列進(jìn)行簡(jiǎn)化。

請(qǐng)注意，這是一個(gè)簡(jiǎn)化的表示，根據(jù)云文件存儲(chǔ)服務(wù)的具體實(shí)現(xiàn)，可能會(huì)有額外的組件或交互。

響應(yīng)中的代碼塊是 Mermaid.js 語(yǔ)法中的圖表。如果您將它們復(fù)制到在線Mermaid Live Editor，您將得到以下內(nèi)容：

Mermaid 是一個(gè) Javascript 庫(kù)，可以在網(wǎng)頁(yè)上渲染各種圖形。您可以進(jìn)一步完善代碼以添加顏色或?qū)K移動(dòng)到畫布上的不同位置。然而，如果您需要系統(tǒng)的可視化，ChatGPT 已經(jīng)是一個(gè)很大的幫助。

事實(shí)上，您可以將此技術(shù)與其他技術(shù)結(jié)合起來，例如向 ChatGPT 提供系統(tǒng)的高級(jí)目標(biāo)并要求它告訴您系統(tǒng)組件。然后在后續(xù)提示中，要求 ChatGPT 將其轉(zhuǎn)換為圖表。

您可以嘗試以下提示作為示例：

像 Twitter 這樣的社交媒體背后的系統(tǒng)組件是什么？它們?nèi)绾谓换ィ?/p>

然后在后續(xù)提示中，

請(qǐng)?zhí)峁┥鲜?Mermaid 語(yǔ)法的框圖。

構(gòu)建序列圖

作為另一個(gè)例子，讓我們讓 ChatGPT 生成一個(gè)序列圖。它是軟件工程中另一個(gè)常用的圖形，描述不同組件如何在時(shí)間軸中交互。

與上面相反，讓 ChatGPT 弄清楚組件和交互并在同一提示中生成圖片：

用戶如何與 Web 應(yīng)用程序交互并使用 OAuth2 登錄？請(qǐng)用 PlantUML 語(yǔ)法生成序列圖來解釋。

OAuth2是Web應(yīng)用程序上常見的身份驗(yàn)證方式，Web應(yīng)用程序服務(wù)器不需要您創(chuàng)建帳戶，而是使用其他平臺(tái)的帳戶代替。例如，您可以使用 Google 帳戶登錄 ChatGPT。Google 會(huì)檢查您的密碼，但應(yīng)用程序 (ChatGPT) 不屬于 Google。該過程涉及多方。

以下是 ChatGPT 向您解釋此過程的方式：

當(dāng)然！我可以幫助您使用 PlantUML 語(yǔ)法生成序列圖，以說明用戶如何與 Web 應(yīng)用程序交互并使用 OAuth2 登錄。示意如下：

plantuml
Copy code
@startuml
actor User
participant "Web App" as WebApp
participant "OAuth2 Provider" as OAuthProvider
?
User -> WebApp: Access web app
WebApp -> User: Display login button
User -> WebApp: Clicks login button
WebApp -> OAuthProvider: Redirects user to OAuthProvider
User -> OAuthProvider: Enters credentials
OAuthProvider -> User: Validates credentials
OAuthProvider -> WebApp: Redirects user with authorization code
WebApp -> OAuthProvider: Sends authorization code
OAuthProvider -> WebApp: Sends access token
WebApp -> User: Logs in user
@enduml

在此圖中，步驟如下：

1. 用戶訪問網(wǎng)絡(luò)應(yīng)用程序。
2. Web 應(yīng)用程序向用戶顯示登錄按鈕。
3. 用戶單擊登錄按鈕。
4. Web 應(yīng)用程序?qū)⒂脩糁囟ㄏ虻?OAuth2 提供商。
5. 用戶在 OAuth2 提供商的登錄頁(yè)面上輸入其憑據(jù)。
6. OAuth2 提供者驗(yàn)證用戶的憑據(jù)。
7. OAuth2 提供程序使用授權(quán)代碼將用戶重定向回 Web 應(yīng)用程序。
8. Web App 將授權(quán)代碼發(fā)送到 OAuth2 Provider。
9. OAuth2 Provider 將授權(quán)代碼交換為訪問令牌。
10. OAuth2 提供程序?qū)⒃L問令牌發(fā)送回 Web 應(yīng)用程序。
11. Web 應(yīng)用程序使用訪問令牌登錄用戶。

請(qǐng)注意，此圖提供了 OAuth2 登錄過程的高級(jí)概述，可能不包括協(xié)議的所有復(fù)雜性或特定的實(shí)現(xiàn)細(xì)節(jié)。它作為一般流程的簡(jiǎn)化表示。

在這里，您需要一種不同的圖形語(yǔ)法“語(yǔ)言”：PlantUML。您可以復(fù)制上面的代碼并在PlantUML Online Server上運(yùn)行它。您得到的圖片如下：

該序列圖解釋了登錄和身份驗(yàn)證是如何發(fā)生的以及訪問令牌是如何創(chuàng)建的。

請(qǐng)注意，這是有效的，因?yàn)?ChatGPT 可以準(zhǔn)確地闡明此過程的工作原理。如果您的流程太復(fù)雜或 ChatGPT 不知道，您應(yīng)該在提示中提供不同組件如何交互的詳細(xì)信息，并要求 ChatGPT 將您的描述轉(zhuǎn)換為圖形語(yǔ)言。

圖形生成的限制和技巧

作為一種語(yǔ)言模型，它的訓(xùn)練數(shù)據(jù)在很大程度上限制了它的能力。生成圖形可能不是構(gòu)建 ChatGPT 的主要興趣。眾所周知，ChatGPT 在某些圖形方面較弱，例如電子電路原理圖。

另請(qǐng)注意，如果您要求 ChatGPT 給您一個(gè)圖表，默認(rèn)情況下它會(huì)假設(shè)您指的是某種“ASCII 藝術(shù)”，這通?？雌饋聿徽_。因此，必須指定要使用的某種圖形語(yǔ)言，然后將輸出渲染為圖形。以下是一些示例：

• 正如您在上面第一個(gè)示例中看到的那樣，Mermaid 可以制作流程圖、序列圖、實(shí)體關(guān)系圖、甘特圖和思維導(dǎo)圖
• PlantUML，如上面另一個(gè)例子中使用的，可以制作很多UML圖，包括序列圖、狀態(tài)圖、類圖
• 對(duì)于其他簡(jiǎn)單的圖形（例如，只有節(jié)點(diǎn)和箭頭的圖形），您可以詢問 Graphviz 語(yǔ)法，也稱為“點(diǎn)語(yǔ)言”
• 對(duì)于通用圖形，你可以要求 TikZ 語(yǔ)法，它是 LaTeX 中的一個(gè)包
• 對(duì)于電路，有 Circuitikz，它是 TikZ 的專門版本

概括

在這篇文章中，您了解到 ChatGPT 不僅可以生成文本，還可以生成圖形，盡管是以某種圖形語(yǔ)言的形式。具體來說，您看到了 ChatGPT 如何

• 根據(jù)您的描述生成描述各方交互的框圖
• 生成一個(gè)序列圖來解釋復(fù)雜的邏輯來回答您的問題

最重要的是，讓 ChatGPT 生成圖形的關(guān)鍵是給出關(guān)于如何生成圖形的足夠詳細(xì)信息。您應(yīng)該指定格式（例如，采用 Mermaid 語(yǔ)法）并提供有關(guān)可視化內(nèi)容的足夠詳細(xì)信息。文章來源地址http://www.zghlxwxcb.cn/news/detail-770116.html

到了這里，關(guān)于學(xué)會(huì)用AI生成系統(tǒng)框架圖、時(shí)序圖圖表的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！