关于架构:这可能是你见过最好的工程师绘图指北

作为一名工程师，绘图能够说是必备的技能。优良的绘图能力就像写得一手好字，总能让你在团队或者客户背后 闪光，这也是你博得团队青眼和客户投诉的一个重要能力。

绘图的过程其实是 合成工作 和拆散关注点 的过程，它和程序设计的过程简直重叠，因而绘图和程序设计是 正向相互促进 的。也就是说，你在绘图的过程中发现的问题很有可能会在程序中呈现，你在程序中要面对的问题很有可能在绘图的过程中就发现了，早发现早解决。

为什么他人画的图比我的难看？有什么技巧吗？画图丑是天生的吗？我能不能通过短时间的学习绘制出逼格高的程序设计图呢？

绘图是点、线、面、光影和色调的交融，想要设计出丑陋的图，能够浏览设计畛域的相干常识，跨界是目前你跟同畛域对手拉开差距的优选之一。明天咱们就来学习如何画得一手好图，画好图有哪些技巧和策略，并手把手带你绘制程序设计过程中罕用的时序图、流程图、利用分层架构图。

Processon

ProcessOn 是一个在线作图的聚合平台，经营方是北京大麦地信息技术有限公司。ProcessOn 的绘图基于浏览器，因而它不受操作系统限度，能够跨平台操作。ProcessOn 的画布分为两大类：思维导图画布和自在画布。思维导图画布专一于节点属性和关系的构建，图 1 是思维导图画布的模板示例。

自在画布则给咱们提供了纵情挥洒的空间，咱们能够在自在画布中绘制 UML 类图、功能模块组合图、事件流程图和利用架构图等，图 2 是自在画布的模板示例。

既然是公司经营，那么必定须要盈利点了，ProcessOn 产品的价格分为三个等级：免费版、个人版和团队版。图 3 展现了不同版本的价格与性能差别。

用户注册登录后就能够应用免费版，虽说它限度了单个账户文件数量，但咱们能够通过邀请好友来晋升文件数量下限。值得一提的是，一个文件里能够绘制多幅图，这样文件下限的问题就缓解了。不过如果是团队应用或者商用，倡议购买个人版或者团队版，一方面可能反对开发团队提供更稳固的服务和丰盛的性能，另一方面也尊重原创劳动。

金山 WPS

WPS 是国内不可多得的优良利用，与微软 Office 办公套件分庭抗礼且不落下风，切实令人拜服。WPS 近年来也大力发展除文档、表格和演示文稿外的附加性能，思维导图和流程图两大模块争相上线。图 4 为 WPS 思维导图布局模板图示。

从文件导出的格局（.pos）来看，WPS 仿佛是跟 ProcessOn 单干推出的思维导图和流程图模块。绝对于 ProcessOn 免费版的文件数下限，WPS 更有劣势，然而从 WPS 导出图片时会带有水印。如果是团队应用，ProcessOn 的多人合作看起来更好用。

Diagrams

diagrams 是一款收费开源且跨平台的绘图利用，反对 离线绘图 和在线绘图 。在线绘图和 ProcessOn 一样，在浏览器中操作即可。值得称赞的是 diagrams 提供了 macOS、Linux（deb/rpm/snap/AppImage）和 Window 等支流操作系统的 桌面利用 ，这意味着咱们能够 离线绘图。图 5 是 diagrams 官网给出的绘制成绩图示。

diagrams 没有文件数量限度，它适配了 Google 云盘 、 微软 OneDrive、Atlassian、Dropbox、GitHub、NextCloud 和 苹果的 iCloud 等云端存储，同时也反对将文件导出到 本地，太棒了！

diagrams 反对自定义的导出缩放，容许咱们在导出时配置图片缩放比例，例如 75% 或 300%。导出缩放可能保障图片的清晰度，是超清大图的保障。如果你要印刷设计进去的图，能够在导出时设置 DPI 的值，具体操作会在前面介绍到。

无论是 ProcessOn 还是 WPS，导出的图片（PNG/JPG）都不够清晰，WPS 甚至还带有水印。如果想要将 ProcessOn 上的绘图成绩导出为超清图，那必须先导出为 SVG 格局，在此基础上通过其余利用转换为 PNG 格局，要求在转换时设定图片缩放比例。在导出图片文件的清晰度方面，diagrams 完胜。

