面试官：我叫你画个图给我看看，咋就这么费劲呢？
The following article is from 编了个程 Author Yasin x
你好呀，我是歪歪。
经常有人问我作为程序员一些画图相关的事情，什么架构图啦，流程图啦，时序图啦，各种各样的图。
我其实是一个画图还可以的选手，我也比较喜欢用画图的方式去描述和回答问题。
我觉得这是作为程序员的一个必备技能，刚好我看到一个朋友写了相关方向的内容，我觉得很不错。
所以借花献佛，这次的文章给大家分享一下，和技术人员相关的各种“图”，希望能帮助到你。
为什么要画图
作为一个技术人员，在很多场合可能会与别人沟通或者交流自己的架构设计、规划等思路，比如在分享、答辩、沟通需求等场景。
我们往往会写一个文档来描述自己的想法，但科学研究表明，很多时候，文字其实并没有那么直观，尤其是在一场会议中，使用大段的文字可能会让观众很容易疲劳，容易走神，GET不到重点等。
所以在文档中插入一些图示，能够帮助观众更好地理解自己的想法，也能更清晰地表达整体的设计思路，是开发者非常值得掌握的一个技能。
图的分类
下面列几个比较常用的图的分类。
架构图
《ThoughtWorks现代企业架构框架白皮书》中，把架构分为了四个层次，分别是业务、应用、数据、技术。
其中最重要的是业务架构，只有梳理清楚了业务，才能指导应用、数据和技术架构，最终支撑业务的快速迭代和发展。
业务架构的分析过程是复杂的，最终的产出可能也不仅仅只是一张架构图。还有更细节的流程、建模等产出物。
在实际工作中，笔者其实很少看到以业务视角产出的一张“架构图”，更多的是业务流程图、用例图。
看到更多的是“产品架构”和“技术架构”。
一张好的产品架构图大概是这样，分层次、分模块讲清楚了各个产品模块之间的关系。下图是一张大型电商产品的全景图（图片来自人人都是产品经理）。实际上真正运行的系统远不止这些，但核心模块都有所刻画和体现。
作为技术开发人员，在实际工作中往往会有很多时候需要阐明自己的整体技术设计思路。
这个时候可能需要一张“技术架构”图，从「技术的视角」剖析各个模块之间的关系。
我找了好久没有找到好的一个小型业务系统的技术架构图，最终找到一个比较宏观的图，后面有机会自己找业务画一个吧。
但大体上的结构是类似的，从最底层的存储，到最上层的接口。右边是一些通用的运维体系或者支撑服务。
用例图（操作动线）
传统的UML用例图是用于描述角色和行为之间的关系，用例下面可以再拆分用例（或者叫进一步用例），类似这种：
但用例图只是刻画业务行为，并没有刻画领域模型、单据和领域的划分，所以信息量其实很少。
流程图可以刻画业务的核心流程，也可以在流程图的节点周围画上对应的产品功能、模型或者产生的单据。
比如一个典型的流程图（刻画产品功能）：
如果在流程图上再加上“用户角色”，刻画xx角色在xx阶段做了xx操作。就是一张“操作动线”图：
时序图
时序图就是接口调用的时间关系，也是开发人员表达接口内部细节的主要工具。
比如大家都熟知的 OAuth2 的时序图：
如果不在意色彩等细节的话，时序图非常推荐使用plant UML来画，效率比较高。这个工具我们在后面介绍。
系统链路图
系统链路图，有时候也叫服务链路图。
表达的是各个微服务之间的调用关系，一个好的微服务系统调用链路应该是干净的、单向依赖的，呈一个“树状”，但现实中如果设计不好，经常会有循环依赖，形成“图”状。
实际上好一点的基建平台可以根据现有的服务监控体系，自动生成调用链路图，不过在设计阶段肯定是要自己手动画了。
画图工具调研
draw.io 全能
draw.io 是一个非常优秀的画图软件，且是开源，免费的。web 版本就够用，通过域名就能直接打开，不需要安装任何软件。
可以存储到多种介质：
draw.io 的优势是图表类型非常丰富，可以画各种各样的图，界面也比较自由。还可以从一个 url 中 copy 模板。
可以说是“全能”，一点也不为过。
缺点是 draw.io 是国外的网站，要想流畅使用可能需要科学上网工具。不过由于 draw.io 是开源的，所以可以下载离线版本的软件，或者部署在自己的服务器上。
process on 适合国内使用
process on 是一个国内的类似于 draw.io 的软件，免费版创建文件有数量限制，可以开通会员解除限制。
也是 web 版本可以直接使用。process on 的组件没有 draw.io 丰富，但基本够用。
它也有几个优势。
第一个优势就是它是国内的软件，不需要科学上网，就能很流畅地使用。
同时它有非常丰富的模板市场，你也可以把自己画得比较好的图发布到模板市场，从中赚取收益。
也可以免费或者付费从模板市场克隆一个图，自己在此基础上修改。
process on 的第二个优势是它可以团队协作，不过我个人目前还没遇到过需要团队协作画图的场景。
它的第三个优势是可以画思维导图，有点像 xmind 那种风格。虽然 draw.io 也能画，但是没有这个用起来方便。
飞书 文档内嵌
平时我自己因为工作原因，用得比较多的是飞书文档。飞书文档有一个自带的画图工具，有点像 draw.io 的阉割版，能使用的组件比较少，只有常用的一些通用组件。
但飞书文档内嵌的画图工具最大的好处就是它与文档的无缝集成，可以随时随地直接编辑，不用在文档和画图工具之间切换，目前我大多数的图都是直接在飞书文档上画的。
plant uml 时序图利器
plant uml 是一个可以用代码生成图片的工具，免费的。
其实它可以画很多图。包括时序图、类图、用例图等。但整体风格比较朴素，如果要画得很好看的话还是不适合用它。
但是plant uml有一个最大的优势就是效率高。
尤其是在画时序图、UML 类图等场景，如果用 draw.io 等工具可能要画很久，但用 plant uml 可以用几行代码很快画出来。比如：
vscode 用 plant uml 的插件。
飞书文档也可以直接插入 plant uml，实际使用起来还是蛮方便的。
excalidraw 手绘风格
前面提到的更多的在日常技术文档中会用到的架构图、类图、时序图等。
但我做一个架构的朋友画的图非常有特色，整体非常清晰漂亮，而且有比较明显的手绘风格。
比如这张 golang 微服务教程，可以用赏心悦目来形容：
他说是用一个叫做 excalidraw 的工具画的。
这也是一个开源的工具，跟 draw.io 有点类似，可以选择自己的存储介质，但官网的因为部署在国外有点慢，可以自己私有化部署。
还可以使用 github 的 issue 来当 cdn，这样可以用 git 来做版本管理。
比如这样：
https://github.com/Anddd7/architecture-diagram/issues/1
需要注意的是，这个软件默认是不支持中文的字体。
这个fork的仓库额外安装了支持中文的字体，大家可以直接拿来部署：
https://github.com/Anddd7/excalidraw。
或者一步到位，直接用部署好的线上版本：
https://excalidraw-anddd7.vercel.app/
它也有对应的劣势。
比如组件比较少，像图标这些可能要自己通过图片的方式粘贴进去。
没有网格和自动吸附，要对齐的话感觉效率会稍微低一点。但是也有分组、对齐和自动分布等常用的工具，所以用熟练了其实也还行。
画好图的核心
上面介绍的一些工具，我觉得更多的是“术”层面的东西。真正要画好一张图的核心，还是在“道”的层面要清晰。我总结为两点：清晰的思考和准确的表达。
清晰的思考
有些人画图很快，有些人画图很慢。有些人图一次性就画好，后面修改得很少，而有些人会反复修改，怎么都不满意。
这背后其实是你对这个图有没有一个清晰的思考。
比如画架构图，需要自己本身对业务和技术有深入的理解，清楚各个模块、层次之间的关系，才能做到胸有成竹，快速利用软件把自己心中的图画出来。
这里有一个小技巧，就是刚开始的时候先画大的模块和框架，不要扣细节。
然后在大的模块和框架经过反复推敲确定后，再去完善内部小的细节。这样整个图就不容易在以后被大改了。
准确的表达
第二点就是准确的表达。
因为图是给别人看的，要考虑到面向的对象是谁，有没有了解相关的基础背景，他关注的是整体框架还是细节。这块都是需要注意的，可能面向低年级或同层级的分享，与面向老板的汇报，在图的表达方式上会有不同。
同样的架构图，里面可能有些模块比较重要，是自己重点想表达的部分，那这块可以用面积更大、颜色更醒目等方式来表达出来。
同理，一期、二期、三期，内部的、外部的，已有的、将要建设的等等，也可以用不同的颜色来区分，整个图应该是一目了然的把自己想表达的东西表达出来。
学习优秀案例
技术文章&博客
想要做好一件事，离不开持续的学习。多看看别人是怎么做的，尤其是优秀的人是怎么做的，是快速掌握一门技能的捷径。
有一些质量还不错的技术网站、论坛、公众号等，都可以关注起来，没事的时候看看他们的文章。
比如 InfoQ、掘金等网站上有大量的个人博客，比如阿里技术、字节技术、美团技术等大公司的技术部门官方文章，都是经过公司精挑细选的优秀博客，非常值得研究和学习。
开源框架
另一个很不错的学习渠道是看看开源框架的官方文档或者源码解读文档。
比如 spring 的架构图、tomcat 的架构图、k8s 的架构图等。
因为文档在开源社区是一个很重要的东西，文档写得好，使用者就能降低理解门槛，快速使用甚至是加入到开源社区中来。很多成熟的开源工具都配有非常优秀的架构图。
公司内部文档
稍微大一点的公司应该都有自己内部的知识库。里面有很多别的个人、团队的总结和实践，也是值得参考和学习的对象，看看他们是怎么理解自己的业务，并用技术文档、技术图来表达出来的。
但这里可能涉及到公司安全合规的问题，大家学习的时候要注意规避风险。
好了，本文的技术部分就到这里啦。
下面这个环节叫做[荒腔走板]，技术文章后面我偶尔会记录、分享点生活相关的事情，和技术毫无关系。我知道看起来很突兀，但是我喜欢，因为这是一个普通博主的生活气息。
荒腔走板
上周的脱口秀大会不知道你看了没。
童漠男拿出了他的杀手锏“北下关”，成功晋级。文本确实不错，讲述的是他小时候，父母为了他的成绩，让他各种转学，去更好的学校读书，但是成一直不好。
最后决定“还是给孩子一个快乐的童年吧”，然后找到一个寓教于乐的小学，叫做北下关。
看完他的表演，我立马就想到了之前看过的一本书，叫做《窗边的小豆豆》。
北下关，就是书中的“巴学园”。
这本书颠覆了我对填鸭式教育模式的认知，书里面描述的是一种润物细无声似的教育模式。
有时候轻描淡写的几章，但是却是无声处听惊雷。比如“那个朝鲜人”，“死去的小鸡”，“逝去的秦明”，“走丢的洛基”，“战火中的巴学园”……
这本书是儿童类图书的畅销书，我倒是觉得，这书是写给大人看的，孩子看不到故事背后的道理，大人看的懂，但是怎么把道理通过什么样的事情告诉孩子，这才是关键。
蹲下来，到孩子的高度，才能看到孩子眼中的世界，才能和孩子进行对话。
这就是这本书要传达的东西。
这本书不厚，由一个个小故事组成，微信读书上就可以看，推荐给你。
·············· END ··············
你好呀，我是歪歪。我没进过一线大厂，没创过业，也没写过书，更不是技术专家，所以也没有什么亮眼的title。
当年高考，随缘调剂到了某二本院校计算机专业。纯属误打误撞，进入程序员的行列，之后开始了运气爆棚的程序员之路。
说起程序员之路还是有点意思，可以点击蓝字，查看我的程序员之路。