如何画好技术图?画图有时候真的比写代码重要,在文档中插入一些图示,能够帮助观众更好地理解自己的想法,也能更清晰地表达整体

但长期坚持对我来说是一件很难的事情,核心原因可能是没有足够的动力,我应该深刻反思。

我们往往会写一个文档来描述自己的想法,但科学研究表明,很多时候,文字其实并没有那么直观,尤其是在一场会议中,使用大段的文字可能会让观众很容易疲劳,容易走神,GET不到重点等。

所以在文档中插入一些图示,能够帮助观众更好地理解自己的想法,也能更清晰地表达整体的设计思路,是开发者非常值得掌握的一个技能。

下面列几个比较常用的图的分类。

《ThoughtWorks现代企业架构框架白皮书》中,把架构分为了四个层次,分别是业务、应用、数据、技术。

其中最重要的是业务架构,只有梳理清楚了业务,才能指导应用、数据和技术架构,最终支撑业务的快速迭代和发展。业务架构的分析过程是复杂的,最终的产出可能也不仅仅只是一张架构图。还有更细节的流程、建模等产出物。

在实际工作中,笔者其实很少看到以业务视角产出的一张“架构图”,更多的是业务流程图、用例图。看到更多的是“产品架构”和“技术架构”。

一张好的产品架构图大概是这样,分层次、分模块讲清楚了各个产品模块之间的关系。下图是一张大型电商产品的全景图(图片来自人人都是产品经理)。实际上真正运行的系统远不止这些,但核心模块都有所刻画和体现。

作为技术开发人员,在实际工作中往往会有很多时候需要阐明自己的整体技术设计思路。这个时候可能需要一张“技术架构”图,从技术的视角剖析各个模块之间的关系。

我找了好久没有找到好的一个小型业务系统的技术架构图,最终找到一个比较宏观的图,后面有机会自己找业务画一个吧。但大体上的结构是类似的,从最底层的存储,到最上层的接口。右边是一些通用的运维体系或者支撑服务。

传统的UML用例图是用于描述角色和行为之间的关系,用例下面可以再拆分用例(或者叫进一步用例),类似这种:

但用例图只是刻画业务行为,并没有刻画领域模型、单据和领域的划分,所以信息量其实很少。

流程图可以刻画业务的核心流程,也可以在流程图的节点周围画上对应的产品功能、模型或者产生的单据。比如一个典型的流程图(刻画产品功能):

如果在流程图上再加上“用户角色”,刻画xx角色在xx阶段做了xx操作。就是一张“操作动线”图:

如果不在意色彩等细节的话,时序图非常推荐使用plantUML来画,效率比较高。这个工具我们在后面介绍。

系统链路图,有时候也叫服务链路图。表达的是各个微服务之间的调用关系,一个好的微服务系统调用链路应该是干净的、单向依赖的,呈一个“树状”,但现实中如果设计不好,经常会有循环依赖,形成“图”状。

实际上好一点的基建平台可以根据现有的服务监控体系,自动生成调用链路图,不过在设计阶段肯定是要自己手动画了。

缺点是draw.io是国外的网站,要想流畅使用可能需要科学上网工具。不过由于draw.io是开源的,所以可以下载离线版本的软件,或者部署在自己的服务器上。

processon是一个国内的类似于draw.io的软件,免费版创建文件有数量限制,可以开通会员解除限制。也是web版本可以直接使用。processon的组件没有draw.io丰富,但基本够用。

它也有几个优势。第一个优势就是它是国内的软件,不需要科学上网,就能很流畅地使用。同时它有非常丰富的模板市场,你也可以把自己画得比较好的图发布到模板市场,从中赚取收益。也可以免费或者付费从模板市场克隆一个图,自己在此基础上修改。

processon的第二个优势是它可以团队协作,不过我个人目前还没遇到过需要团队协作画图的场景。

它的第三个优势是可以画思维导图,有点像xmind那种风格。虽然draw.io也能画,但是没有这个用起来方便。

