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

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

创新互联建站网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、网站建设、网站设计易于使用并且具有良好的响应性。

背景

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

我回答一下：

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

归纳一下： 画个图让团队更好好的理解软件架构，并统一认知；

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

问题 回答
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绘制系统全景图，系统物理部署图；

下面是一个例子：

 
 
 
    
  
  
  
  1. @startuml "enterprise" 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. !include ../C4_Context.puml 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. LAYOUT_TOP_DOWN 
    6. 
  
  
  
  6. LAYOUT_WITH_LEGEND() 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. Person(customer, "客户", "一种限制工具的客户") 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. Enterprise_Boundary(c0, "限制工具") { 
    11. 
  
  
  
  11.     Person(csa, "客户服务代理", "处理客户询问") 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.     System(ecommerce, "电子商务系统", "允许客户通过widgets.com站点在线购买工具") 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.     System(fulfilment, "履行系统", "负责处理和传递客户订单") 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. System(taxamo, "Taxamo", "计算本地税务并扮演Braintree支付前台") 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20. System(braintree, "Braintree支付", "处理信用卡支付购买工具") 
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22. System(post, "泽西邮报", "计算全世界的包裹邮费") 
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24. Rel_R(customer, csa, "咨询", "电话") 
    25. 
  
  
  
  25.  
    26. 
  
  
  
  26. Rel_R(customer, ecommerce, "下工具订单") 
    27. 
  
  
  
  27.  
    28. 
  
  
  
  28. Rel(csa, ecommerce, "查询订单信息") 
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30. Rel_R(ecommerce, fulfilment, "发送订单信息") 
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32. Rel_D(fulfilment, post, "获取物流费用") 
    33. 
  
  
  
  33.  
    34. 
  
  
  
  34. Rel_D(ecommerce, taxamo, "代理信用卡处理") 
    35. 
  
  
  
  35.  
    36. 
  
  
  
  36. Rel_L(taxamo, braintree, "使用信用卡") 
    37. 
  
  
  
  37.  
    38. 
  
  
  
  38. Lay_D(customer, braintree) 
    39. 
  
  
  
  39.  
    40. 
  
  
  
  40. @enduml 
    41.

Container容器

元素如下：

元素名称 函数
容器Container
容器数据库ContainerDb
容器虚框Container_Boundry

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. !include ../C4_Container.puml 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. LAYOUT_TOP_DOWN 
    6. 
  
  
  
  6. LAYOUT_WITH_LEGEND() 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. title 网银系统容器图 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. Person(customer, 客户, "银行客户有自己的私人银行账号") 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. System_Boundary(c1, "网银") { 
    13. 
  
  
  
  13.     Container(web_app, "Web 应用", "Java, Spring MVC", "传递静态内容和网银SPA") 
    14. 
  
  
  
  14.     Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能") 
    15. 
  
  
  
  15.     Container(mobile_app, "手机应用", "C#, Xamarin", "通过手机设备提供有限的网银功能") 
    16. 
  
  
  
  16.     ContainerDb(database, "数据库", "SQL 数据库", "存储用户的注册信息，随机认证密码，访问日志等") 
    17. 
  
  
  
  17.     Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能") 
    18. 
  
  
  
  18. } 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20. System_Ext(email_system, "邮件系统", "网络软件交换系统") 
    21. 
  
  
  
  21. System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户，账号，事务银行信息") 
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23. Rel(customer, web_app, "使用", "HTTPS") 
    24. 
  
  
  
  24. Rel(customer, spa, "使用", "HTTPS") 
    25. 
  
  
  
  25. Rel(customer, mobile_app, "使用") 
    26. 
  
  
  
  26.  
    27. 
  
  
  
  27. Rel_Neighbor(web_app, spa, "传输") 
    28. 
  
  
  
  28. Rel(spa, backend_api, "使用", "异步, JSON/HTTPS") 
    29. 
  
  
  
  29. Rel(mobile_app, backend_api, "使用", "异步, JSON/HTTPS") 
    30. 
  
  
  
  30. Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC") 
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32. Rel_Back(customer, email_system, "发送邮件到") 
    33. 
  
  
  
  33. Rel_Back(email_system, backend_api, "发送邮件", SMTP") 
    34. 
  
  
  
  34. Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS") 
    35. 
  
  
  
  35. @enduml 
    36.

Component组件

元素如下：

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

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  !include ../C4_Component.puml 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. LAYOUT_WITH_LEGEND() 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. title 网银系统组件图 - API应用 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. Container(spa, "单页应用", "javascript 和 angular", "通过浏览器提供所有的网银系统功能给到用户.") 
    9. 
  
  
  
  9. Container(ma, "手机应用", "Xamarin", "通过手机设备提供有限的网银系统功能给用户.") 
    10. 
  
  
  
  10. ContainerDb(db, "数据库", "关系数据库 Schema", "存储用户的注册信息, 随机认证令牌, 访问日志等.") 
    11. 
  
  
  
  11. System_Ext(mbs, "Mainframe银行系统", "存储用户，账号，交易等所有的核心银行信息.") 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. Container_Boundary(api, "API 应用") { 
    14. 
  
  
  
  14.     Component(sign, "登录控制器", "MVC Rest 控制器", "允许用户登录到网银系统") 
    15. 
  
  
  
  15.     Component(accounts, "账户汇总控制器", "MVC Rest 控制器", "提供用户汇总的银行账号") 
    16. 
  
  
  
  16.     Component(security, "安全组件", "Spring Bean", "提供登录，修改密码等相关功能") 
    17. 
  
  
  
  17.     Component(mbsfacade, "Mainframe 银行系统 Facade", "Spring Bean", "一个mainframe 银行系统 facade.") 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.     Rel(sign, security, "使用") 
    20. 
  
  
  
  20.     Rel(accounts, mbsfacade, "使用") 
    21. 
  
  
  
  21.     Rel(security, db, "读写", "JDBC") 
    22. 
  
  
  
  22.     Rel(mbsfacade, mbs, "使用", "XML/HTTPS") 
    23. 
  
  
  
  23. } 
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25. Rel(spa, sign, "使用", "JSON/HTTPS") 
    26. 
  
  
  
  26. Rel(spa, accounts, "使用", "JSON/HTTPS") 
    27. 
  
  
  
  27.  
    28. 
  
  
  
  28. Rel(ma, sign, "使用", "JSON/HTTPS") 
    29. 
  
  
  
  29. Rel(ma, accounts, "使用", "JSON/HTTPS") 
    30. 
  
  
  
  30. @enduml 
    31.

Code代码

即通用的，元素如下：

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

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

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

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. actor 用户 as user 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. participant 浏览器 as browser 
    6. 
  
  
  
  6. participant 前端 as front 
    7. 
  
  
  
  7. participant 登录服务 as loginServer 
    8. 
  
  
  
  8. database 数据库 as db 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. user -> browser: 打开登录页面 
    11. 
  
  
  
  11. browser->front:加载资源,输入账号密码 
    12. 
  
  
  
  12. front->loginServer:ajax请求 
    13. 
  
  
  
  13. loginServer->db:按照账号查询，校验密码 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. return: 返回结果 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. @enduml 
    19.

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提供了一个绘图方式让你轻松的描述和表达软件架构；

 

分享文章：程序员你是怎么绘制架构图？
文章路径：http://www.36103.cn/qtweb/news22/24172.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

python知识

同城分类信息

小谭网创广告　　 　成都网站维护　　 　网站seo优化　　 　中国（西部）云计算中心　　 　云服务器　　 　名片印刷厂　　 　成都印刷厂　　 　重庆花箱　　 　成都网站制作　　 　网站制作　　 　域名注册　　 　蓬安网站建设　　 　西云服务器托管　　 　网站运营　　 　网站收录　　 　高端网站设计　　 　腾讯香港免备案空间　　 　ios开发　　 　东电技改　　 　成都橡塑保温板