最完美的架构图需要怎么画

5 篇文章 0 订阅
订阅专栏

当我们想用一张或几张图来描述我们的系统时,是不是经常遇到以下情况:

对着画布无从下手、删了又来?

如何用一张图描述我的系统,并且让产品、运营、开发都能看明白?

画了一半的图还不清楚受众是谁?

画出来的图到底是产品图功能图还是技术图又或是大杂烩?

图上的框框有点少是不是要找点儿框框加进来?

布局怎么画都不满意……

如果有同样的困惑,本文将介绍一种画图的方法论,来让架构图更清晰。

先厘清一些基础概念

1、什么是架构?

架构就是对系统中的实体以及实体之间的关系所进行的抽象描述,是一系列的决策。

架构是结构和愿景。

系统架构是概念的体现,是对物/信息的功能与形式元素之间的对应情况所做的分配,是对元素之间的关系以及元素同周边环境之间的关系所做的定义。

做好架构是个复杂的任务,也是个很大的话题,本篇就不做深入了。有了架构之后,就需要让干系人理解、遵循相关决策。

2、什么是架构图?

系统架构图是为了抽象地表示软件系统的整体轮廓和各个组件之间的相互关系和约束边界,以及软件系统的物理部署和软件系统的演进方向的整体视图。

3、架构图的作用

一图胜千言。要让干系人理解、遵循架构决策,就需要把架构信息传递出去。架构图就是一个很好的载体。那么,画架构图是为了:

  • 解决沟通障碍
  • 达成共识
  • 减少歧义

4、架构图分类

搜集了很多资料,分类有很多,有一种比较流行的是4+1视图,分别为场景视图、逻辑视图、物理视图、处理流程视图和开发视图。

★ 场景视图

场景视图用于描述系统的参与者与功能用例间的关系,反映系统的最终需求和交互设计,通常由用例图表示。
在这里插入图片描述
★ 逻辑视图

逻辑视图用于描述系统软件功能拆解后的组件关系,组件约束和边界,反映系统整体组成与系统如何构建的过程,通常由UML的组件图和类图来表示。
在这里插入图片描述
★ 物理视图

物理视图用于描述系统软件到物理硬件的映射关系,反映出系统的组件是如何部署到一组可计算机器节点上,用于指导软件系统的部署实施过程。
在这里插入图片描述
★ 处理流程视图

处理流程视图用于描述系统软件组件之间的通信时序,数据的输入输出,反映系统的功能流程与数据流程,通常由时序图和流程图表示。
在这里插入图片描述

★ 开发视图

开发视图用于描述系统的模块划分和组成,以及细化到内部包的组成设计,服务于开发人员,反映系统开发实施过程。
在这里插入图片描述
以上 5 种架构视图从不同角度表示一个软件系统的不同特征,组合到一起作为架构蓝图描述系统架构。

怎样的架构图是好的架构图

上面的分类是前人的经验总结,图也是从网上摘来的,那么这些图画的好不好呢?是不是我们要依葫芦画瓢去画这样一些图?

先不去管这些图好不好,我们通过对这些图的分类以及作用,思考了一下,总结下来,我们认为,在画出一个好的架构图之前, 首先应该要明确其受众,再想清楚要给他们传递什么信息 ,所以,不要为了画一个物理视图去画物理视图,为了画一个逻辑视图去画逻辑视图,而应该根据受众的不同,传递的信息的不同,用图准确地表达出来,最后的图可能就是在这样一些分类里。那么,画出的图好不好的一个直接标准就是:受众有没有准确接收到想传递的信息。

明确这两点之后,从受众角度来说,一个好的架构图是不需要解释的,它应该是自描述的,并且要具备一致性和足够的准确性,能够与代码相呼应。

画架构图遇到的常见问题

1、方框代表什么?

在这里插入图片描述
为什么适用方框而不是圆形,它有什么特殊的含义吗?随意使用方框或者其它形状可能会引起混淆。

