小熊科技|程序员你是怎么绘制架构图?


小熊科技|程序员你是怎么绘制架构图?
作为一个程序员 , 假如让你绘制当前正在开发的项目的架构图 , 你会怎么绘制?
背景先来同步一个理念 。 架构图的作用是什么?
我回答一下:
提供了一个简单的方法给到开发团队(从开发工程师 , 测试工程师 , 架构师 , 测试 , 项目经历 , 产品经理 , 交互设计师 , 用户)能够更简单的描述和沟通软件架构 , 让团队每个人脑子里的架构可视化 , 更容易理解 , 形成统一;
归纳一下: 画个图让团队更好好的理解软件架构 , 并统一认知;
下面 , 我简单思考一下作为程序员应该如何绘制当前正在开发项目的架构图 。
问题回答where are we?现状我是程序员 , 不知道怎么绘制项目的架构图where are we go?目的可绘制方便平级 , 上级之间沟通交流的架构图how can we go there?实现路径C4PlantUML实现路径C4模型一种架构设计的方法论 , 忽略不在同一个抽象成绩的细节 , 从而可以更好的表达和可视化 。
可以类比地图 , 地图分4个级别 , 国家 , 省 , 市 , 街道;而C4模型也分4个层级 , Context系统上下文 , Container容器 , Component组件 , Code代码;
【小熊科技|程序员你是怎么绘制架构图?】加上3种补充视图 , 即系统全景图 , 动态图 , 部署图 , 即可完整的描述一个项目的软件架构;
布局分4个
布局说明语法从上到下LAYOUT_TOP_DOWN从左到右LAYOUT_RIGHT_LEFT自由布局LAYOUT_WITH_LEGEND素描布局LAYOUT_AS_SKETCH可自定义更多的布局 , 源码是基于plantUML语法;
Context上下文元素如下:
元素名称函数角色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, "客户", "一种限制工具的客户")Enterprise_Boundary(c0, "限制工具") {Person(csa, "客户服务代理", "处理客户询问")System(ecommerce, "电子商务系统", "允许客户通过widgets.com站点在线购买工具")System(fulfilment, "履行系统", "负责处理和传递客户订单")}System(taxamo, "Taxamo", "计算本地税务并扮演Braintree支付前台")System(braintree, "Braintree支付", "处理信用卡支付购买工具")System(post, "泽西邮报", "计算全世界的包裹邮费")Rel_R(customer, csa, "咨询", "电话")Rel_R(customer, ecommerce, "下工具订单")Rel(csa, ecommerce, "查询订单信息")Rel_R(ecommerce, fulfilment, "发送订单信息")Rel_D(fulfilment, post, "获取物流费用")Rel_D(ecommerce, taxamo, "代理信用卡处理")Rel_L(taxamo, braintree, "使用信用卡")Lay_D(customer, braintree)@endumlContainer容器元素如下:
元素名称函数容器Container容器数据库ContainerDb容器虚框Container_Boundry
小熊科技|程序员你是怎么绘制架构图?
@startuml!include ../C4_Container.pumlLAYOUT_TOP_DOWNLAYOUT_WITH_LEGEND()title 网银系统容器图Person(customer, 客户, "银行客户有自己的私人银行账号")System_Boundary(c1, "网银") {Container(web_app, "Web 应用", "Java, Spring MVC", "传递静态内容和网银SPA")Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")Container(mobile_app, "手机应用", "C#, Xamarin", "通过手机设备提供有限的网银功能")ContainerDb(database, "数据库", "SQL 数据库", "存储用户的注册信息 , 随机认证密码 , 访问日志等")Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能")}System_Ext(email_system, "邮件系统", "网络软件交换系统")System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户 , 账号 , 事务银行信息")Rel(customer, web_app, "使用", "HTTPS")Rel(customer, spa, "使用", "HTTPS")Rel(customer, mobile_app, "使用")Rel_Neighbor(web_app, spa, "传输")Rel(spa, backend_api, "使用", "异步, JSON/HTTPS")Rel(mobile_app, backend_api, "使用", "异步, JSON/HTTPS")Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC")Rel_Back(customer, email_system, "发送邮件到")Rel_Back(email_system, backend_api, "发送邮件", SMTP")Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS")@enduml


推荐阅读