我之前用过很长一段时间的 ProcessOn，《Python3 反爬虫原理与绕过实战》这本书创作的时候书中插图都是用在 ProcessOn 绘制的。偶尔看到了 diagrams，体验过一次之后就全面转到 diagrams 了。

本篇文章将基于 diagrams 的桌面利用，请各位读者自行返回 diagrams 官网下载适宜本人操作系统的桌面利用。

小常识：diagrams 还有另外一个域名，draw.io，当你看到其余中央介绍 draw 绘图工具时，大概率指的就是 diagrams。

布局概览

关上 diagrams 桌面利用，它会让咱们抉择 创立新绘图 或者 关上现有绘图，悬浮窗右下角能够抉择语言。

抉择 创立新绘图 后跳转到如下图所示的画布类型抉择界面，左侧是不同分类的画布模板菜单栏，右侧是对应分类的画布模板。通常咱们会抉择空白框图模板，如果你指标就抉择本人喜爱的模板，点击右下角蓝色的 创立 按钮即可。

我抉择的是 地图 分类外面的 mind map 模板，点击创立按钮后 diagrams 依据我的抉择为我关上了如下图所示的新画布。

画布分为 ABCDEF 几个区域，它们对应的性能或者作用别离如下：

• A – 菜单栏，可对文件或图形进行操作；
• B – 工具栏，可对画布或者图形进行操作；
• C – 图形栏，diagrams 为咱们提供的根底图形元素和图形元素扩大能力；
• D – 分页栏，能够在单个文件里增加多页画布；
• E – 元素属性栏，可调整图形元素、画布或文本元素的属性，例如字体大小、图形色彩、网格显隐；
• F – 画布区，主区域；

⚠️ diagrams 不会主动保留画布原文件，在创立文件后按 Ctrl+S 并依据提醒抉择存储形式和存储门路。抉择好原文件的存储后，后续咱们对画布、图形元素和文字元素的改变它才会主动保留。

增加多个页面

你可能会好奇，这个分页栏的利用场景是什么：

• 每个图一份文件，太多了！
• 一个功能模块（例如登录）对应的几个图（例如流程设计图、原型草稿、登录时序图），离开寄存太难找！
• 关联性能相互比对，关上多个窗口太烦人！

正好，D 辨别页栏就是为了这些需求量身定制的。你可通过点击 D 辨别页栏的 + 号来减少画布，也能够通过点击 D 区左侧的 菜单按钮 + 插入页面 来减少画布。如果想要删除画布，那么 菜单按钮 + 删除 就能够了。

你还能够为每页画布起名字，菜单按钮 + 重命名。这样在关上 diagrams 的时候就晓得哪页画布下面画的是什么，不必一个个点击去看了。

增加更多图形

如果左侧提供的根底图形无奈满足你的绘图需要，或者你想要从 diagrams 提供的图形中寻找灵感时，你能够点击 C 区底部的 更多图形 选项，点击后弹出如下图所示的图形抉择界面。

diagrams 提供了如安卓组件图形、服务器组件图形、云原生图形、电路图形等数十类十分丰盛的根底图形，找到喜爱的图形类别后给它打上勾，接着点击右下角的 利用 按钮即可。

绘图基本操作实际

要想应用 C 区的图形，咱们只须要 点击并将其拖拽 到 F 区的画布上即可，想放到那个地位就在那个地位 松开鼠标。下图是拖拽矩形到画布的截图，因为鼠标未松开，画布上只是显示虚线的矩形，当鼠标松开时显示的就是咱们拖拽的左上角那个实线矩形。

如果你想在画布上再搁置一个矩形，你能够再次拖拽，或者用快捷键 Ctrl+C 和 Ctrl+V 复制方才那个矩形，并拖动到适合的地位。

如何表白流程

流程和方向在图形中是一种重要的表达方式，例如一个图形元素的箭头指向另一个图形元素。在 diagrams 中，咱们只须要 将鼠标挪动到图形元素上 ，它就会呈现如下图所示的 蓝色锚点 和浅蓝色四向箭头。