2、虚线、实线什么意思?箭头什么意思?颜色什么意思?

在这里插入图片描述
随意使用线条或者箭头可能会引起误会。

3、运行时与编译时冲突?层级冲突?

在这里插入图片描述
架构是一项复杂的工作,只使用单个图表来表示架构很容易造成莫名其妙的语义混乱。

本文推荐的画图方法

在这里插入图片描述
C4 模型使用容器(应用程序、数据存储、微服务等)、组件和代码来描述一个软件系统的静态结构。这几种图比较容易画,也给出了画图要点,但最关键的是,我们认为,它明确指出了每种图可能的受众以及意义。

下面的案例来自C4官网,然后加上了一些我们的理解,来看看如何更好的表达软件架构

1、语境图(System Context Diagram)在这里插入图片描述

这是一个想象的待建设的互联网银行系统,它使用外部的大型机银行系统存取客户账户、交易信息,通过外部电邮系统给客户发邮件。可以看到,非常简单、清晰,相信不需要解释,都看的明白,里面包含了需要建设的系统本身,系统的客户,和这个系统有交互的周边系统。

★ 用途

这样一个简单的图,可以告诉我们,要构建的系统是什么;它的用户是谁,谁会用它,它要如何融入已有的IT环境。这个图的受众可以是开发团队的内部人员、外部的技术或非技术人员。即:

构建的系统是什么

谁会用它

如何融入已有的IT环境

★ 怎么画

中间是自己的系统,周围是用户和其它与之相互作用的系统。这个图的关键就是梳理清楚待建设系统的用户和高层次的依赖,梳理清楚了画下来只需要几分钟时间。

2、容器图(Container Diagram)

容器图是把语境图里待建设的系统做了一个展开。
在这里插入图片描述
上图中,除了用户和外围系统,要建设的系统包括一个基于java\spring mvc的web应用提供系统的功能入口,基于xamarin架构的手机app提供手机端的功能入口,一个基于java的api应用提供服务,一个mysql数据库用于存储,各个应用之间的交互都在箭头线上写明了。

看这张图的时候,不会去关注到图中是直角方框还是圆角方框,不会关注是实线箭头还是虚线箭头,甚至箭头的指向也没有引起太多注意。

我们有许多的画图方式,都对框、线的含义做了定义,这就需要画图的人和看图的人都清晰的理解这些定义,才能读全图里的信息,而现实是,这往往是非常高的一个要求,所以,很多图只能看个大概的含义。

★ 用途

这个图的受众可以是团队内部或外部的开发人员,也可以是运维人员。用途可以罗列为:

展现了软件系统的整体形态

体现了高层次的技术决策

系统中的职责是如何分布的,容器间的是如何交互的

告诉开发者在哪里写代码

★ 怎么画

用一个框图来表示,内部可能包括名称、技术选择、职责,以及这些框图之间的交互,如果涉及外部系统,最好明确边界。

3、组件图(Component Diagram)

在这里插入图片描述
组件图是把某个容器进行展开,描述其内部的模块。

★ 用途

这个图主要是给内部开发人员看的,怎么去做代码的组织和构建。其用途有:

描述了系统由哪些组件/服务组成

厘清了组件之间的关系和依赖

为软件开发如何分解交付提供了框架

4、类图(Code/Class Diagram)

在这里插入图片描述
这个图很显然是给技术人员看的,比较常见,就不详细介绍了。

案例分享

下面是内部的一个实时数据工具的架构图。作为一个应该自描述的架构图,这里不多做解释了。如果有看不明白的,那肯定是还画的不够好。

在这里插入图片描述
画好架构图可能有许多方法论,本篇主要介绍了C4这种方法,C4的理论也是不断进化的。但不论是哪种画图方法论,我们回到画图初衷,更好的交流,我们在画的过程中不必被条条框框所限制。简而言之,画之前想好:画图给谁看,看什么,怎么样不解释就看懂。

