小熊科技|程序员你是怎么绘制架构图?
作为一个程序员 , 假如让你绘制当前正在开发的项目的架构图 , 你会怎么绘制?
背景先来同步一个理念 。 架构图的作用是什么?
我回答一下:
提供了一个简单的方法给到开发团队(从开发工程师 , 测试工程师 , 架构师 , 测试 , 项目经历 , 产品经理 , 交互设计师 , 用户)能够更简单的描述和沟通软件架构 , 让团队每个人脑子里的架构可视化 , 更容易理解 , 形成统一;
归纳一下: 画个图让团队更好好的理解软件架构 , 并统一认知;
下面 , 我简单思考一下作为程序员应该如何绘制当前正在开发项目的架构图 。
问题回答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)@enduml
Container容器元素如下:
元素名称函数容器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
推荐阅读
- 所持股份|万兴科技:公司控股股东、实际控制人吴太兵质押150万股
- 发布公告|数量过半!博创科技:天通股份累计减持约150万股
- 英雄科技聊数码|蔡崇信有实力买下篮网,那身价3200亿的马云,能买下几支NBA球队
- 科技前沿阵地|涨疯了!海思安防芯片遭哄抬“围剿”
- 月影浓|吴亦凡机械造型走秀 垫肩披风搭银框眼镜科技感足
- 中国历史发展过程|中国历史发展过程.中国的科技史界过去半个多世纪
- 天津|桂发祥:不再持有昆汀科技股份
- 消费|减持!天通股份:减持博创科技约32万股
- 处罚|老周侃股:吉鑫科技大股东应补偿踩雷投资者
- 华中科技大学|杯具!超本科线95分,本科有路不走,却梦幻般碰瓷,撞开专科的门