四向箭头示意这个元素能够向四个方向挪动，蓝色的锚点则是此图形元素与其余元素关联时的终点或起点。在上图 浅绿色圆圈 盖住的蓝色点处 单击鼠标并向右拖动 ，即可在此锚点上 成长 出一个直线箭头。将鼠标的焦点挪动到右侧矩形上时，右侧矩形也会呈现蓝色锚点和四向箭头，将鼠标焦点置于右侧矩形右边的锚点处开释，此时画布如下图所示。

这样咱们就将两个不相干的图形元素关联到一起了，因为箭头的存在，这一组图形元素看起来像是一个短的流程。

如果你点击一个图形元素，它会在周围产生天蓝色的圆点，点击并拖动远点可扭转图形元素的形态，例如矩形的宽和高。将鼠标焦点挪动到浅蓝色四向箭头上时，箭头会变成蓝色，点击箭头便会复制一份雷同的图形元素且以箭头进行关联，具体成果如下图所示。

NPC 提醒：更多操作技巧和小常识可通过亲自动手取得哦。

文字与格局

文字描述自身就具备信息传递的属性，将它用在图形中会大大增加信息传递能力。以上图为根底，鼠标双击矩形便可呈现文字输入框，在右边的矩形中输出客户端、左边的矩形中输出服务端，而后将 C 区的 Text 元素拖动到直线箭头上方并输出申请，此时画布如下图所示。

明眼人一看就晓得形容的是双端网络交互的申请过程——客户端向服务端收回网络申请。咱们能够通过 E 区的 文本 面板调整文字格局，例如字体、加粗、斜体、文字地位、文字书写方向、文字色彩、透明度等，还能够为文字加上背景色、设置边框色彩、调整文字间距和字体大小。

元素款式

文字有属性，图形元素也有属性。选中图形可通过 E 区的 款式 面板和 调整图形 面板更改图形元素的属性，例如调整图形元素的色彩、更改线条格调类型、替换箭头格调类型、为图形元素设置暗影、圆角直角切换、手绘格调切换和图形层级等。理解到这些常识后，咱们能够绘制一个简略的流程图，通过 E 区的几个属性面板调整元素款式，具体成果如下图所示。

看上去是不是比之前的图难看多了？

元素层级与图层层级

在实际操作中你会发现，当图形元素重叠在一起的时候，先搁置的图形元素总是处在后搁置的图形元素下方，后搁置的图形元素会挡住先搁置的图形元素。

在同一个画布当中，图形元素是有层级的，跟 Photoshop 画布的层级类似，也跟咱们编程畛域中的栈类似。

如上图所示，浅蓝色、浅红色和浅绿色的图形元素重叠在同一个地位。因为浅蓝色图形元素先搁置，所以它在最底层。第二个搁置的是浅红色的图形元素，它在中间层。最初搁置的是浅绿色的图形元素，所以它在最上层。能够通过 E 区的 调整图形 面板扭转图形元素的层级，或者间接在图形元素上右键唤出菜单栏，抉择 移至最前 或则 移至最初 即可。下图形容了将浅绿色图形元素设置挪动至最初属性的地位变动。

原来的浅绿色将处于最底层，中间层则是浅蓝色，之前在中间层的浅红色当初到了最上层。

diagrams 反对相似 Photoshop 的图层，在同一个画布当中能够有多个独立的图层。层与层之间有良好的隔离，咱们能够将相关联的元素放到同一层，这样就能够失去像组合和锁一样的成果。咱们能够在 B 区工具栏最左侧开启图层，开启后 F 区弹出图层设置面板，点击 + 号即可增加图层。下图展现了图层之间的关系和图层设置面板的一些性能。

咱们能够为图层设定名称，这有助于咱们清晰地梳理本人的构思。从图中能够看到正方体和矩形的地位是重叠的，但谁在下面谁在上面 由图层决定 ，而不是像之前一样由拖放的先后顺序或者通过调整元素层级决定，即 图层的层级优先级高于 咱们设置的 元素层级。

如果你想删除某个图层，只须要选中它，而后点击图层设置面板左下角的垃圾桶图标即可。

看到图层左侧的锁图标了吗？它为咱们带来图层级别的锁，只有上了锁，咱们就无奈扭转该图层任何元素的属性、款式、排列等，这跟咱们前面提到的元素锁有很大的区别，图层锁的优先级高于元素锁。

