用ChatGPT，繪製一個賬號系統的C4架構圖

peida發表於2023-02-24
ChatGPT架構

hi，我是熵減，見字如面。

昨天我們用ChatGPT來設計一個賬號系統，並嘗試輸出：模型表，類關係圖，序列圖，狀態圖等常用的架構設計中常用的元素。

今天，我們繼續向更高層級延伸一下，看ChatGPT能不能更進一步釋放工程師的生產力，創造更多的可能性。

所以，這次我們就來嘗試用ChatGPT，來構建賬號系統的C4模型的架構圖啦。

由於ChatGPT不能直接輸出影像，所以我們轉化為用Mermaid的指令碼，透過markdown的方式輸出，再用支援Mermaid渲染的工具，將圖片顯示出來。

生成資料庫初始化SQL

我們首先來試試，生成資料庫初始化SQL吧。

提示：將以上賬號系統的資料模型，生成MySQL資料庫的SQL

ChatGPT：

-- 建立表：Account
CREATE TABLE Account (
  id INT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  email VARCHAR(50),
  phone_number VARCHAR(20),
  state VARCHAR(20),
  email_ver BOOLEAN DEFAULT false,
  phone_ver BOOLEAN DEFAULT false,
  created_at DATETIME,
  updated_at DATETIME
);

-- 建立表：EmailVerification
CREATE TABLE EmailVerification (
  id INT PRIMARY KEY,
  token VARCHAR(50) NOT NULL,
  expired_at DATETIME,
  account_id INT,
  FOREIGN KEY (account_id) REFERENCES Account(id)
);

-- 建立表：PhoneVerification
CREATE TABLE PhoneVerification (
  id INT PRIMARY KEY,
  token VARCHAR(50) NOT NULL,
  expired_at DATETIME,
  phone_number VARCHAR(20),
  account_id INT,
  FOREIGN KEY (account_id) REFERENCES Account(id)
);

-- 建立表：ThirdPartySocialAccount
CREATE TABLE ThirdPartySocialAccount (
  id INT PRIMARY KEY,
  provider VARCHAR(20) NOT NULL,
  provider_id VARCHAR(50) NOT NULL,
  account_id INT,
  FOREIGN KEY (account_id) REFERENCES Account(id)
);

-- 建立表：LoginRecord
CREATE TABLE LoginRecord (
  id INT PRIMARY KEY,
  account_id INT,
  login_at DATETIME,
  FOREIGN KEY (account_id) REFERENCES Account(id)
);

以上SQL語句可以在MySQL資料庫中建立相應的表，包括Account、EmailVerification、PhoneVerification、ThirdPartySocialAccount和LoginRecord五個表，並設定它們之間的關聯關係。

直接輸出C4 Diagram

接下來我們直接嘗試其是否可以輸出系統的C4模型的程式碼吧。

提示：對於系統架構圖，用Mermaid's c4 diagram是非常有效的，接下來，我們需要開始構建c4 模型的Mermaid指令碼，並用markdown

ChatGPT:

好的，以下是用Mermaid's C4 Diagram構建系統架構圖的Mermaid指令碼，並用markdown格式輸出：

## C4 Model for Account System

### Level 1: System Context Diagram

title Account System - System Context Diagram

actor User

User -> AccountSystem: Use

### Level 2: Container Diagram

title Account System - Container Diagram

AccountSystem -> AccountService: Uses
AccountSystem -> EmailService: Uses
AccountSystem -> PhoneService: Uses
AccountSystem -> ThirdPartyService: Uses
AccountSystem -> Database: Uses

AccountService -> Database: Reads/Writes
EmailService -> Database: Reads/Writes
PhoneService -> Database: Reads/Writes
ThirdPartyService -> Database: Reads/Writes

### Level 3: Component Diagram

title Account System - Component Diagram

AccountSystem --> AccountService: Manages Accounts
AccountSystem --> EmailService: Sends Email
AccountSystem --> PhoneService: Sends SMS
AccountSystem --> ThirdPartyService: Interacts with Social Platforms

AccountService --> Account: Accesses Account Data
EmailService --> EmailVerification: Validates Email
PhoneService --> PhoneVerification: Validates Phone Number

Account --> PasswordSecurity: Manages Passwords
Account --> LoginRecord: Records Login Information

雖然給出了完整的程式碼，但在我的vscode的外掛中，無法渲染出正確的結果圖。

