您当前的位置:首页 > 电脑百科 > 程序开发 > 架构

程序员你是怎么绘制架构图?

时间:2020-09-08 10:41:24  来源:  作者:

程序员你是怎么绘制架构图?

作为一个程序员,假如让你绘制当前正在开发的项目的架构图,你会怎么绘制?

背景

先来同步一个理念。架构图的作用是什么?

我回答一下:

提供了一个简单的方法给到开发团队(从开发工程师,测试工程师,架构师,测试,项目经历,产品经理,交互设计师,用户)能够更简单的描述和沟通软件架构,让团队每个人脑子里的架构可视化,更容易理解,形成统一;

归纳一下: 画个图让团队更好好的理解软件架构,并统一认知;

下面,我简单思考一下作为程序员应该如何绘制当前正在开发项目的架构图。

问题 回答
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

Component组件

元素如下:

元素名称 函数
组件 Component
组件数据库 ComponentDb

程序员你是怎么绘制架构图?

@startuml
 !include ../C4_Component.pumlLAYOUT_WITH_LEGEND()title 网银系统组件图 - API应用Container(spa, "单页应用", "javascript 和 angular", "通过浏览器提供所有的网银系统功能给到用户.")
Container(ma, "手机应用", "Xamarin", "通过手机设备提供有限的网银系统功能给用户.")
ContainerDb(db, "数据库", "关系数据库 Schema", "存储用户的注册信息, 随机认证令牌, 访问日志等.")
System_Ext(mbs, "Mainframe银行系统", "存储用户,账号,交易等所有的核心银行信息.")
Container_Boundary(api, "API 应用") {
    Component(sign, "登录控制器", "MVC Rest 控制器", "允许用户登录到网银系统")
    Component(accounts, "账户汇总控制器", "MVC Rest 控制器", "提供用户汇总的银行账号")
    Component(security, "安全组件", "Spring Bean", "提供登录,修改密码等相关功能")
    Component(mbsfacade, "Mainframe 银行系统 Facade", "Spring Bean", "一个mainframe 银行系统 facade.")
    Rel(sign, security, "使用")
    Rel(accounts, mbsfacade, "使用")
    Rel(security, db, "读写", "JDBC")
    Rel(mbsfacade, mbs, "使用", "XML/HTTPS")
}Rel(spa, sign, "使用", "JSON/HTTPS")
Rel(spa, accounts, "使用", "JSON/HTTPS")
Rel(ma, sign, "使用", "JSON/HTTPS")
Rel(ma, accounts, "使用", "JSON/HTTPS")
@enduml

Code代码

即通用的,元素如下:

元素名称 函数
虚框 Boundry
从上到下关系 Rel
反向关系 Rel_Back
从上到下关系 Rel_U
从下到上关系 Rel_D
从左到右关系 Rel_L
从右到左关系 Rel_R

代码级别可使用PlantUML绘制时序图,流程图,类图描述具体接口或者功能的实现细节;

这块是PlantUML的基础知识了,不详细展开,自行查阅资料即可。

程序员你是怎么绘制架构图?

@startuml
actor 用户 as user
participant 浏览器 as browserparticipant 前端 as frontparticipant 登录服务 as loginServerdatabase 数据库 as dbuser -> browser: 打开登录页面
browser->front:加载资源,输入账号密码
front->loginServer:ajax请求
loginServer->db:按照账号查询,校验密码
return: 返回结果
@enduml

C4PlantUML

它是两个东西的合体,提供了一种简单的方法来描述和沟通软件架构。

plantuml被创造用来允许你绘制UML图,使用简单和人类容易阅读的文本描述,因为它没有阻止你绘制反常的图,它只是一个绘图工具而不是一个建模工具;他是使用最多的文本绘图工具,被wiki,论坛,文本编辑器和IDE强烈支持,可以使用不同的编程语言或者文档来生成;

C4模型对软件架构来说是一个抽象第一的绘图方式。基于抽象,可以反映出软件架构师和开发者是如何思考和构建软件的。少量的抽象和绘图类型是的C4模型很容易学习和使用;C4代表着context,containers,components,code;这一系列水平层级的图,你可以使用它来从不同的尺度向不同的听众描述你的软件架构。

C4模型和plantUML 分工如下:

技术点 用途
plantUML 写简单的代码即可绘图
c4模型 一种对系统架构的抽象的方法论
C4PlantUML 定义一种C4模型的绘图风格,使用PlantUML进行文本绘图

使用方式: 下载C4PlantUML 选择你熟悉的IDE集成即可使用;

IDE 使用方式
vscode 安装 PlantUML 和 PlantUML Preview 插件 , Jdk , graphviz
vscode引入  
.vscode/C4.code-snippets.  
idea 下载plantUML插件,安装好 graphviz
打开C4PlantUML文件即可  

命名规则:

  • context 上下文图
  • container 容器图
  • component 组件图
  • sequence 时序图
  • usecase 用例图
  • class 类图
  • activity 活动图
  • state 状态图
  • object 对象图
  • deployment 部署图
  • timing 定时图

绘图步骤:

1.创建模型图名,按照上面的命名规则, xxx_项目名称.puml;

2.引入相对路径下的 path/C4_Component.puml

3.使用内置的函数,绘图;

小结

如果看完之后你只能记住一句话:C4PlantUML提供了一个绘图方式让你轻松的描述和表达软件架构;

程序员你是怎么绘制架构图?

想要我的学习资料吗?请留下你的评论。

我会持续分享Java软件编程知识和程序员发展职业之路!原创不易,关注诚可贵,转发价更高!转载请注明出处,让我们互通有无,共同进步,欢迎沟通交流。