换个角度思考，层与层之间的隔离像是编程中类的繁多准则，这样咱们就能够用面向对象的思维进行构图设计。如果你有开发教训你就能够将咱们经常听到的 约定优于配置 、 组合优于继承 等思维利用到绘图这件事上。

导入图片

Photoshop、WPS 流程图和 ProcessOn 都有图片导入的性能，性能完备的 diagrams 天然也不逊色。点击 A 区菜单栏的 调整图形 菜单，在子面板中抉择 插入 ，再在子面板中抉择 图片 即可进入图片抉择环节，确定抉择后图片将会被导入到 diagrams 画布中。

导入图片后咱们能够依据需要或者爱好将图片与 diagrams 的元素联合起来。例如导入一段代码图示后，应用箭头和文字为图片中的代码增加正文，导出后果如下。

这样看起来，是不是比在浏览器中间接看代码丑陋多了？逻辑也清晰多了？

如果要思考挪动端的读者阅读文章，那么用图片代替代码是优选形式。你想想微信公众号推文场景，用户看图片代码会比看长串的代码难受太多了。

文件导出

绘制完图之后点击 A 区菜单栏左上角的 文件 ，而后抉择子菜单中的 导出为，再抉择子菜单中的文件格式即可。依据你的需要，你能够导出 PNG 格局、SVG 格局、PDF 格局甚至是 XML 格局的文件，具体界面如下图所示。

当你抉择好格局后，它还会弹出一些选项让你配置。例如抉择图片格式时会弹出图片对应的配置窗口，咱们能够设置图片缩放比例、图片边框宽度、是否将网格成果一并导出、是否将暗影成果一并导出导出以后文件的单页或指定页内容、是否采纳通明背景等，具体界面如下图所示。

配置之丰盛令人满意。另外，如果你绘制的图用于印刷，那么它也能满足你对高 DPI 的需要。导出时再子菜单中选择 高级 选项会弹出入下图所示的配置界面。

在这里咱们就能够设置想要的 DPI 了。海报、宣传单和图书印刷的 DPI 值通常是 300，如果你谋求更好的成果，它也容许你设置更大的值。

填写好配置后点击右下角的 导出 按钮，依照指引抉择文件寄存地位即可。值得一提的是，导出速度相当快，失常大小的图导出速度在 1 秒内，图形元素较多的图或者 DPI 值较大的图导出速度可能会超过 1 秒，但也慢不到哪里去。

绘图操作进阶

通过下面的学习，你曾经把握了 diagrams 桌面利用的基本操作，还懂得为元素设置属性和不同的款式。但要想轻松实现绘图且绘制出更好看的图，还须要学习一些操作技巧。

多元素主动对齐

画布没有主动定位和元素对齐性能，在搁置多个元素后，咱们很有可能须要将它们对齐，以放弃好看和业余。罕用的对齐有向上对齐、向下对齐、垂直居中、左对齐、右对齐和程度居中等。

见名知意，向上对齐、向下对齐和垂直居中指的是多个元素对齐时所有元素参照最上、最下或者两头元素的地位对齐，而左对齐、右对齐和程度居中则是所有元素参照最左、最右或者两头元素的地位对齐。下图形容了多个高度不统一的元素采纳向上对齐的前后比照。

能够看到，对齐后的所有元素参照的是对齐前最上的地位。如果你对它的对齐逻辑还是不太了解，倡议你亲自动手操作一下，聪慧的你在几分钟就可能把握对齐规定。

多元素等距排列

很多时候咱们须要在程度方向或者垂直方向搁置多个元素，本着业余且好看的出发点，咱们会要求元素们等距排列。这样的需要通常有两种方法：

1、借助页面网格能够做到视觉上的等距，例如元素之间距离 1 个网格；

2、借助菜单栏中的等距散布选项；

在多个元素雷同且大小统一的时候，采纳第 1 种办法也是很间接无效的，但如果元素大小不一或者形态各不相同，那就不太好操作了。第 2 种办法是借助 diagrams 专门为用户提供的等距排列工具，只须要选中想要排列的多个元素，而后点击菜单栏中的 调整图形 并在子菜单中选择 等距散布，而后按需抉择程度方向或者垂直方向即可。第 2 种办法能够疏忽元素大小和形态，达到等距排列的目标。多元素程度方向等距排列的具体操作和排列后果如下图所示。