平时我自己因为工作原因,用得比较多的是飞书文档。飞书文档有一个自带的画图工具,有点像draw.io的阉割版,能使用的组件比较少,只有常用的一些通用组件。

但飞书文档内嵌的画图工具最大的好处就是它与文档的无缝集成,可以随时随地直接编辑,不用在文档和画图工具之间切换,目前我大多数的图都是直接在飞书文档上画的。

plantuml是一个可以用代码生成图片的工具,免费的。其实它可以画很多图。包括时序图、类图、用例图等。但整体风格比较朴素,如果要画得很好看的话还是不适合用它。

但是plantuml有一个最大的优势就是效率高。尤其是在画时序图、UML类图等场景,如果用draw.io等工具可能要画很久,但用plantuml可以用几行代码很快画出来。比如:

vscode用plantuml的插件。飞书文档也可以直接插入plantuml,实际使用起来还是蛮方便的。

它也有对应的劣势。比如组件比较少,像图标这些可能要自己通过图片的方式粘贴进去。没有网格和自动吸附,要对齐的话感觉效率会稍微低一点。但是也有分组、对齐和自动分布等常用的工具,所以用熟练了其实也还行。

上面介绍的一些工具,我觉得更多的是“术”层面的东西。真正要画好一张图的核心,还是在“道”的层面要清晰。我总结为两点:清晰的思考和准确的表达。

有些人画图很快,有些人画图很慢。有些人图一次性就画好,后面修改得很少,而有些人会反复修改,怎么都不满意。

这背后其实是你对这个图有没有一个清晰的思考。比如画架构图,需要自己本身对业务和技术有深入的理解,清楚各个模块、层次之间的关系,才能做到胸有成竹,快速利用软件把自己心中的图画出来。

这里有一个小技巧,就是刚开始的时候先画大的模块和框架,不要扣细节。然后在大的模块和框架经过反复推敲确定后,再去完善内部小的细节。这样整个图就不容易在以后被大改了。

同样的架构图,里面可能有些模块比较重要,是自己重点想表达的部分,那这块可以用面积更大、颜色更醒目等方式来表达出来。

同理,一期、二期、三期,内部的、外部的,已有的、将要建设的等等,也可以用不同的颜色来区分,整个图应该是一目了然的把自己想表达的东西表达出来。

想要做好一件事,离不开持续的学习。多看看别人是怎么做的,尤其是优秀的人是怎么做的,是快速掌握一门技能的捷径。

另一个很不错的学习渠道是看看开源框架的官方文档或者源码解读文档。比如spring的架构图、tomcat的架构图、k8s的架构图等。因为文档在开源社区是一个很重要的东西,文档写得好,使用者就能降低理解门槛,快速使用甚至是加入到开源社区中来。很多成熟的开源工具都配有非常优秀的架构图。

稍微大一点的公司应该都有自己内部的知识库。里面有很多别的个人、团队的总结和实践,也是值得参考和学习的对象,看看他们是怎么理解自己的业务,并用技术文档、技术图来表达出来的。

但这里可能涉及到公司安全合规的问题,大家学习的时候要注意规避风险。

