主页 > 奇闻趣事 >

用ChatGPT，构建账号体系的C4模子架构图_chatgpt

奇闻趣事 2023-05-04 12:32www.bnfh.cn奇闻趣事

用ChatGPT，构建账号系统的C4模型架构图

hi，我是熵减，见字如面。

昨天我们用ChatGPT来设计一个账号系统，并尝试输出模型表，类关系图，序列图，状态图等常用的架构设计中常用的元素。

具体见用ChatGPT，快速设计一个真实的系统

今天，我们继续向更高层级延伸一下，看ChatGPT能不能更进一步释放工程师的生产力，创造更多的可能性。

所以，这次我们就来尝试用ChatGPT，来构建账号系统的C4模型的架构图啦。

什么是C4模型，见系统架构C4架构模型，画架构图的脚手架

由于ChatGPT不能直接输出图像，所以我们转化为用Mermaid的脚本，通过markdon的方式输出，再用支持Mermaid渲染的工具，将图片显示出来。

Part1生成数据库初始化SQL

我们来试试，生成数据库初始化SQL吧。

提示将以上账号系统的数据模型，生成MySQL数据库的SQL

ChatGPT

-- 创建表Aount
CREATE TABLE Aount (
  id INT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  passord 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,
  aount_id INT,
  FOREIGN KEY (aount_id) REFERENCES Aount(id)
);

-- 创建表PhoneVerification
CREATE TABLE PhoneVerification (
  id INT PRIMARY KEY,
  token VARCHAR(50) NOT NULL,
  expired_at DATETIME,
  phone_number VARCHAR(20),
  aount_id INT,
  FOREIGN KEY (aount_id) REFERENCES Aount(id)
);

-- 创建表ThirdPartySocialAount
CREATE TABLE ThirdPartySocialAount (
  id INT PRIMARY KEY,
  provider VARCHAR(20) NOT NULL,
  provider_id VARCHAR(50) NOT NULL,
  aount_id INT,
  FOREIGN KEY (aount_id) REFERENCES Aount(id)
);

-- 创建表LoginRecord
CREATE TABLE LoginRecord (
  id INT PRIMARY KEY,
  aount_id INT,
  login_at DATETIME,
  FOREIGN KEY (aount_id) REFERENCES Aount(id)
);

以上SQL语句可以在MySQL数据库中创建相应的表，包括Aount、EmailVerification、PhoneVerification、ThirdPartySocialAount和LoginRecord五个表，并设置它们之间的关联关系。

Part2直接输出C4 Diagram

接下来我们直接尝试其是否可以输出系统的C4模型的代码吧。

提示对于系统架构图，用Mermaid's c4 diagram是非常有效的，接下来，我们需要开始构建c4 模型的Mermaid脚本，并用markdon

ChatGPT:

好的，以下是用Mermaid's C4 Diagram构建系统架构图的Mermaid脚本，并用markdon格式输出

## C4 Model for Aount System

### Level 1: System Context Diagram

title Aount System - System Context Diagram

actor User

User -> AountSystem: Use

### Level 2: Container Diagram

title Aount System - Container Diagram

AountSystem -> AountService: Uses
AountSystem -> EmailService: Uses
AountSystem -> PhoneService: Uses
AountSystem -> ThirdPartyService: Uses
AountSystem -> Database: Uses

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

### Level 3: Component Diagram

title Aount System - Component Diagram

AountSystem --> AountService: Manages Aounts
AountSystem --> EmailService: Sends Email
AountSystem --> PhoneService: Sends SMS
AountSystem --> ThirdPartyService: Interacts ith Social Platforms

AountService --> Aount: Aesses Aount Data
EmailService --> EmailVerification: Validates Email
PhoneService --> PhoneVerification: Validates Phone Number

Aount --> PassordSecurity: Manages Passords
Aount --> LoginRecord: Records Login Information

虽然给出了完整的代码，但在我的vscode的插件中，无法渲染出正确的结果图。

我推测由于ChatGPT训练的数据集是时间是21年的，所以其给出的Mermaid代码版本较低，而Mermaid近期升级了对C4模型的脚本规范，所以，我试图提升ChatGPT升级一下

提示这不是最新版的，请用Mermaid的最新版的C4 Diagrams脚本，输出

ChatGPT

输出的结果，依然在我的渲染插件中无法展示。

所以，我尝试换了一种方法，来让其帮我继续做C4模型图，这也是我发现的一个大惊喜

你给ChatGPT一个内容模版，它立马就会学会应用，而且效果惊人。

下面我们继续来看新方法的过程。

Part3C4模型架构图

1C4Context视图

提示下面，我要给你一个最新版本的Mermaid C4 Diagrams脚本案例，你要记住哦

ChatGPT好的，尽管跟我分享吧。

我将从Mermaid官网上复制的C4Context代码输入给了ChatGPT

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

        Person(customerD, "Banking Customer D", "A customer of the bank, 
 ith personal bank aounts.")

        System(SystemAA, "Inter Banking System", "Allos customers to vie information about their bank aounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

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

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, ith personal bank aounts. 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, ith personal bank aounts.")

          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, ith personal bank aounts.")
          }
        }
      }

      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($c4ShapeInRo="3", $c4BoundaryInRo="1")

ChatGPT:

提示请按照上面给的案例，输出我们修改后的账号系统的C4Context的Mermaid脚本，用markdon输出

ChatGPT输出