要留神的是，等距散布性能抉择的距离间隔是以多个元素占用的总间隔进行均匀划分的，并不是依据两个元素之间的最小间隔或者最大间隔进行划分。

多元素组合

在画布中，可操作的最小单位是 1 个元素。如果咱们想要操作多个元素，那么就须要选中它们，再执行例如拖拽、扭转大小、扭转属性等操作。然而在元素繁多且结构复杂的画布中，当你须要将相关联的多个元素拖动到另一个地位的时候，很容易误选其余元素或者漏掉某个元素，这给咱们造成了一些小麻烦。

选中想要组合的元素后点击菜单栏的 调整图形 选项，在弹出的子菜单中选择 组合 即可。上图给出了组合前后的比照，能够看出组合前的可操作单位是单个元素，组合后可操作单位变成了一组元素。如果你想遣散某个组合，那么抉择组合后通过菜单栏中的 调整图形 > 勾销组合 就能够将它们打散。

看到子菜单中的 移除组合 了吗？入手试试，看看它有什么作用。

多元素旋转

单个元素的旋转很简略，选中元素后元素的右上角会呈现一个可旋转的图标，鼠标悬停在旋转图标后按下并调整角度便可实现元素的旋转。多个元素的旋转有两种方法：

1、元素组合，将多个元素变成一个可操作单位，此时一组元素和单个元素的旋转操作雷同；

2、选中多个元素，通过 调整图形 > 方向 > 旋转 调整角度，可输出精确的旋转角度值；

两种办法的利用场景各不相同，大家应用的时候依据需要抉择即可。下图形容了第 2 种办法的具体操作和旋转后果。

旋转选项在 A 区菜单栏的 调整图形 > 方向 菜单中。

元素锁

锁在编程中有很多利用场景，在 diagrams 中咱们能够借助锁这个工具爱护元素或组合，防止在误操作等场景扭转原有的元素或组合的内容、排列形式和所在画布的地位等。元素的上锁解锁在 A 区菜单栏的 编辑 菜单下，锁定和解锁处于同一个选项。下图形容了元素上锁前后的差别。

锁定前元素具备 可操作属性 ，选中后能够扭转其款式、大小等。锁定后元素不具备可操作属性，咱们无奈调整内容、排列形式和所在画布的地位，也没法删除这个元素或者组合。 要留神的是，上锁后依然能够扭转单个元素的款式，例如色彩和线条类型。

在画布中查找

在一个原文件中可能有多个元素或者多组元素，查找性能能够帮忙咱们疾速定位到指定的元素或组合。查找的对象只能是文字元素，无奈查找图形元素。查找性能在 A 区的编辑菜单下，抉择查找性能后会在 F 区弹出一个查找选项窗口，咱们能够依据本人的需要设定查找条件。值得一提的是，它反对所有页面的查找，这几乎太棒了！下图形容了查找性能的应用和查找后果的展现。

查找到相干文字后会定位到该元素或组合，无需咱们手动定位。在有多个符合条件的场景中，能够通过 查找 按钮在多个相干后果之间跳转。

配色和格调让图形更具表现力

人靠衣装马靠鞍，优良的配色和格调抉择不仅能减少图的表现力，还能让你和你的团队看起来更业余。逼格高对于业务倒退和团队形象也是很有帮忙的，如果你画的图一团糟，而竞争对手画的图却显得很业余，他人能比你多收几万块不是没有情理的。

能扭转映像的手绘格调

相比于工具自带的那些直来直去的图形元素来说，手绘格调给人一种亲热、舒服、用心的感觉，从上面这张图里感受一下。不得不说，手绘格调配网格底纹就像火锅配牛肚，舒坦！

因为它具备这些贴近阅读者的属性，所以手绘格调成为了当初 IT 畛域常识付费专栏或者教学素材中罕用的格调之一，在极客工夫专栏中得以大量利用，在 IT 类的书籍中也频频退场。