THE END
1.实用的工具合集工程机械工作日常实用的工具合集2024-11-22 15:42:36 达西伍红 四川 举报 0 分享至 0:00 / 0:00 速度 洗脑循环 Error: Hls is not supported. 视频加载失败 达西伍红 49粉丝 大风吹倒梧桐树没钱难买通天路 00:34 聪明的狗狗要学会自我pua 01:33 这狗我实在养不起了,我只能。。。 00:56 穿越葡萄长廊感受...https://www.163.com/v/video/VLGM7S3KK.html
2.照片审核处理工具使用说明一、为提高报名效率,在注册和报名考试前,报考人员须使用照片审核处理工具对照片进行审核,只有通过审核的照片才能被网报系统识别进行正常上传,否则无法完成后续报名操作。 二、使用照片审核处理工具处理后的照片,将应用于准考证和合格证书以及成绩证明中。报考人员应对照片质量负责,如因照片质量影响到后续的考试、成绩或证书...https://www.lnrsks.com/html/hudongzhuanqu/changjianwenti/669.html
3.文献图片检索工具Openi,用图片检索文献!文献图片检索工具-Openi,用图片检索文献! 有没有这个时候,很需要某一个科研图片做参考,从文献查起找到该图真如大海捞针;有没这个时候,记得某张图片,想查看原文,却想不起文献的题目,怎么也找不到。以上烦恼今天都一网打尽,给大家... 有没有这个时候,很需要某一个科研图片做参考,从文献查起找到该图真如大海...https://www.omicsclass.com/article/1394
4.分享6款图片文字识别工具,一键提取图片上的文字第一步:打开手机相册,找到需要提取文字的图片,然后点击【更多】按钮,找到【识别文字】功能,单击一下。 第二步:等待一小会,就能看到识别转换好的文字内容了,这个时候点击【复制】或【发送】按钮,就能将文字导出。 手机自带的图片文字提取功能操作起来非常简单,但是需要注意的是,由于它不是专业的转换工具,所以识别提取...https://tech.china.com/article/20220817/082022_1125053.html
1.改图宝改图宝是一个在线修改图片(照片)大小和尺寸的免费软件,可把上传照片调整或裁剪为一寸、两寸等尺寸,并能对图片进行压缩大小、修改分辨率、旋转、转换格式、加水印等编辑;适用于公务员、英语、计算机、会计、护士、建造师等考试入学网上报名照片和社保、签证等证件照片及微https://www.gaitubao.com/
2.五金工具图片各种五金工具集合图片→MAIGOO图库金工具(TOOLS & HARDWARE)是指铁、钢、铝等金属经过锻造、压延、切割等物理加工制造而成的各种金属器件的总称。五金工具按照产品的用途来划分,可以分为工具五金、建筑五金、日用五金、锁具磨具、厨卫五金、家居五金以及五金零部件等几类。五金工具包括各种手动、电动、https://m.maigoo.com/tuku/395004.html
3.Java实现PDF转图片的三种方法java提示:生成图片以后需要将文件流关闭,不然删除文件会删除失败很多人不知道怎么将pdf的文件转换成图片格式的,而且网上有很例子是跑不通的,同是也是方便自己在用到该需求的时候能够快速度地写出来,所以整理了几种pdf转换成图片的方法工具类。 一、使用开源库Apache PDFBox将PDF转换为图片 1、引入依赖库 1 2 3 4 5...https://www.jb51.net/program/301597i1b.htm
4.小学信息技术说课稿基本目标要求学生能利用WORD设计一张贺卡,学会正确使用图片工具和绘画工具,初步培养学生的色彩运用本事。我的发展目标是能启发学生感受生活中人与人之间的各种完美情感。培养学生感受美的本事。教学重点是图片工具和绘图工具的运用,而难点是引导学生如何在贺卡中表达自我的情感以及贺卡中各资料之间色彩的搭配。https://www.fwsir.com/ziliao/html/ziliao_20221123083909_2093874.html
5.photoshop考试题目及答案注意:如果想要在使用缩放工具时按图片的大小自动调整窗口,可以在缩放工具的选项中选中“调整窗口大小以满屏显示( Resize Windows to Fit )”选项。 用吸管工具选取颜色的时候按住Alt键即可定义当前背景色。 结合颜色取样器工具[Shift+I]( Color Sampler Tool )和信息面板( Window > Show Info ),我们可以监视当前图...https://www.yjbys.com/edu/PS/318197.html
6.幼儿园大班交通教案14篇1.了解交通工具的名称和特征,知道要根据实际的生活需要选择适合的交通工具。 2.感受交通工具为我们出行带来的方便。 3.了解交通工具的名称和特征。 4.乐于探索、交流与分享。 活动准备: 教具:ppt、插板1块。 学具:各种交通工具图片 活动难点: 知道要根据实际的生活需要选择适合的交通工具。 https://www.unjs.com/jiaoan/youer/20230226081322_6531517.html
7.图片管理工具官方下载IDimager Photo Supreme是一款简易实用,功能强大的图片管理工具,能够帮助用户将图片进行有组织的分类,方便用户进行查找和查看,可以将图片按照大小、日期、格式等因素进行分类,还能对图像进行重命名,有喜欢的小伙伴快来下载吧! 软件特色 1、高级搜索功能 在查找该图像时,IDimager Photo Supreme将帮助您进行深层文本搜索,...https://soft.3dmgame.com/down/207101.html
8.《三国志13》图片声音工具使用教程在切换数据块时,会自动保存目前浏览的数据块中所有修改到临时文件,关闭本工具再打开只要临时文件还在,可以继续编辑,不会丢失。 所以,由于临时文件的存在,你不需要改一张就保存一下,这样会很浪费时间。 在浏览图片的时候请善用快捷键,数据块的为Ctrl+Z和Ctrl+X,按住不动可以快速的进行预览,图片帧的为Ctrl+C和Ctrl...https://gl.ali213.net/html/2016-2/107595.html
9.6种最好的图片无损压缩工具–顾小北和他的朋友们但是Giftofspeed有一些功能是我很喜欢的,比如下图,你可以输入你的网址,然后这个工具会建议你对图片进行优化,这样你就可以发现很多问题。 测试地址:https://www.giftofspeed.com/image-delivery/ 另外Giftofspeed 其实还提供了很多有用的工具,几乎能一站的检测你的网站, ...http://www.guxiaobei.com/?p=3062
10.Hutool工具类(爬取页面)hutoolcookie需要注意的是,del方法会删除目录而不判断其是否为空,这一方面方便了使用,另一方面也可能造成一些预想不到的后果(比如拼写错路径而删除不应该删除的目录),所以请谨慎使用此方法。 7.图片相关 7.1图片工具ImgUtil 针对awt中图片处理进行封装,这些封装包括:缩放、裁剪、转为黑白、加水印等操作。 https://blog.csdn.net/Theshy08/article/details/116757943
11.干掉Visio,这个画图神器真的绝了!!!这款画图工具的官网地址是:https://app.diagrams.net/,它的前身是:https://draw.io/。这两个url都能访问。 同时它也提供了离线版的画图软件,大家可以自己下载diagrams的安装软件,不过有个坏处是它是收费的。 所以,我用的最多的还是在线版的。 2. 如何进入画图界面? https://www.51cto.com/article/694880.html
12.幼儿园《交通工具》教案(精选14篇)1、教师出示救护车图片,幼儿观察。 2、提问:你认识这是什么车吗?叫什么名字? 是什么颜色? 3、介绍救护车的用途。 三、认识交通工具:警车 1、教师出示警车图片,幼儿观察。 2、提问:你认识这是什么车吗?叫什么名字? 是什么颜色? 3、介绍警车的用途。 https://www.yuwenmi.com/jiaoan/youeryuan/1266848.html
13.2023年,让这20款AI工具帮你更高效地完成工作~优设网上面的这三款工具都是效果非常棒的图片无损放大工具,利用人工智能技术可以将图片清晰度提升为原来的2倍甚至4倍,并实现降噪,无论是对摄影照片还是二次元绘画都有很好的效果。 ④智能打光 网址直达:https://clipdrop.co/relight 详细介绍:https://www.uisdc.com/relight ...https://www.uisdc.com/20-ai-tools
14.2024年各地初级会计师报名照片上传要求及照片处理流程图解将保存后的"报名照片.jpg"文件作为报名照片上传至报名系统,报考人员保存照片后点击“退出操作”即可。 注意:以上图片来源于往年照片处理工具,仅供参考,请考生以报考时实际页面为准! 说明:因考试政策、内容等不断变化与调整,东奥会计在线提供的以上初级会计师报名时间等信息仅供参考,请考生以官方公布的内容为准!https://www.dongao.com/cjks/bm/202312214397269.html