如何用一个ChatGpt，绘制C4架构图

　　今天，我们一起来看看ChatGPT能不能更进一步释放工程师的生产力，创造更多的可能性。
　　所以，这次我们就来尝试用ChatGPT，来构建账号系统的C4模型的架构图啦。
　　由于ChatGPT不能直接输出图像，所以我们转化为用Mermaid的脚本，通过markdown的方式输出，再用支持Mermaid渲染的工具，将图片显示出来。生成数据库初始化SQL
　　我们首先来试试，生成数据库初始化SQL吧。
　　提示：将以上账号系统的数据模型，生成MySQL数据库的SQL
　　ChatGPT：创建表：AccountCREATETABLEAccount（idINTPRIMARYKEY，usernameVARCHAR（50）NOTNULL，passwordVARCHAR（50）NOTNULL，emailVARCHAR（50），phonenumberVARCHAR（20），stateVARCHAR（20），emailverBOOLEANDEFAULTfalse，phoneverBOOLEANDEFAULTfalse，createdatDATETIME，updatedatDATETIME）；创建表：EmailVerificationCREATETABLEEmailVerification（idINTPRIMARYKEY，tokenVARCHAR（50）NOTNULL，expiredatDATETIME，accountidINT，FOREIGNKEY（accountid）REFERENCESAccount（id））；创建表：PhoneVerificationCREATETABLEPhoneVerification（idINTPRIMARYKEY，tokenVARCHAR（50）NOTNULL，expiredatDATETIME，phonenumberVARCHAR（20），accountidINT，FOREIGNKEY（accountid）REFERENCESAccount（id））；创建表：ThirdPartySocialAccountCREATETABLEThirdPartySocialAccount（idINTPRIMARYKEY，providerVARCHAR（20）NOTNULL，provideridVARCHAR（50）NOTNULL，accountidINT，FOREIGNKEY（accountid）REFERENCESAccount（id））；创建表：LoginRecordCREATETABLELoginRecord（idINTPRIMARYKEY，accountidINT，loginatDATETIME，FOREIGNKEY（accountid）REFERENCESAccount（id））；
　　以上SQL语句可以在MySQL数据库中创建相应的表，包括Account、EmailVerification、PhoneVerification、ThirdPartySocialAccount和LoginRecord五个表，并设置它们之间的关联关系。直接输出C4Diagram
　　接下来我们直接尝试其是否可以输出系统的C4模型的代码吧。
　　提示：对于系统架构图，用Mermaidsc4diagram是非常有效的，接下来，我们需要开始构建c4模型的Mermaid脚本，并用markdown
　　ChatGPT：
　　好的，以下是用MermaidsC4Diagram构建系统架构图的Mermaid脚本，并用markdown格式输出：C4ModelforAccountSystemLevel1：SystemContextDiagramtitleAccountSystemSystemContextDiagramactorUserUserAccountSystem：UseLevel2：ContainerDiagramtitleAccountSystemContainerDiagramAccountSystemAccountService：UsesAccountSystemEmailService：UsesAccountSystemPhoneService：UsesAccountSystemThirdPartyService：UsesAccountSystemDatabase：UsesAccountServiceDatabase：ReadsWritesEmailServiceDatabase：ReadsWritesPhoneServiceDatabase：ReadsWritesThirdPartyServiceDatabase：ReadsWritesLevel3：ComponentDiagramtitleAccountSystemComponentDiagramAccountSystemAccountService：ManagesAccountsAccountSystemEmailService：SendsEmailAccountSystemPhoneService：SendsSMSAccountSystemThirdPartyService：InteractswithSocialPlatformsAccountServiceAccount：AccessesAccountDataEmailServiceEmailVerification：ValidatesEmailPhoneServicePhoneVerification：ValidatesPhoneNumberAccountPasswordSecurity：ManagesPasswordsAccountLoginRecord：RecordsLoginInformation
　　虽然给出了完整的代码，但在我的vscode的插件中，无法渲染出正确的结果图。
　　我推测由于ChatGPT训练的时间是21年的，所以其给出的代码版较低，而Mermaid近期升级了对C4模型的脚本规范，所以，我试图提升ChatGPT升级一下：
　　提示：这不是最新版的，请用Mermaid的最新版的C4Diagrams脚本，再次输出
　　ChatGPT：
　　输出的结果，依然在我的渲染插件中无法展示。
　　所以，我尝试换了一种方法，来让其帮我继续做C4模型图，这也是我发现的一个大惊喜：
　　你给ChatGPT一个内容模版，它立马就会学会应用，而且效果惊人。
　　下面我们继续来看新方法的过程。C4模型实验C4Context视图
　　我输入的提示：下面，我要给你一个最新版本的MermaidC4Diagrams脚本案例，你要记住哦
　　ChatGPT：好的，尽管跟我分享吧。
　　我将从Mermaid官网上复制的C4Context代码输入给了ChatGPT：C4ContexttitleSystemContextdiagramforInternetBankingSystemEnterpriseBoundary（b0，BankBoundary0）｛Person（customerA，BankingCustomerA，Acustomerofthebank，withpersonalbankaccounts。）Person（customerB，BankingCustomerB）PersonExt（customerC，BankingCustomerC，desc）Person（customerD，BankingCustomerD，Acustomerofthebank，
　　withpersonalbankaccounts。）System（SystemAA，InternetBankingSystem，Allowscustomerstoviewinformationabouttheirbankaccounts，andmakepayments。）EnterpriseBoundary（b1，BankBoundary）｛SystemDbExt（SystemE，MainframeBankingSystem，Storesallofthecorebankinginformationaboutcustomers，accounts，transactions，etc。）SystemBoundary（b2，BankBoundary2）｛System（SystemA，BankingSystemA）System（SystemB，BankingSystemB，Asystemofthebank，withpersonalbankaccounts。nextline。）｝SystemExt（SystemC，Emailsystem，TheinternalMicrosoftExchangeemailsystem。）SystemDb（SystemD，BankingSystemDDatabase，Asystemofthebank，withpersonalbankaccounts。）Boundary（b3，BankBoundary3，boundary）｛SystemQueue（SystemF，BankingSystemFQueue，Asystemofthebank。）SystemQueueExt（SystemG，BankingSystemGQueue，Asystemofthebank，withpersonalbankaccounts。）｝｝｝BiRel（customerA，SystemAA，Uses）BiRel（SystemAA，SystemE，Uses）Rel（SystemAA，SystemC，Sendsemails，SMTP）Rel（SystemC，customerA，Sendsemailsto）UpdateElementStyle（customerA，fontColorred，bgColorgrey，borderColorred）UpdateRelStyle（customerA，SystemAA，textColorblue，lineColorblue，offsetX5）UpdateRelStyle（SystemAA，SystemE，textColorblue，lineColorblue，offsetY10）UpdateRelStyle（SystemAA，SystemC，textColorblue，lineColorblue，offsetY40，offsetX50）UpdateRelStyle（SystemC，customerA，textColorred，lineColorred，offsetX50，offsetY20）UpdateLayoutConfig（c4ShapeInRow3，c4BoundaryInRow1）
　　ChatGPT：
　　提示：请按照上面给的案例，输出我们修改后的账号系统的C4Context的Mermaid脚本，用markdown输出
　　ChatGPT输出：C4ContexttitleAccountSystemContextDiagramEnterpriseBoundary（EB，AccountSystemBoundary）｛System（AccountSystem，AccountSystem，Allowsuserstomanagetheiraccounts，passwords，andloginsessions。）User（User，User，Auseroftheaccountsystem。）SystemExt（MailSystem，EmailSystem，Theinternalemailsystem。）SystemExt（SMS，SMSSystem，ThesystemthatsendsSMSmessagesfor2FA。）AccountSystemUserAccountSystemMailSystemAccountSystemSMS｝BiRel（User，AccountSystem，Uses）Rel（AccountSystem，MailSystem，Sendsemails）Rel（AccountSystem，SMS，SendsSMSmessagesfor2FA）UpdateElementStyle（User，fontColorred，bgColorgrey，borderColorred）UpdateRelStyle（User，AccountSystem，textColorblue，lineColorblue，offsetX5）UpdateRelStyle（AccountSystem，MailSystem，textColorblue，lineColorblue，offsetY10，offsetX50）UpdateRelStyle（AccountSystem，SMS，textColorblue，lineColorblue，offsetY10，offsetX50）
　　代码渲染后为：
　　实验成功，那接下来的其他的C4模型，就可以如法炮制啦。C4Container视图
　　提供Mermaid官网的demo后，就可以提示：
　　请按照上面给的案例，输出我们我们要处理账号系统C4Container的Mermaid脚本，用markdown输出
　　ChatGPT输出代码为：C4ContainertitleContainerdiagramforAccountSystemSystemExt（identityprovider，IdentityProvider，Anexternalidentityprovider，suchasAuth0orOkta，tagsv1。0）Person（user，User，Auserofthesystem，witharegisteredaccount，tagsv1。0）ContainerBoundary（c1，AccountSystem）｛ContainerExt（webapp，WebApplication，Java，SpringMVC，DeliversthestaticcontentandtheaccountsystemSPA）Container（spa，SinglePageApp，JavaScript，Angular，Providesalltheaccountsystemfunctionalitytousersviatheirwebbrowser）ContainerDb（database，Database，SQLDatabase，Storesuserregistrationinformation，hashedauthcredentials，accesslogs，etc。）ContainerDbExt（api，APIApplication，Java，DockerContainer，ProvidesaccountsystemfunctionalityviaAPI）｝Rel（user，webapp，Uses，HTTPS）UpdateRelStyle（user，webapp，offsetY60，offsetX90）Rel（user，spa，Uses，HTTPS）UpdateRelStyle（user，spa，offsetY40）Rel（webapp，spa，Delivers）UpdateRelStyle（webapp，spa，offsetX130）Rel（spa，api，Uses，async，JSONHTTPS）RelBack（database，api，Readsfromandwritesto，sync，JDBC）Rel（identityprovider，user，Providesauthenticationfor）UpdateRelStyle（identityprovider，user，offsetX45）Rel（api，identityprovider，Uses，async，OAuth2OpenIDConnect）UpdateRelStyle（api，identityprovider，offsetY60）
　　脚本渲染后图片为：
　　C4Component视图
　　提供Mermaid官网的demo后，就可以提示：
　　请按照上面给的案例，输出我们我们要处理账号系统C4Component的Mermaid脚本，用markdown输出
　　ChatGPT输出代码渲染后图片为：
　　C4Dynamic视图
　　提供Mermaid官网的demo后，就可以提示：
　　请按照上面给的案例，输出我们我们要处理账号系统C4Component的Mermaid脚本，用markdown输出
　　ChatGPT输出代码渲染后图片为：
　　C4Deployment视图
　　提供Mermaid官网的demo后，就可以提示：
　　请按照上面给的案例，输出我们我们要处理账号系统C4Deployment的Mermaid脚本，用markdown输出
　　ChatGPT输出代码渲染后图片为：
　　备注：在ChatGPT熟悉了23次过程后，只要输入模版，其就会自动给出结果啦，连提示都可以省略了，重复工作完全自动化啦。复杂状态试图
　　在今天的实验中，最后尝试做了一个负责的系统状态转化图，具体如下：
　　提示：在账号系统中的EmailVerification，PhoneVerification，ThirdPartyBinding的状态发生变化时，Account中对应信息变化的Mermaid脚本
　　ChatGPT：
　　以下是在账号系统中的EmailVerification，PhoneVerification，ThirdPartyBinding的状态发生变化时，Account中对应信息变化的Mermaid脚本：
　　给出的代码如下：stateDiagramv2stateAccountasaccount｛stateEmailVerifiedasemailVerifiedstatePhoneVerifiedasphoneVerifiedstateThirdPartyBoundasthirdPartyBound〔〕emailVerified：initialize〔〕phoneVerified：initialize〔〕thirdPartyBound：initializeemailVerifiedphoneVerified：EmailverifiedemailVerifiedthirdPartyBound：ThirdpartyboundphoneVerifiedthirdPartyBound：ThirdpartyboundemailVerifiedemailVerified：ReverifyemailphoneVerifiedphoneVerified：ReverifyphonethirdPartyBoundthirdPartyBound：UnbindthirdpartyemailVerified：EmailunverifiedphoneVerified：PhoneunverifiedthirdPartyBound：Nothirdparty｝
　　这个脚本包含了四个节点，分别表示账户，电子邮件验证，电话验证和第三方绑定。每个节点有对应的状态，包括已验证，无效，已绑定和未绑定。节点之间的关系用箭头表示，例如账户有电子邮件验证，电话验证和第三方绑定。在状态发生变化时，节点的颜色也会相应地改变。
　　代码渲染图片：
　　继续尝试，输出以上变化的序列图，提示：
　　ChatGPT：
　　以下是在账号系统中的EmailVerification，PhoneVerification，ThirdPartyBinding的状态发生变化时，Account中对应信息变化的序列图的Mermaid脚本：sequenceDiagramparticipantAccountparticipantEmailVerificationparticipantPhoneVerificationparticipantThirdPartyBindingAccountEmailVerification：VerifyEmail（email，code）activateEmailVerificationEmailVerificationAccount：EmailVerified（email）deactivateEmailVerificationAccountPhoneVerification：VerifyPhone（phone，code）activatePhoneVerificationPhoneVerificationAccount：PhoneVerified（phone）deactivatePhoneVerificationAccountThirdPartyBinding：BindThirdParty（thirdPartyAccount）activateThirdPartyBindingThirdPartyBindingAccount：ThirdPartyBound（thirdPartyAccount）deactivateThirdPartyBindingAccountThirdPartyBinding：UnbindThirdParty（thirdPartyAccount）activateThirdPartyBindingThirdPartyBindingAccount：ThirdPartyUnbound（thirdPartyAccount）deactivateThirdPartyBinding
　　上面的序列图描述了Account对象和三个相关对象（EmailVerification，PhoneVerification和ThirdPartyBinding）之间的交互，以处理EmailVerification，PhoneVerification和ThirdPartyBinding状态变化的情况。
　　在这个序列图中，Account对象向EmailVerification，PhoneVerification和ThirdPartyBinding发送请求，以更新与它们关联的信息。每个参与者在收到请求后执行其操作，并通过消息传递结果将结果返回给Account对象，以通知其信息已被更新。
　　渲染后的图片为：
　　写在最后
　　今天的实验，就这么多啦，希望对你有所启发。
　　在日常的系统设计中，创造系统图表是一件不太容易，也非常繁琐的事情，而ChatGPT则可以很好的帮我们处理这些问题，让我们可以节省不少的时间和精力。
　　在实验的过程中，也可以发现ChatGPT存在这个各种可能性，只要我们能给出不错的提示，提供有效的上下文，他就可以快速的学习，并将此结果有效的利用在接下来的任务之中。
　　ChatGPT还有很多未知的能力，值得每一个人去探索，保持好奇心吧。