在 diagrams 实现手绘格调很简略，选中元素后在右侧 E 区的 款式 面板中勾选 手绘 即可。要留神的是，有一部分根底图形是不反对手绘格调的，所以在绘图时要抉择反对手绘格调的图形元素，这样就可能放弃整体格调对立。

能加强成果的暗影

暗影始终都是图像设计中重要的一种成果加强方。我不是业余的设计人员，因而无奈给出业余的倡议或者认识，但我能够从视觉的角度形容暗影的作用和它所出现进去的成果。

上图由一列手机图形元素和一个显示器图形元素形成，左侧 5 部手机图形和第 6 部带有暗影和配色的手机看起来是不是齐全不一样，有没有一种 跃然于纸上 的感觉？这很像古代 IPS 硬屏显示器和前些年一般显示器的差距，你感觉它 浮在下面，离你很近。

最右侧的显示器图形也设置了暗影，这让它看上去更平面，像不像是 2.5D 的图形？

光和影在设计畛域始终都是相当重要的，利用好光和影可能让事物更有生机、更形象、更平面。下面的显示器图形只是光和影使用中最简略的一种，咱们抛开开发者的身份，观赏一下设计师们的作品。

尽管这些都是平面设计，但在视觉上它们却是平面的，而且还具备很强的空间感。这是一种一般开发者难以描述的美感，真的很难看，不是吗？

配色常识

说到图，那就肯定得聊聊配色。我感觉色调是人类感知世界多元化的一种路径，好的色调搭配会让咱们感觉赏心悦目，但蹩脚的配色会引起咱们的恶感。上面两幅图，一副用了整体色调相近的浅色，一副用了整体色调差别较大的深浅混搭，你感觉哪幅图看着难受一些？

尽管这会受到集体偏向和格调影响，但我感觉大部分读者会认为第一幅图看上去更清新难受，第二幅图浓墨重彩不太搭。跟下面聊暗影是一样的，我不是业余的设计师，无奈给出业余的倡议和认识，但这里筹备了一些 设计网站上对于配色的文章，大家可作为参考：

涨姿态！为什么有的色彩看起来十分低档？

设计师的读书笔记！带你从新全面意识色调系列之红色篇

所谓配色达人，就是一次出 48 个计划

那些用色高手，都做过这些训练！

你的配色看起来总是不难受？用这个策略性配色法令

外面提到了很多对于色调搭配的技巧和策略，大家无妨去学习学习，这样你就能绘制出更美的图，而且对本人的审美晋升也会有很大帮忙哦。文章中提到的一些配色和策略截图如下，具体还需你亲自去浏览哦。

配色工具

置信你从下面举荐的配色文章中播种了不少常识，在理论利用中咱们还须要一些辅助工具来晋升设计效率或者进行一些配色测试、配色比对。你看看人家设计的图，和你设计的是不是有很大差别？

如果是的话，连忙去学习吧！我的倡议还是 向专业人士看齐：

讲真，这可能是目前最全的在线配色工具合集了

业界良心！2015 年最优良的 20 款网站配色计划（附配色工具）

第一波！2020 年 3 月超实用设计工具大合集

16 款激发灵感的配色神器，让你的创意更出彩！

9 款对于配色、PS 和网站格调的设计工具，超级实用

绘图实战

能看到这里的读者，我想必定是心愿可能切实进步本人的绘图程度的，并不是蜻蜓点水的泛泛之辈。接下来我将以演进的形式手把手带你绘制开发过程中罕用的那些图，如果你想深刻学习 UML 图的绘制，能够拜访我的集体站点——夜幕镇岳剑韦世东的技术日志 ，下面还有很多 收费公开 的优良技术专栏 呢。

绘制汽车解锁时序图

时序图是咱们在程序设计阶段罕用的一种 UML 交互图，它通过形容对象之间发送音讯的工夫程序显示多个对象之间的动静合作。它能够示意用例的行为程序，当执行一个用例行为时，其中的每条音讯对应一个类操作或状态机中引起转换的触发事件。

这里以汽车钥匙的上锁和解锁过程为例，绘制一幅时序图。首先捋分明参加其中的几个角色：钥匙拥有者、钥匙、车，由此咱们能够画出如下图所示的根本构造。