C4Context
  title Aount System Context Diagram

  Enterprise_Boundary(EB, "Aount System Boundary") {
    System(AountSystem, "Aount System", "Allos users to manage their aounts, passords, and login sessions.")
    User(User, "User", "A user of the aount system.")

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

    AountSystem --> User
    AountSystem --> MailSystem
    AountSystem --> SMS
  }

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

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

代码渲染后为

可见，我的实验是成功的，那接下来的其他的C4模型图，就可以如法炮制啦。我们继续其他层级视图的输出吧。

2C4Container视图

提供Mermaid官网的demo后，就可以

提示

请按照上面给的案例，输出我们我们要处理账号系统C4Container的Mermaid脚本，用markdon输出

ChatGPT输出代码为

C4Container
title Container diagram for Aount 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, ith a registered aount", $tags="v1.0")

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

}

Rel(user, eb_app, "Uses", "HTTPS")
UpdateRelStyle(user, eb_app, $offsetY="60", $offsetX="90")
Rel(user, spa, "Uses", "HTTPS")
UpdateRelStyle(user, spa, $offsetY="-40")
Rel(eb_app, spa, "Delivers")
UpdateRelStyle(eb_app, spa, $offsetX="130")
Rel(spa, api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, api, "Reads from and rites 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")

脚本渲染后图片为

3C4Component视图

提供Mermaid官网的demo后，就可以

提示

请按照上面给的案例，输出我们我们要处理账号系统C4Component的Mermaid脚本，用markdon输出

具体代码省略啦，直接上图咯。

ChatGPT输出代码渲染后图片为

4C4Dynamic 视图

提供Mermaid官网的demo后，就可以提示

请按照上面给的案例，输出我们我们要处理账号系统C4Component的Mermaid脚本，用markdon输出

ChatGPT输出代码渲染后图片为

5C4Deployment视图

提供Mermaid官网的demo后，就可以

提示

请按照上面给的案例，输出我们我们要处理账号系统C4Deployment的Mermaid脚本，用markdon输出

ChatGPT输出代码渲染后图片为

备注在ChatGPT熟悉了2-3次过程后，只要输入模版，其就会自动给出结果啦，连提示都可以省略了，重复工作完全自动化啦。

Part4复杂的状态和序列图

在今天的实验中，尝试做了一个复杂的系统状态转化图，具体如下

提示在账号系统中的EmailVerification，PhoneVerification，ThirdPartyBinding的状态发生变化时，Aount中对应信息变化的 Mermaid 脚本

ChatGPT

以下是在账号系统中的EmailVerification，PhoneVerification，ThirdPartyBinding的状态发生变化时，Aount中对应信息变化的Mermaid脚本

给出的代码如下

stateDiagram-v2
  state "Aount" as aount {
    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的状态发生变化时，Aount中对应信息变化的序列图的Mermaid脚本

sequenceDiagram
    participant Aount
    participant EmailVerification
    participant PhoneVerification
    participant ThirdPartyBinding

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

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

    Aount ->> ThirdPartyBinding: BindThirdParty(thirdPartyAount)
    activate ThirdPartyBinding
    ThirdPartyBinding -->> Aount: ThirdPartyBound(thirdPartyAount)
    deactivate ThirdPartyBinding

    Aount ->> ThirdPartyBinding: UnbindThirdParty(thirdPartyAount)
    activate ThirdPartyBinding
    ThirdPartyBinding -->> Aount: ThirdPartyUnbound(thirdPartyAount)
    deactivate ThirdPartyBinding

上面的序列图描述了Aount对象和三个相关对象（EmailVerification，PhoneVerification和ThirdPartyBinding）之间的交互，以处理EmailVerification，PhoneVerification和ThirdPartyBinding状态变化的情况。

在这个序列图中，Aount对象向EmailVerification，PhoneVerification和ThirdPartyBinding发送请求，以更新与它们关联的信息。每个参与者在收到请求后执行其操作，并通过消息传递结果将结果返回给Aount对象，以通知其信息已被更新。

渲染后的图片为

Part5写在

今天的实验，就是这么多啦，希望对你有启发哦。

在日常的系统设计中，创造系统图表是一件不太容易，也非常繁琐的事情，而ChatGPT则可以很好地帮我们处理这些问题，让我们可以节省不少的时间和精力哦。

在实验的过程中，也可以发现ChatGPT存在这个各种可能性，只要我们能给出不错的提示，提供有效的上下文，他就可以快速的学习，并将此结果有效的利用在接下来的任务之中。

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

—————— THE END ——————

行动进化自己，输出成就他人

与你一同终身成长

上一篇：用ChatGPT操纵NPC，举措传神如一般人！斯坦福谷歌下一篇：音悦台公布回来现在已开放下载

用ChatGPT，构建账号体系的C4模子架构图_chatgpt

用ChatGPT，构建账号系统的C4模型架构图

Part1生成数据库初始化SQL

Part2直接输出C4 Diagram

Part3C4模型架构图

1C4Context视图

2C4Container视图

3C4Component视图

4C4Dynamic 视图

5C4Deployment视图

Part4复杂的状态和序列图

Part5写在

怪异网

怪异导航

奇闻怪事

灵异事件

世界之最

用ChatGPT，构建账号体系的C4模子架构图_chatgpt

用ChatGPT，构建账号系统的C4模型架构图

Part1生成数据库初始化SQL

Part2直接输出C4 Diagram

Part3C4模型架构图

1C4Context视图

2C4Container视图

3C4Component视图

4C4Dynamic 视图

5C4Deployment视图

Part4复杂的状态和序列图

Part5写在

天下奇闻趣事

怪异网

怪异导航

奇闻怪事

灵异事件

世界之最