参考:阿里巴巴技术专家三画,梓敬、鹏升和余乐
参考: https://mp.weixin.qq.com/s/1hPZacqJuUeElyHiMxa9rw

备赛电赛学习硬件篇(五):硬件框、无线通信模块、OLED模块设计
m0_61022809的博客
12-18 2678
个人强烈推荐,VisionOn是一款可免费使用,亦可免注册使用(不能在线存储)的在线类Visio制软件,也是一个个人在线白板系统,可以用来,以及作为个人信息整理、深度思考、深度工作用的工具。工具非常安静,沉浸式工作,无任何其它信息来干扰。例​。
如何出一张合格的技术架构
weixin_33881140的博客
04-11 727
阿里妹导读:技术传播的价值,不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径,加速业务的上线速率,也体现在优秀工程师在工作效率提升、产品性能优化和用户体验改善等经验方面的分享,以提高我们的专业能力。 接下来,阿里巴巴技术专家三,将分享自己和团队在架构方面的理念和经验,希望对你有所帮助。 当我们想用一张或几张来描述我们的系统时...
微服务安全架构 V1.vsdx
07-01
微服务安全架构 uml,流程,分析,完美,很经典!微服务安全架构微服务安全架构
一文搞懂计算机的硬件组成结构
weixin_48829214的博客
05-31 1890
本文旨在让小白能对计算机组成结构更加清晰地了解,并且了解缓存的重要性
如何好一张架构
最新发布
zz_jesse的博客
04-20 68
????目录1 架构的目的2怎样的架构是好的架构3 什么时候架构4 架构分类5 如何架构6业务/产品架构7应用架构8技术架构9代码架构10 数据架构在上一篇文章《4款亲测好用的开发工具》中,有读者在后台留言提到想了解如何好一张架构?本文作者从架构的目的、怎样的架构是好的架构、如何架构,以及各类经典架构的分类和示例都做了详尽解析,是一篇不可多得的干...
【计算机组成原理】——知识点总结
qq_43610614的博客
06-15 1752
文章目录计算机的基本组成:冯•诺依曼计算机的特点计算机系统的硬件结构:总线:存储器输入输出系统中央处理器 本来作为期末作业的,写了一大半,改在线考试。。。留着复习用吧。。只有前六章左右吧 计算机的基本组成: 冯•诺依曼计算机的特点 计算机有运算器、存储器、控制器、输入设备、输出设备五大部件组成。 指令和数据以同等地位存放于存储器内,并可按地址寻访。 指令和数据均用二进制数表示。 指令由操作码和地址码组成,操作码用来表示性质,地址码用来表示操作数在存储器中的位置。 指令在存储器内按顺序存放。通常,指令是顺
系统硬件框
12-11
利用proteus电路硬件,进行相应仿真
工作两三年了,整不明白架构啥?
bugstack虫洞栈
03-01 5534
作者:小傅哥 博客:https://bugstack.cn 沉淀、分享、成长,让自己和他人都能有所收获!???? 一、前言 很多程序员架构头疼,不知道什么、怎么! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要。 一提到很多人就想站会起来喊,”内卷“、”内卷啦“、”PPT工程师“,但程序代码本身就是一种数学逻辑的具体实现,如果没有一些表配合文字的阐述,讲真很难让所有人都能在共同的共识下进行交流。 这不像是文科,”八表流云澄夜色,九霄华月动春城“ 上来就能联想到它是在描述
架构-如何架构
AdrianAndroid的专栏
10-17 8298
资料 如何出一张合格的技术架构? 如何架构? 产品经理的高阶能力:架构的设计与法 设计都不会,还想做”架构师“? 你知道如何好一幅架构么? 系统逻辑架构怎么 想要做”架构师“,一定要会设计 出你的项目架构 一个关于“系统架构怎么?”的问题 不错的架构 BFF - Backend for Frontend BFF in Serverless 前端应用框架...
架构到底怎么?老彭带你走一波!
weixin_52346300的博客
05-24 2383
前言前两天群里有人问,架构到底怎么,能不能发来研究一下?手上的架构其实挺多的,但是大多都涉密,不太方便拿出来。不过网上公开的资料到处都是啊,随手搜罗几张来给大家分享一下,共3招,告诉...
2024最新ChatGPT网站源码/新增AI绘功能/支持用户付费套餐+DALL-E3文生
05-15
系统技术架构: - 前端: Vite + vue3 + ts + NaiveUI + Tailwindcss - 管理端:Vite4 + Vue3 + Element-Plus - 服务端(后端):Nodejs + NestJs - 数据支持: Mysql5.7(+) + Redis - 运行环境:Linux、Windows、...
硬件课程体系框
11-26
硬件课程体系框,硬件学习过程和周期,机学习路线
最新版ChatGPT网站源码/亲测可用/支持Ai绘/源码持续更新/支持用户付费套餐+赚取收益!
05-13
系统技术架构: - 前端: Vite + vue3 + ts + NaiveUI + Tailwindcss - 管理端:Vite4 + Vue3 + Element-Plus - 服务端(后端):Nodejs + NestJs - 数据支持: Mysql5.7(+) + Redis - 运行环境:Linux、Windows、...
2024最新ChatGPT网站源码+支持ChatGPT4.0+支持Midjourney绘+用户会员套餐+后台管理
05-26
系统技术架构: - 前端: Vite + vue3 + ts + NaiveUI + Tailwindcss - 管理端:Vite4 + Vue3 + Element-Plus - 服务端(后端):Nodejs + NestJs - 数据支持: Mysql5.7(+) + Redis - 运行环境:Linux、Windows、...
ChatGPT网站源码运营版+支持GPT4.0+支持ai绘(Midjourney)+后台管理
05-22
系统技术架构: - 前端: Vite + vue3 + ts + NaiveUI + Tailwindcss - 管理端:Vite4 + Vue3 + Element-Plus - 服务端(后端):Nodejs + NestJs - 数据支持: Mysql5.7(+) + Redis - 运行环境:Linux、Windows、...
如何架构
qq_41854911的博客
11-19 3335
什么是架构?维基百科、百度百科其实都没有关于它的直接定义。架构=架构+这样问题就转化成,什么是架构,以及什么是?关于架构,百度百科上是这样定义的:架构,又名软件架构,是有关软件整体结构与组件的抽象描述,于指导型软件系统各个方面的设计。
如何架构
hockor的博客
04-02 5080
你好,我是 hockor,作为软件开发者,我们在工作中难免要很多的架构,但是很多人对于如何去架构其实是很模糊的,有那么多种类型的,我们究竟该选哪个,用应该怎么呢?今天我们一起来看看这个问题。 什么是架构 在谈什么是架构之前,我们先来聊聊什么是架构。 软件架构指的是软件系统的顶层设计(Rank),它定义了系统由哪些角色(Role)组成,角色之间的关系(Relation)和运作规则(Rule),如下所示。 再回到我们的问题,到底什么是架构,从字面意思上来讲,架构 = 架构 + ,它是.
我是怎么架构的?
程序IT圈
02-11 231
▲点击上方“蓝色字体”关注公众号回复“项目”领取开源项目技术传播的价值,不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径,加速业务的上线速率,也体现在优秀工程师在工作效率提升...
软件系统架构怎么
04-08
软件系统架构是用来描述软件系统的组成部分以及它们之间的关系和交互的形化表示。下面是一种常见的软件系统架构法: 1. 首先,确定系统的主要组成部分,例如模块、组件、服务等。将它们表示为矩形框,并...

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • Docker删除容器与镜像 209149
  • DNS劫持原理与操作 61932
  • Spring Boot 错误总结(累计30个常见错误) 55488
  • Jenkins安装maven环境搭建 36245
  • 62个大数据可视化工具 34670

