作为一名程序员，如果让你画出你现在正在开发的项目的架构图，你会怎么画？后台先来同步一个idea。架构图的作用是什么？我来回答：为开发团队（来自开发工程师、测试工程师、架构师、测试人员、项目经验、产品经理、交互设计师、用户）提供一种简单的方法来更轻松地描述和交流软件架构，从而实现可视化团队中每个人心目中的架构更容易理解并形成一个统一体；总结一下：画一张图，让团队更好的理解软件架构，统一认知；下面，我简单思考一下，作为一个程序员，如何画出现在的软件架构。开发项目的架构图。问题答案我们在哪里？现状我是一名程序员，我不知道如何绘制项目的架构图，我们将何去何从？目的是画一个架构图，方便同行和上级沟通。我们怎么去那里？实现路径C4PlantUML实现路径C4模型是一种架构设计的方法论，忽略不在同一个抽象中的细节，以便更好地表达和可视化。它可以比作地图。地图分为国家、省、市、街道4个等级；而C4模型也分为4个层次，Context系统上下文、Container容器、Component组件、Code代码；加上3个补充视图，即系统全景图、动态图、部署图，可以完整描述一个项目的软件架构；布局从上到下分为4个布局描述语法从左到右LAYOUT_TOP_DOWNLAYOUT_RIGHT_LEFT自由布局LAYOUT_WITH_LEGEND草图布局LAYOUT_AS_SKETCH可以自定义更多布局，源码基于plantUML语法；上下文元素如下：元素名称功能角色Person外部角色Person_Ext关注的软件系统System外部软件系统System_Ext系统数据库SystemDb系统外部数据库SystemDb_Ext系统虚拟框架System_Boundry企业虚拟框架Enterprise_Boundry可以使用plantUML绘制系统全景图和系统物理部署图；下面是一个例子：@startuml"enterprise"!include../C4_Context.pumlLAYOUT_TOP_DOWNLAYOUT_WITH_LEGEND()Person(customer,"customer","acustomerofalimitedtool")Enterprise_Boundary(c0,"LimitingTools"){Person(csa,"CustomerServiceAgent","HandlingCustomerInquiries")System(ecommerce,"EcommerceSystem","Allowscustomerstopurchaseonlinetoolsthroughthewidgets.comsite")System(fulfilment,"FulfillmentSystem","负责处理和路由客户订单")}System(taxamo,"Taxamo","计算地方税并充当BraintreePayments前台")System(braintree,"BraintreePayments","处理信用卡支付购买工具")System(post,"JerseyPost","计算全球包裹邮资")Rel_R(customer,csa,"Consulting","Phone")Rel_R(customer,ecommerce,"Placetoolorder")Rel(csa,ecommerce,"查询订单information")Rel_R(ecommerce,fulfilment,"发送订单信息")Rel_D(fulfilment,post,"获取物流费用")Rel_D(ecommerce,taxamo,"代理信用卡处理")Rel_L(taxamo,braintree,"使用信用卡")Lay_D(customer,braintree)@endumlContainer容器元素如下：元素名称函数ContainerContainerContainerDatabaseContainerDbContainerVirtualBoxContainer_Boundry@startuml!include../C4_Container.pumlLAYOUT_TOP_DOWNLAYOUT_WITH_LEGEND()title网上银行系统容器图Person(customer,customer,"银行客户有自己的私人银行账户")System_Boundary(c1,"网银"){Container(web_app,"WebApplication","Java,SpringMVC","传递静态内容与网银SPA")Container(spa,"单页应用","JavaScript,Angular","通过浏览器向用户提供所有网上银行功能")Container(mobile_app,"移动应用程序","C#,Xamarin","通过移动设备提供有限的网上银行功能")ContainerDb(database,"database","SQLdatabase","存储用户注册信息、随机认证密码、访问日志等")Container(backend_api,"API应用","Java,Docker容器","通过API提供网银功能")}System_Ext(email_system,"邮件系统“，“网络软件交换系统")System_Ext(banking_system,"大型银行系统",";存储所有核心客户、账号、交易银行信息)Rel(customer,web_app,"use","HTTPS")Rel(customer,spa,"use","HTTPS")Rel(customer,mobile_app,"use")Rel_Neighbor(web_app,spa,"transport")Rel(spa,backend_api,"use","async,JSON/HTTPS")Rel(mobile_app,backend_api,"use","async,JSON/HTTPS")Rel_Back_Neighbor(数据库,backend_api,"readandwrite","synchronization,JDBC")Rel_Back(customer,email_system,"sendemailto")Rel_Back(email_system,backend_api,"sendemail",SMTP)Rel_Neighbor(backend_api,banking_system,"use""Synchronous/Asynchronous,XML/HTTPS")@endumlComponent组件元素如下：元素名称功能组件组件组件数据库ComponentDb@startuml!include../C4_Component.pumlLAYOUT_WITH_LEGEND()title网上银行系统组件图-API应用容器(spa,"单页应用","javascriptandangular","提供所有网银系统功能User.")Container(ma,"MobileApplication","Xamarin","通过移动设备向用户提供有限的网银系统功能。")ContainerDb(db,"Database","RelationalDatabaseSchema","存储用户注册信息信息、随机身份验证令牌、访问日志等")System_Ext(mbs,"大型银行系统","存储所有核心银行信息，如用户、帐号、交易。")Container_Boundary(api,"API应用程序"){Component(sign,"LoginController","MVCRestController","允许用户登录网银系统")Component(accounts,"AccountSummaryController","MVCRestController","提供用户汇总银行账号")Component(security,"SecurityComponent","SpringBean","提供登录、修改密码等相关功能")Component(mbsfacade,"大型银行系统Facade","SpringBean","大型银行系统Facade.")Rel(sign,security,"use")Rel(accounts,mbsfacade,"use")Rel(security,db,"read-write","JDBC")Rel(mbsfacade,mbs,"use","XML/HTTPS")}Rel(spa,sign,"use","JSON/HTTPS")Rel(spa,accounts,"use","JSON/HTTPS")Rel(ma,sign,&曲ot;Use","JSON/HTTPS")Rel(ma,accounts,"Use","JSON/HTTPS")@endumlCode代码通用，元素如下：元素名称函数VirtualBoxBoundry从上到下bottom关系Rel反转Rel_Back,Rel_U,Rel_D,Rel_D,Rel_L,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R,Rel_R这是基础知识PlantUML的，不想详细展开，大家可以自己查资料@startumlactoruserasuserparticipantbrowserasbrowserparticipantfront-endasfrontparticipantloginserviceasloginServerdatabasedatabaseasdbuser->browser:打开登录页面browser->front:loadresources,输入账号密码front->loginServer:ajax请求loginServer->db:根据账号查询，验证密码return:返回结果@endumlC4PlantUML是两个东西的结合，提供了一种描述和交流软件架构的简单方式.plantuml的创建是为了让你可以绘制UML图，使用简单且人类可读的文本描述，因为它不会阻止你画出异常的图，它只是一个绘图工具而不是建模工具；它是最常用的文本绘图工具，得到维基、论坛、文本编辑器和IDE的大力支持，可以使用不同的编程语言或文档生成；C4模型是一种抽象优先的软件架构绘制方法。基于抽象，它可以反映软件架构师和开发人员如何思考和构建软件。少量的抽象和绘图类型使C4模型易于学习和使用；C4代表上下文、容器、组件、代码；这一系列的横向和层次图，你可以用它来描述你从不同规模到不同受众的软件架构。C4模型与plantUML的分工如下：技术要点使用plantUML编写简单代码绘制c4模型系统架构抽象方法论C4PlantUML定义C4模型的绘图风格，使用PlantUML进行文本绘制使用方法：下载C4PlantUML选择您可以使用您熟悉的IDE集成；IDE使用vscode安装PlantUML和PlantUMLPreview插件，Jdk，graphvizvscodeimport.vscode/C4.code-snippets。||创意|下载plantUML插件，安装graphviz，打开C4PlantUML文件命名规则：context上下文图容器container图组件组件图序列时序图usecase用例图类图活动活动图state状态图对象图deployment部署图时序时序图绘制步骤：1.创建模型图名，按照上面的命名规则，xxx_projectname.puml；2、相对路径下引入path/C4_Component.puml3、使用内置函数绘制；summary如果你读过它，你只能记住一句话：C4PlantUMLprovidesadrawingmethodforYoudescribeandexpresssoftwarearchitecture;
