hi，我是(shi)熵減，見字如面。

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

今(jin)天，我們(men)繼續(xu)向更(geng)高層級(ji)延伸一下，看ChatGPT能不(bu)能更(geng)進一步釋放工程師的生產(chan)力(li)，創造更(geng)多的可能性。

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

由于ChatGPT不能直接輸出(chu)圖像(xiang)，所以我(wo)們轉(zhuan)化為用(yong)Mermaid的腳本，通過(guo)markdown的方式輸出(chu)，再用(yong)支持(chi)Mermaid渲染的工具，將圖片(pian)顯示(shi)出(chu)來。

生成數據庫初始化SQL

我們首先來試試，生成(cheng)數(shu)據庫(ku)初始化(hua)SQL吧。

提(ti)示：將以(yi)上賬(zhang)號(hao)系統的數據(ju)模(mo)型(xing)，生成MySQL數據(ju)庫的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)
);

以(yi)上SQL語句可以(yi)在MySQL數據庫中創建相應的表，包括Account、EmailVerification、PhoneVerification、ThirdPartySocialAccount和LoginRecord五(wu)個表，并設置它們之間的關(guan)(guan)聯關(guan)(guan)系。

直接輸出C4 Diagram

接下(xia)來我們直接嘗試其是否可以輸出系統的C4模型的代碼吧(ba)。

提示：對于(yu)系統架構圖(tu)，用(yong)Mermaid's c4 diagram是非(fei)常有效的，接下來，我們需要開始構建c4 模型的Mermaid腳本(ben)，并用(yong)markdown

ChatGPT:

好的，以下(xia)是用Mermaid's C4 Diagram構建系統架構圖的Mermaid腳本(ben)，并(bing)用markdown格式輸(shu)出：

## 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

雖(sui)然給出了完(wan)整的(de)代碼，但在(zai)我(wo)的(de)vscode的(de)插件(jian)中(zhong)，無法(fa)渲染出正確(que)的(de)結果(guo)圖(tu)。

我(wo)推(tui)測(ce)由于ChatGPT訓(xun)練的時(shi)間是21年(nian)的，所以其給出(chu)的代(dai)碼版較低，而Mermaid近期升(sheng)(sheng)級(ji)了對C4模(mo)型(xing)的腳本規范，所以，我(wo)試圖提(ti)升(sheng)(sheng)ChatGPT升(sheng)(sheng)級(ji)一下：

提(ti)示(shi)：這不是最新(xin)(xin)版的(de)(de)，請用Mermaid的(de)(de)最新(xin)(xin)版的(de)(de)C4 Diagrams腳本，再次輸出

ChatGPT：

輸出(chu)的(de)(de)結果，依(yi)然(ran)在我(wo)的(de)(de)渲染(ran)插件(jian)中無法展示。

所以，我(wo)嘗試換(huan)了(le)一(yi)種方法，來讓其幫(bang)我(wo)繼(ji)續做C4模型圖，這也(ye)是我(wo)發現的一(yi)個大驚喜：

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

下面(mian)我(wo)們繼(ji)續來看新方法的過(guo)程(cheng)。

C4模型實驗

C4Context視圖

我輸入(ru)的提示(shi)：下(xia)面，我要(yao)給你一個最新版本的Mermaid C4 Diagrams腳本案例，你要(yao)記住(zhu)哦(e)

ChatGPT：好的，盡管(guan)跟我分享吧。

我將從Mermaid官(guan)網(wang)上復制的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:

提示：請(qing)按照上面(mian)給的(de)案例，輸出(chu)我(wo)們修改后(hou)的(de)賬(zhang)號系統的(de)C4Context的(de)Mermaid腳本，用markdown輸出(chu)

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")

代碼渲染后為：

實驗(yan)成功(gong)，那接下來的其他(ta)的C4模(mo)型，就可以(yi)如法炮制啦。

C4Container視圖

提供Mermaid官網的(de)demo后，就可以提示：

請按照(zhao)上面給(gei)的案例，輸(shu)(shu)出(chu)我們(men)我們(men)要處理賬(zhang)號系統C4Container的Mermaid腳(jiao)本，用markdown輸(shu)(shu)出(chu)

ChatGPT輸出代(dai)碼為：

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")

腳本渲染后圖片為：

C4Component視圖

提供Mermaid官網的(de)demo后，就(jiu)可(ke)以提示：

請按照上(shang)面(mian)給的案例，輸(shu)出我(wo)們(men)我(wo)們(men)要處理賬號系統C4Component的Mermaid腳本，用(yong)markdown輸(shu)出

ChatGPT輸出代碼渲染后圖片為：

C4Dynamic 視圖

提(ti)(ti)供Mermaid官(guan)網的demo后，就可以提(ti)(ti)示：

