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：

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

所以，我嘗試換了一種方法，來讓其幫我繼續做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:

提示：請按照上面給的案例，輸出我們修改後的賬號系統的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")

代碼渲染後爲：

實驗成功，那接下來的其他的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")

腳本渲染後圖片爲：

C4Component視圖

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

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

ChatGPT輸出代碼渲染後圖片爲：

C4Dynamic 視圖

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

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

ChatGPT輸出代碼渲染後圖片爲：

C4Deployment視圖

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

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

ChatGPT輸出代碼渲染後圖片爲：

備註：在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
  }

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

代碼渲染圖片：

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

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對象，以通知其信息已被更新。

渲染後的圖片爲：

寫在最後

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

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

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

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

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

生成數據庫初始化SQL

直接輸出C4 Diagram

C4模型實驗

C4Context視圖

C4Container視圖

C4Component視圖

C4Dynamic 視圖

C4Deployment視圖

複雜狀態試圖

寫在最後

關於遊戲付費的一點想法

軟件工程：說透軟件5種常見的部署策略

微服務之道：8個原則，打造高效的微服務體系

技術團隊要小心，那些技術過早優化的跡象

阿里拆了中臺，中臺還有未來嗎？

API架構的選擇，RESTful、GraphQL還是gRPC

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結