我推測由於ChatGPT訓練的時間是21年的，所以其給出的程式碼版較低，而Mermaid近期升級了對C4模型的指令碼規範，所以，我試圖提升ChatGPT升級一下：

提示：這不是最新版的，請用Mermaid的最新版的C4 Diagrams指令碼，再次輸出

ChatGPT：

image

輸出的結果，依然在我的渲染外掛中無法展示。

所以，我嘗試換了一種方法，來讓其幫我繼續做C4模型圖，這也是我發現的一個大驚喜：

你給ChatGPT一個內容模版，它立馬就會學會應用，而且效果驚人。

下面我們繼續來看新方法的過程。

C4模型實驗

C4Context檢視

我輸入的提示：下面，我要給你一個最新版本的Mermaid C4 Diagrams指令碼案例，你要記住哦

ChatGPT：好的，儘管跟我分享吧。

我將從Mermaid官網上覆制的C4Context程式碼輸入給了ChatGPT：

    C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

ChatGPT:

image

提示：請按照上面給的案例，輸出我們修改後的賬號系統的C4Context的Mermaid指令碼，用markdown輸出

ChatGPT輸出：

C4Context
  title Account System Context Diagram

  Enterprise_Boundary(EB, "Account System Boundary") {
    System(AccountSystem, "Account System", "Allows users to manage their accounts, passwords, and login sessions.")
    User(User, "User", "A user of the account system.")

    System_Ext(MailSystem, "Email System", "The internal email system.")
    System_Ext(SMS, "SMS System", "The system that sends SMS messages for 2FA.")

    AccountSystem --> User
    AccountSystem --> MailSystem
    AccountSystem --> SMS
  }

  BiRel(User, AccountSystem, "Uses")
  Rel(AccountSystem, MailSystem, "Sends emails")
  Rel(AccountSystem, SMS, "Sends SMS messages for 2FA")

  UpdateElementStyle(User, $fontColor="red", $bgColor="grey", $borderColor="red")
  UpdateRelStyle(User, AccountSystem, $textColor="blue", $lineColor="blue", $offsetX="5")
  UpdateRelStyle(AccountSystem, MailSystem, $textColor="blue", $lineColor="blue", $offsetY="-10", $offsetX="-50")
  UpdateRelStyle(AccountSystem, SMS, $textColor="blue", $lineColor="blue", $offsetY="10", $offsetX="-50")

程式碼渲染後為：

image

實驗成功，那接下來的其他的C4模型，就可以如法炮製啦。

C4Container檢視

提供Mermaid官網的demo後，就可以提示：

請按照上面給的案例，輸出我們我們要處理賬號系統C4Container的Mermaid指令碼，用markdown輸出

ChatGPT輸出程式碼為：

C4Container
title Container diagram for Account System

System_Ext(identity_provider, "Identity Provider", "An external identity provider, such as Auth0 or Okta", $tags="v1.0")
Person(user, User, "A user of the system, with a registered account", $tags="v1.0")

Container_Boundary(c1, "Account System") {
    Container_Ext(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the account system SPA")
    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the account system functionality to users via their web browser")
    ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
    ContainerDb_Ext(api, "API Application", "Java, Docker Container", "Provides account system functionality via API")

}

Rel(user, web_app, "Uses", "HTTPS")
UpdateRelStyle(user, web_app, $offsetY="60", $offsetX="90")
Rel(user, spa, "Uses", "HTTPS")
UpdateRelStyle(user, spa, $offsetY="-40")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, api, "Reads from and writes to", "sync, JDBC")

Rel(identity_provider, user, "Provides authentication for")
UpdateRelStyle(identity_provider, user, $offsetX="-45")
Rel(api, identity_provider, "Uses", "async, OAuth2/OpenID Connect")
UpdateRelStyle(api, identity_provider, $offsetY="-60")

指令碼渲染後圖片為：

image

C4Component檢視

提供Mermaid官網的demo後，就可以提示：

請按照上面給的案例，輸出我們我們要處理賬號系統C4Component的Mermaid指令碼，用markdown輸出

ChatGPT輸出程式碼渲染後圖片為：

image

C4Dynamic 檢視

提供Mermaid官網的demo後，就可以提示：

請按照上面給的案例，輸出我們我們要處理賬號系統C4Component的Mermaid指令碼，用markdown輸出

ChatGPT輸出程式碼渲染後圖片為：

image

C4Deployment檢視

提供Mermaid官網的demo後，就可以提示：

請按照上面給的案例，輸出我們我們要處理賬號系統C4Deployment的Mermaid指令碼，用markdown輸出