而后咱们捋一捋上锁和解锁的过程，钥匙拥有者按下钥匙上的按键，车钥匙通过信号将锁信号传递给汽车，汽车依据锁的原状态作对应状态切换，从而实现上锁和解锁的目标。下图形容了从钥匙拥有者按下锁按键到汽车扭转锁状态的时序。

在理论生存中，咱们晓得汽车锁状态扭转时会发出信号以示意这次操作胜利了，相似于 TCP 协定中的 ACK。汽车收回的信号通常是灯光或声音，信号的理论接收者是按下锁按键的钥匙拥有者，由此咱们能够再欠缺一下这幅时序图。

上图就是残缺的汽车上锁和解锁时序图，你学会了吗？

小提示：在表白时序图角色时，冒号右边形容的是角色名称、右侧形容的是角色，如果冒号右边没有内容则代表这是一个匿名角色。如果想要更具体一些，能够改为“韦世东: 钥匙拥有者”、“飞驰: 汽车”。

绘制流式解决流程图

配色常识那个大节中用到的图示形容的就是流式解决，在 Kafka 流式解决的思维中（我没看过 Spark 和 Flink 的模型），流式解决是一端作为起始输出、一端作为最终输入、两头能够有多个解决环节的一种组合。由此咱们能够画出如下图所示的根本构造。

而后在两头搁置多个解决环节，这些解决环节实际上就是一个个程序，它们从 Kafka 中获取数据，解决实现后又放回去。

上图就是残缺的流式解决流程图，你学会了吗？

绘制挪动端利用分层架构图

绝对于单个模块的时序图和简略环节的流程图而言，Web 利用分层架构更简单，须要的图形也更多。假如咱们要用图表达一款挪动端利用的架构图，要清晰有条理地展现出整个零碎的最大执行单元之间的关系，你会怎么做呢？

在已知需要和功能模块的状况下，咱们要做的第一件事就是分层。分层不仅能在绘图中施展重要作用，在软件开发和设计中也是非常重要的，它可能让执行单元之间的责任更清晰明确。咱们先来简略粗略的划分一下：

1. 能为用户提供服务的视为应用层；
2. 负责存储利用数据的视为存储层；

由此咱们能够画出如下图所示的根本构造。

再来看看理论开发中是否须要退出其余组件，例如提 高查问性能的缓存 、 削峰填谷的音讯队列 、负责 申请转发的网关 等，加上这些组件后图就变成了上面这样。

这里你不用深究每个层级的具体划分和层级名称，咱们先把构造画进去。想一想，如同还须要加上 监控 。监控对整个工程链路负责，它是一套独自的组件，不参加分层，放到侧面示意会更适合。后端的整个构造就进去了，这里咱们顺便把 用户端 也补上。

接下来咱们将 具体的利用 补充进来，让整个程序看起来更饱满、更残缺。

接着让咱们表白出更贴近实在场景的成果，假如服务基于 Kubernetes、Redis 采纳集群和、MySQL 也采纳集群，那么咱们能够为它们加上贴切的图标。

一些丑陋的图形能够在 C 区 更多图形 处增加，上图的手机图形也是这样增加进来的。

这样看上去清晰多了，当然，咱们还能够为这些层级或者组件设置底色，用配色加强它们的表现力。

小结

看完这篇文章，想必你曾经清晰地理解到绘图这件事在 程序设计 和你的工程师职业生涯 中能施展出的作用有多重要了。

咱们当初再回顾一下后面所学到的常识：

在学习完绘图基本操作之后，你学了主动排列、多元素组合、主动对齐和元素锁等常识，当初你的绘图效率比之前高很多。

接着，你又理解到了格调对读者的影响，并学会了应用手绘格调。在配色方面，你去浏览了设计畛域的一些业余文章，理解到不同场景、不同配色带来的视觉差别，这间接晋升了你绘图的逼格。

最初，你跟着理论需要的剖析和假如，入手实际绘制了汽车解锁时序图、流式解决流程图和挪动端利用分层架构图。

当初你曾经领有了本人的 绘图思维 ，并把握了绘图操作。接下来只须要 多加练习 ，将这些技能 融入到日常工作当中，置信你肯定可能获得更好的问题，设计出更贴近业务、更好看的图。