分类专栏

  • 人工智能 29篇
  • python Flask对人工智能实现 2篇
  • JAVA开发 285篇
  • GO开发 35篇
  • 算法 21篇
  • 电脑维修 4篇
  • 服务器运维 64篇
  • elasticsearch 7篇
  • 测试 1篇
  • 嵌入式 1篇
  • 练习案例 31篇
  • DB 41篇
  • 收集前端框架 12篇
  • 面试 5篇
  • 架构 5篇
  • 基础积累 32篇
  • 框架介绍 10篇
  • 源码 6篇
  • 前沿知识 20篇
  • 插件 6篇
  • 大数据 20篇
  • 错误总结 13篇
  • Spring 4篇
  • nginx 13篇
  • Docker 6篇
  • 前端开发 39篇
  • python 14篇
  • Python Flask 3篇
  • 区块链 1篇
  • TensorFlow机器学习 7篇
  • 多线程 1篇
  • Springboot 18篇
  • 支付心得 7篇
  • 缓存 5篇
  • 搜索引擎 5篇
  • 前端模板引擎 3篇
  • 机器人 5篇
  • 移动终端 3篇
  • SpringCloud 6篇
  • PWA 1篇
  • JVM 2篇
  • Ofbiz 1篇
  • Mongodb 2篇
  • Flink 2篇
  • 压测 3篇
  • dubbo和dubbox 4篇
  • 文件服务器 2篇
  • Pytorch
  • Scala 1篇
  • Drools 1篇
  • P2P 1篇
  • presto 2篇
  • Kafka 1篇
  • WebSocket 1篇