ChatGPT輸出程式碼渲染後圖片為：

image

備註：在ChatGPT熟悉了2-3次過程後，只要輸入模版，其就會自動給出結果啦，連提示都可以省略了，重複工作完全自動化啦。

複雜狀態試圖

在今天的實驗中，最後嘗試做了一個負責的系統狀態轉化圖，具體如下：

提示：在賬號系統中的EmailVerification，PhoneVerification，ThirdPartyBinding的狀態發生變化時，Account中對應資訊變化的 Mermaid 指令碼

ChatGPT：

以下是在賬號系統中的EmailVerification，PhoneVerification，ThirdPartyBinding的狀態發生變化時，Account中對應資訊變化的Mermaid指令碼：

給出的程式碼如下：

stateDiagram-v2
  state "Account" as account {
    state "EmailVerified" as emailVerified
    state "PhoneVerified" as phoneVerified
    state "ThirdPartyBound" as thirdPartyBound

    [*] --> emailVerified : initialize
    [*] --> phoneVerified : initialize
    [*] --> thirdPartyBound : initialize

    emailVerified --> phoneVerified : Email verified
    emailVerified --> thirdPartyBound : Third-party bound
    phoneVerified --> thirdPartyBound : Third-party bound

    emailVerified --> emailVerified : Re-verify email
    phoneVerified --> phoneVerified : Re-verify phone
    thirdPartyBound --> thirdPartyBound : Unbind third-party

    emailVerified --> * : Email unverified
    phoneVerified --> * : Phone unverified
    thirdPartyBound --> * : No third-party
  }

這個指令碼包含了四個節點，分別表示賬戶，電子郵件驗證，電話驗證和第三方繫結。每個節點有對應的狀態，包括已驗證，無效，已繫結和未繫結。節點之間的關係用箭頭表示，例如賬戶有電子郵件驗證，電話驗證和第三方繫結。在狀態發生變化時，節點的顏色也會相應地改變。

程式碼渲染圖片：

image

繼續嘗試，輸出以上變化的序列圖，提示：

ChatGPT：

以下是在賬號系統中的EmailVerification，PhoneVerification，ThirdPartyBinding的狀態發生變化時，Account中對應資訊變化的序列圖的Mermaid指令碼：

sequenceDiagram
    participant Account
    participant EmailVerification
    participant PhoneVerification
    participant ThirdPartyBinding

    Account ->> EmailVerification: VerifyEmail(email, code)
    activate EmailVerification
    EmailVerification -->> Account: EmailVerified(email)
    deactivate EmailVerification

    Account ->> PhoneVerification: VerifyPhone(phone, code)
    activate PhoneVerification
    PhoneVerification -->> Account: PhoneVerified(phone)
    deactivate PhoneVerification

    Account ->> ThirdPartyBinding: BindThirdParty(thirdPartyAccount)
    activate ThirdPartyBinding
    ThirdPartyBinding -->> Account: ThirdPartyBound(thirdPartyAccount)
    deactivate ThirdPartyBinding

    Account ->> ThirdPartyBinding: UnbindThirdParty(thirdPartyAccount)
    activate ThirdPartyBinding
    ThirdPartyBinding -->> Account: ThirdPartyUnbound(thirdPartyAccount)
    deactivate ThirdPartyBinding

上面的序列圖描述了Account物件和三個相關物件（EmailVerification，PhoneVerification和ThirdPartyBinding）之間的互動，以處理EmailVerification，PhoneVerification和ThirdPartyBinding狀態變化的情況。

在這個序列圖中，Account物件向EmailVerification，PhoneVerification和ThirdPartyBinding傳送請求，以更新與它們關聯的資訊。每個參與者在收到請求後執行其操作，並透過訊息傳遞結果將結果返回給Account物件，以通知其資訊已被更新。

渲染後的圖片為：

image

寫在最後

今天的實驗，就這麼多啦，希望對你有啟發哦。

在日常的系統設計中，創造系統圖表是一件不太容易，也非常繁瑣的事情，而ChatGPT則可以很好的幫我們處理這些問題，讓我們可以節省不少的時間和精力哦。

在實驗的過程中，也可以發現ChatGPT存在這個各種可能性，只要我們能給出不錯的提示，提供有效的上下文，他就可以快速的學習，並將此結果有效的利用在接下來的任務之中。

ChatGPT還有很多未知的能力，值得每一個人去探索，保持好奇心吧。

相關文章