Tags:架构图   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天再讲下如何画架构图。架构图素材和软件架构构图逻辑概述我在前面有篇文章专门分享了我制作的一些架构图的素材ppt材料,如果没有下载到,可以先关注我私信获取下载地址。具...【详细内容】
2021-09-17  Tags: 架构图  点击:(111)  评论:(0)  加入收藏
Spring Cloud 微服务总体架构图Spring cloud作为当下主流的微服务框架,让我们实现微服务架构简单快捷,Spring cloud中各个组件在微服务架构中扮演的角色如图所示。spring-cl...【详细内容】
2020-09-20  Tags: 架构图  点击:(133)  评论:(0)  加入收藏
作为一个程序员,假如让你绘制当前正在开发的项目的架构图,你会怎么绘制?背景先来同步一个理念。架构图的作用是什么?我回答一下:提供了一个简单的方法给到开发团队(从开发工程师,测...【详细内容】
2020-09-08  Tags: 架构图  点击:(104)  评论:(0)  加入收藏
作者:雪姬 ,来自:移动支付网支付宝系统架构概况典型处理默认资金处理平台财务会计支付清算核算中心交易柔性事务 支付宝的开源分布式消息中间件–Metamorphosis(M...【详细内容】
2019-07-29  Tags: 架构图  点击:(256)  评论:(0)  加入收藏
文章关键要点1、通过创建和维护架构图来提供准确且有价值的内容并非易事。大多数情况下,我们要么创建了太多的文档,要么太少,或者不相关,因为我们没能准确地定位文档的受益人...【详细内容】
2019-06-20  Tags: 架构图  点击:(442)  评论:(0)  加入收藏
此前我们聊过“业务架构、产品架构和信息架构的问题”在现实工作中我们 能见到一些公司,产品都已经上线了,却找不到一份合适的文档描述整个产品的框架,前端和后台由哪些部分组...【详细内容】
2019-05-15  Tags: 架构图  点击:(443)  评论:(0)  加入收藏
▌简易百科推荐
为了构建高并发、高可用的系统架构,压测、容量预估必不可少,在发现系统瓶颈后,需要有针对性地扩容、优化。结合楼主的经验和知识,本文做一个简单的总结,欢迎探讨。1、QPS保障目标...【详细内容】
2021-12-27  大数据架构师    Tags:架构   点击:(3)  评论:(0)  加入收藏
前言 单片机开发中,我们往往首先接触裸机系统,然后到RTOS,那么它们的软件架构是什么?这是我们开发人员必须认真考虑的问题。在实际项目中,首先选择软件架构是非常重要的,接下来我...【详细内容】
2021-12-23  正点原子原子哥    Tags:架构   点击:(7)  评论:(0)  加入收藏
现有数据架构难以支撑现代化应用的实现。 随着云计算产业的快速崛起,带动着各行各业开始自己的基于云的业务创新和信息架构现代化,云计算的可靠性、灵活性、按需计费的高性价...【详细内容】
2021-12-22    CSDN  Tags:数据架构   点击:(10)  评论:(0)  加入收藏
▶ 企业级项目结构封装释义 如果你刚毕业,作为Java新手程序员进入一家企业,拿到代码之后,你有什么感觉呢?如果你没有听过多模块、分布式这类的概念,那么多半会傻眼。为什么一个项...【详细内容】
2021-12-20  蜗牛学苑    Tags:微服务   点击:(8)  评论:(0)  加入收藏
我是一名程序员关注我们吧,我们会多多分享技术和资源。进来的朋友,可以多了解下青锋的产品,已开源多个产品的架构版本。Thymeleaf版(开源)1、采用技术: springboot、layui、Thymel...【详细内容】
2021-12-14  青锋爱编程    Tags:后台架构   点击:(20)  评论:(0)  加入收藏
在了解连接池之前,我们需要对长、短链接建立初步认识。我们都知道,网络通信大部分都是基于TCP/IP协议,数据传输之前,双方通过“三次握手”建立连接,当数据传输完成之后,又通过“四次挥手”释放连接,以下是“三次握手”与“四...【详细内容】
2021-12-14  架构即人生    Tags:连接池   点击:(16)  评论:(0)  加入收藏
随着移动互联网技术的快速发展,在新业务、新领域、新场景的驱动下,基于传统大型机的服务部署方式,不仅难以适应快速增长的业务需求,而且持续耗费高昂的成本,从而使得各大生产厂商...【详细内容】
2021-12-08  架构驿站    Tags:分布式系统   点击:(23)  评论:(0)  加入收藏
本系列为 Netty 学习笔记,本篇介绍总结Java NIO 网络编程。Netty 作为一个异步的、事件驱动的网络应用程序框架,也是基于NIO的客户、服务器端的编程框架。其对 Java NIO 底层...【详细内容】
2021-12-07  大数据架构师    Tags:Netty   点击:(16)  评论:(0)  加入收藏
前面谈过很多关于数字化转型,云原生,微服务方面的文章。虽然自己一直做大集团的SOA集成平台咨询规划和建设项目,但是当前传统企业数字化转型,国产化和自主可控,云原生,微服务是不...【详细内容】
2021-12-06  人月聊IT    Tags:架构   点击:(23)  评论:(0)  加入收藏
微服务看似是完美的解决方案。从理论上来说,微服务提高了开发速度,而且还可以单独扩展应用的某个部分。但实际上,微服务带有一定的隐形成本。我认为,没有亲自动手构建微服务的经历,就无法真正了解其复杂性。...【详细内容】
2021-11-26  GreekDataGuy  CSDN  Tags:单体应用   点击:(35)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条