最新评论

  • JVM报错

    yuhoucaihong: 请问这个有解决的方案吗,怎么扩大PermSize 和 MaxPermSize的数值呢

  • OSS上传文件返回前端上传进度三种方式

    星、祭: 如果同时两个请求进来,怎么分辨进度

  • 阿里云消息队列 MQ、数据同步 (canal rabbitmq 消息解析成 sql) 与 ( Maxwell rabbitmq 消息解析成 sql)、调用私有方法, 获取泛型类型Class, 被AOP

    winky_zhang: update语句没有where条件?

  • JAVA实现simHash算法等工具类

    lizepengg: simhash中FPGenerator和Shingle是哪个包里的类啊?

  • 2种方式用redis实现延时队列

    ViperWhip: 大佬,发现一个bug,第一种方案,测试接口里面一共新增了3个队列,是可以触发的,但是如果只新增1个队列却无法触发监听,只有等到下一次再调用的时候才会一起触发过期

大家在看

  • FPGA复位专题---(44)复位全局+局部组合? 120
  • Redis 持久化: RDB和AOF 2795
  • java期末练习题:设计一个三角 形类,使其能提供三角形周长、平移计算及显示功能,并定义三角形类的对象并 进行相应的操作 234
  • 279. 高端的饭心美食网页 大学生期末大作业 Web前端网页制作 html+css+js 610
  • MATLAB基础应用精讲-【数模应用】SPSSAU数据处理 34

最新文章

  • go 桌面应用
  • Meilisearch搜索
  • ModelScope平台
2022年13篇
2021年43篇
2020年118篇
2019年111篇
2018年207篇
2017年110篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

PHP网站源码武汉网站优化排名报价三明seo网站优化公司锦州SEO按效果付费报价扬州网站搭建价格绵阳关键词按天扣费价格白山网站改版公司定西网站设计模板公司玉林seo网站优化金昌网站优化排名镇江网站改版哪家好榆林网页设计价格黄冈至尊标王多少钱南联网站建设推荐宝安企业网站设计推荐本溪网站推广方案报价莱芜外贸网站设计推荐铜川关键词按天计费公司阜阳百度竞价包年推广报价白城seo优化哪家好南通百度竞价报价石岩关键词排名包年推广推荐菏泽seo哪家好衡水网站关键词优化价格大运百度竞价多少钱天门外贸网站建设多少钱中山网站推广梧州至尊标王公司霍邱百搜标王海口网站设计沙井品牌网站设计多少钱歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化