請按照(zhao)上(shang)面(mian)給的案例，輸(shu)出我們我們要處理賬號系統C4Component的Mermaid腳本，用markdown輸(shu)出

ChatGPT輸出代碼渲染后圖片為(wei)：

C4Deployment視圖

提供(gong)Mermaid官(guan)網的demo后，就可以提示：

請按照上面給(gei)的案例，輸出我們我們要處(chu)理賬號系統(tong)C4Deployment的Mermaid腳本(ben)，用(yong)markdown輸出

ChatGPT輸出代(dai)碼渲染后圖片為：

備(bei)注：在ChatGPT熟悉(xi)了2-3次過程(cheng)后(hou)，只要輸入(ru)模版，其就會自動給出結果啦(la)，連提(ti)示都可以省略了，重復工作完(wan)全自動化啦(la)。

復雜狀態試圖

在今天的實驗中，最后(hou)嘗試做了一個負責的系統狀態轉(zhuan)化(hua)圖，具體如(ru)下：

提示：在賬號系(xi)統中的(de)EmailVerification，PhoneVerification，ThirdPartyBinding的(de)狀(zhuang)態發生(sheng)變化(hua)時，Account中對應信息(xi)變化(hua)的(de) Mermaid 腳本

ChatGPT：

以下是在賬(zhang)號系(xi)統中(zhong)的EmailVerification，PhoneVerification，ThirdPartyBinding的狀態發生變(bian)化時(shi)，Account中(zhong)對應信息(xi)變(bian)化的Mermaid腳(jiao)本：

給出的代碼如下：

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
  }

這個(ge)腳本包含了四個(ge)節點(dian)(dian)，分別表(biao)示賬戶(hu)，電(dian)(dian)子郵件驗(yan)證，電(dian)(dian)話驗(yan)證和第三(san)方綁定。每個(ge)節點(dian)(dian)有(you)對應的狀態，包括已驗(yan)證，無效，已綁定和未綁定。節點(dian)(dian)之間(jian)的關系用箭頭表(biao)示，例(li)如賬戶(hu)有(you)電(dian)(dian)子郵件驗(yan)證，電(dian)(dian)話驗(yan)證和第三(san)方綁定。在狀態發生變(bian)化時，節點(dian)(dian)的顏色(se)也會(hui)相應地改變(bian)。

代碼渲染圖片：

繼(ji)續(xu)嘗試，輸出以上變化(hua)的序列(lie)圖，提示：

ChatGPT：

以下是在賬(zhang)號系統(tong)中的(de)EmailVerification，PhoneVerification，ThirdPartyBinding的(de)狀(zhuang)態發(fa)生變(bian)化時，Account中對應信息變(bian)化的(de)序列圖的(de)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

上面的序列(lie)圖(tu)描述(shu)了Account對象和(he)三個相關對象（EmailVerification，PhoneVerification和(he)ThirdPartyBinding）之間的交互，以(yi)處理EmailVerification，PhoneVerification和(he)ThirdPartyBinding狀態變(bian)化的情況。

在(zai)這個序(xu)列(lie)圖(tu)中，Account對(dui)象(xiang)向EmailVerification，PhoneVerification和ThirdPartyBinding發送請(qing)求，以更新與(yu)它們關聯(lian)的(de)信(xin)息。每個參(can)與(yu)者在(zai)收到請(qing)求后執行其(qi)操作，并(bing)通(tong)(tong)過消息傳遞結果將結果返回給Account對(dui)象(xiang)，以通(tong)(tong)知其(qi)信(xin)息已被更新。

渲染后的圖片為：

寫在最后

今天的實驗，就這么(me)多啦，希望對(dui)你有(you)啟發(fa)哦。

在日(ri)常的系統設計中(zhong)，創造系統圖表是(shi)一件(jian)不太容易，也非常繁(fan)瑣(suo)的事(shi)情(qing)，而(er)ChatGPT則可以很好(hao)的幫我(wo)們處理這些問題(ti)，讓我(wo)們可以節省不少的時間和精(jing)力哦。

在(zai)實驗的(de)(de)(de)過程中(zhong)，也可以(yi)發現ChatGPT存在(zai)這個各種可能性(xing)，只(zhi)要我們能給出(chu)不錯的(de)(de)(de)提示，提供有(you)效(xiao)的(de)(de)(de)上下文，他就可以(yi)快速(su)的(de)(de)(de)學習，并(bing)將此(ci)結(jie)果有(you)效(xiao)的(de)(de)(de)利用在(zai)接(jie)下來的(de)(de)(de)任務之中(zhong)。

ChatGPT還有(you)很多(duo)未知的能力，值得每一(yi)個(ge)人去探索，保持好(hao)奇心吧。