processon作图完全装逼指南

2018-09-07 本文已影响3人 007明_阳

一、引言

作为一名IT从业者，不仅要有扎实的知识储备，出色的业务能力，还需要具备一定的软实力。软实力体现在具体事务的处理能力，包括沟通，协作，团队领导，问题的解决方案等，这些能力在关键时刻比硬性的技术水平更能体现一名工程师的价值，它决定了IT职业生涯的高度和视野。

而本文所分享的绘图能力，与其说是软实力，不妨说是基本功。无论从事的是开发、运维、通信，甚至产品经理，交互设计、运营这些有交集的岗位，都会在工作中用到。因为在计算机的世界里，大多数场景都是抽象的，当我们在描述他们的时候，一定是通过其实现原理和机制，抽象出一个行为逻辑，最后再具象到一张图。想象一下，当我们在浏览器中输入了一个地址，在敲击回车之后，所发生的一切是多么地复杂，如果能拍成电影，那么可以取名叫《一个数据包的奇幻漂流》。如果你能够以具象的画面来表述一个计算机世界中发生的一个场景，那很好，说明你的思路清晰，对原理的理解非常透彻，然后你要做的工作就像导演创作分镜一样，将它们体现在画纸上。

这是一种所谓抽象思维的能力，最好的锻炼方式之一便是画图。很多时候，我们会觉得说不清楚，一旦你发现说不清楚，那么我们就可以用画图来说明，这些图包含了你想要表达的思想或者逻辑，而不是一个画得非常逼真的主机箱。因此，在工作学习中，养成画图的习惯，把复杂模糊的文字描述转换成一张清晰直白的图，不仅可以降低许多沟通的成本，还可以锻炼个人的抽象思维能力。

下图（重新绘制）取自Jesse James Garrett 的《用户体验的要素：以用户为中心的Web设计》一书中的用户体验模型，可以说整本书就是围绕这张图展开论述的，是很多产品经理的入门经典书籍。从2000年3月初次发布到网上以来，Jesse所绘制的这个模型已经被下载了2万多次。事实上，用户体验是一种非常抽象的东西，所谓大师就是具备这样的能力，将极为抽象的思想，投射到一个简单的二维空间上，表现为具象的图表，从而形成具有逻辑的信息，这就是真正意义上的深入浅出。

那么很多人会问，说了这么多，用什么工具画图比较好等等，这里要说明的是，本文所要分享的内容，并不局限于某一种画图的工具和技巧，工具本身没有什么高低之差，差别在于是否具备抽象思维的能力，在于绘图的操作是否规范高效，在于是否理解事务的机理，关注这些才能够提升绘图能力，而不是陷入工具之争，这没有任何意义，即便是最普通的windows画图板，一样可以画图，无非图标不够漂亮，但我们并不在乎这些，对于IT从业者来说，并不需要视觉上艺术上的美感，而是这张图背后承载的信息。

下面要介绍的基本是各个绘图软件都相通的功能特性，使用这些功能可以提升我们绘图的效率，另外还提出了一些绘图的规范建议，供大家参考，毕竟这不是一份绘图软件的说明书。希望大家能够了解绘图的思想，而不是工具本身的使用。

二、ProcessOn简介

本文所使用的是在线绘图工具——ProcessOn，这是一个方便易用、免费高效的在线作图工具，运用它可以免费制作多种图。

之所以会使用这个工具，主要有几个原因：

一是因为它是一个在线的工具，自然也就有了跨平台的特性。作为一个IT从业者，很多情况下会穿梭在Windows，Linux，Mac OS这些操作系统之间工作，而常用的绘图软件，通常只能运行在Windows，当然Linux和Mac OS也有非常不错的绘图软件，但终究无法实现移动办公。而作为在线工具，也就屏蔽了因为不同操作系统带来的麻烦，你可以方便地在家中MacBook中使用它打开公司下班前画的一张半成品图，继续完成，然后明天上班就可以直接给领导作汇报了。

二是因为其在线存储，这也很重要，可以避免一些悲剧的发生，例如赶了一晚上的图，突然断电，蓝屏什么的，然而并没有保存，不得不满腹怨气地重画。

三是因为它操作简单，它基本吸取了visio之类常用绘图软件的操作特点，因此对于有绘图经验的用户，学习成本几乎为零。

四是因为结合网络社交的特性，不同图表的作者可以轻松地在平台分享各自作品，用户也可以方便地对公开的作品进行搜索，同时还支持多人协作的功能，适合团队内部协同工作

当然，这个工具也不是十全十美的，毕竟是2015年才上线提供服务，产品还存在或大或小的不稳定因素，如丢失数据（据其他网友反馈存在这样的情况，不过笔者在实际使用中未遇到过），菜单功能卡住，图标相对比较少等，不过这些问题也还在可忍受的范围之内。作为国内免费的在线绘图工具，可以做到这般实为不易。

三、操作技巧

对于ProcessOn登录注册等其他操作，这里不过多介绍（说多了就像软文），下面介绍一些常用的操作技巧，这些技巧通常也适用于visio等其他绘图软件，大家可以自行对应。可以说，这些技巧相当于绘图效率的催化剂，可以让我们实际的绘图工作提升效率，并且完成的图又不失美观和专业。

对于已经掌握这些技巧的读者可以跳过本节

3.1 平均分布

在很多场景下，我们会画一排，或者一串矩形之类的元素，但是由于手动拖拽的随意性，导致这些元素的间距不尽相同，这时我们可以使用图形分布的功能，将这些元素调整为相等间距，这样在元素比较多的情况下，可以保持整幅图的整洁。

操作时，选中对应的元素，然后选择屏幕顶部的工具栏中的“排列“，并选择“图形分布“->”垂直平均分布”

对应有两种分布：

水平平均分布，即水平方向上，使多个元素以相等的间距进行排列

垂直平均分布，即垂直方向上，使多个元素以相等的间距进行排列

3.2 元素对齐

大多数绘图软件中，在拖动一个元素的时候，会自动地出现一些对齐线，方便用户将元素对齐到特定的位置，但是一旦元素比较多，拖动的操作就有点杯水车薪了，事实上，我们可以使用对齐的功能快速地进行元素对齐，如下图：

我们可以将需要对齐元素选中，然后右键（或者点击屏幕顶部的工具栏中的“排列“），并选择“图形对齐“->”居中对齐”

这些对齐方式，可以从字面意思理解：

左对齐，即选中的所有元素，向处于屏幕最左侧的元素对齐

居中对齐：即选中的所有元素，根据屏幕最左侧和最右侧的位置计算得到中线，并向该中线对齐

右对齐，即选中的所有元素，向处于屏幕最右侧的元素对齐

顶端对齐：即选中的所有元素，向处于屏幕最上方的元素对齐

垂直居中对齐：即选中的所有元素，根据处于屏幕最上方和最下方的位置计算得到中线，并向该中线对齐

底端对齐：即选中的所有元素，向处于屏幕最下方的元素对齐

3.3 大小控制

有时候，我们在框内会标注上一些文字，由于标注的文字长短一步，就出现框本身的宽度不一致，为了保持整齐，通常就会将这些元素宽度（或高度）保持统一，一般操作就是手动地逐个调整方框大小，或者选中之后统一调整高宽的数值，当然也可以使用批量操作的方式

选中对应的元素，然后选择屏幕顶部的工具栏中的“排列“，并选择“匹配大小“->”宽度”

说明：不论是调整高度还是宽度，都是调整为所选元素中高度最大或宽度最大的数值

3.4 Z轴排列

这里所谓“Z轴“的概念，是从CSS中的“z-index”属性借鉴过来的，亦即垂直屏幕向外的方向。

在多个元素进行组合的时候，通常会涉及到前后遮挡的问题，这时候需要用到z轴排列，如下图中的圆环，其中就是由三个圆层叠而成，其中橙色的圆在最底层，红色的圆在中间，白色的圆在最顶层。

默认情况下，元素的z轴值是根据创建的先后顺序决定大小的，越是后创建的元素，其Z轴的数值越大，也就是能遮挡在它之前创建的元素。

绘制该图形时，首先需要选中这3个圆，然后使用“居中对齐“和“垂直居中对齐“，使其成为同心圆，如果此时，橙圆遮挡住了其他两个圆，则点击橙圆，并选择屏幕顶部的工具栏中的“排列“，然后点击“置于底层“，于是橙圆就会被推到最底层，接着可以选中红圆，先同样的操作将它置于底层，然后点击“上移一层“，这样红圆就会叠在橙圆之上，如果此时白圆仍然没有出现在最顶层，可以选中它，点击“置于顶层“，这样就完成了

3.5 分组

分组这个功能在复杂元素组成的图形中，非常实用，它相当于将某几个元素封装成为一个组件，以整体的方式进行拖拽，旋转，连线等操作，并且可以有效地防止意外拖动而打乱布局之类的误操作。

下图是表示负载均衡结构的一个简单拓扑图，图中load balancer 节点和web server的节点，是由3个元素组成：“主机“，“图标“和“圆角矩形“。通常我们会把这个三个元素进行组合，然后再连接线等其他操作，这样一旦这个拓扑图趋于复杂，而又需要做调整的时候，就可以方便地选中相关的节点，不至于元素漏选或错选而导致整个布局失败。

操作也非常简单，这样选中想要组合的元素，然后右键（或选择屏幕顶部的工具栏中的“排列“），并选择“组合“，即可完成。

3.6 框内文字对齐

在很多框图中，为了表示一个集合的概念，通常会在表示父元素的框内标注上集合的名字，下图所示的是spring框架内核容器的组成。一般情况下，父元素内的标注文字会使用“顶端对齐“的方式，而子元素则是居中，这也是框内文字默认的对齐方式。

操作时，先选中元素，然后打开屏幕上方工具栏中的“对齐“菜单，就可以选择相应的对齐方式。

其中第一排表示水平方向的对齐方式，从左往右依次是：左对齐，水平居中对齐，右对齐；第二排表示垂直方向的对齐方式，从左往右依次是：顶端对齐，垂直居中对齐，底端对齐。

3.7 快捷键

点击屏幕顶部的工具栏中的“帮助“，我们可以查看Processon目前支持的快捷键，整理如下：

通用

Alt按住Alt，通过数据可以对页面进行拖动Alt+(+/)视图放大或缩小T插入文本

Ctrl按住Ctrl，点击一个图形，将其添加到选择图形中，或者从中移除Ctrl+A全部选中 I插入图片

L插入连线

图形被选中时

箭头 (←↑↓→)将选中图形向左、向上、向下、向右移动Ctrl + 箭头 (←↑↓→)每次微移一个像素调整图形大小时按住Ctrl调整图形大小，并且约束比例

Ctrl+Z撤销Ctrl+Y恢复Ctrl+X剪切

Ctrl+C复制Ctrl+V粘贴Ctrl+D复用

Ctrl+Shift+B格式刷Delete,Backspace删除Ctrl+]将选中的图形置于顶层

Ctrl+[将选中的图形置于底层Ctrl+shift+]将选中的图形上移一层Ctrl+shift+[将选中的图形下移一层

Ctrl+L锁定选中的图形Ctrl+shift+L将选中的图形解锁Ctrl+G组合选中的图形

Ctrl+shift+G将选中的图形取消组合

编辑文本

空格编辑文本Ctrl+B粗体Ctrl+I斜体

Ctrl+U下划线Ctrl+Enter保存文本编辑

其中，除了Ctrl+C，Ctrl+V，Ctrl+A等常用的快捷键，我们会经常使用Ctrl+D，该快捷键相当于按了一次Ctrl+C，再按一次Ctrl+V，也就是复制和粘贴一键完成，在复制多个元素的时候非常实用，效率提升一倍。

另外组合功能Ctrl+G，插入文本T，插入连线L，置于顶层Ctrl+]，置于底层Ctrl+[，按住Ctrl约束比例调整大小也是使用率极高的快捷键。

我们在实践过程，一定要多使用快捷键来提升操作效率，不要在对齐排列，调整大小，拖拽布局等操作上浪费过多的时间。

3.8 综合案例

下面介绍一个综合案例，我们将运用上述技巧，绘制Linux中的awk数据处理模型示意图，如下图所示。了解awk命令的人都知道，awk是以行为单位处理数据的，并且可以按照指定的分隔符，将数据切割成多列，其中RS为行分隔符，FS为列，$+数字表示取列。

下面列举几个重要的操作步骤：

绘制表示行的横向矩形

首先创建5个矩形，使用复用快捷键Ctrl+D，然后全选完成对齐操作，接着将最下方的矩形，拖动到合适的位置，最后使用“垂直平均分布“功能，完成。

绘制表示列的垂直矩形

将行置于列之上，使用“置于底层“的功能，这里最好将列的各个矩形进行分组。这样，如果觉得布局不是特别合适，就可以比较方便地重新进行水平分布。

最后完成：

标注文字说明，尽量使用Ctrl+D进行元素的复用

调整行矩形的透明度

列矩形中的文字使用“顶端对齐“即可

四、规范建议

4.1 大小

在默认情况下，processon的画纸比A4略大，即1250px*1550px，不过也可以按照需要进行调整。在绘图时，所有的元素应当尽量布局在一张画纸上，这样置于A4大小的文档或者宽度为1000px左右的网页，不会显得特别突兀，尺寸过大，会导致整体比例缩小之后，局部元素显得过小，看不清楚。

另外，我们在生成相同元素的时候，尽量先手动地配置大小，并且这个大小是你记得住的，然后使用Ctrl+D进行复用，那么当某一个元素被误拖拽而导致大小发生了变化之后，就可以迅速地调整回来，另外，如果在后期还想添加一个相同元素，那么也可以直接配置对应的大小。简言之，配置元素的大小，使用一个你可以记住的数值，从而提高工作效率。

4.2 字体

先来介绍一些关于字体的背景知识：

通常，字体可以分为衬线体和无衬线体，熟悉CSS的同学一定知道设置字体时有san-serif属性，san-serif即无衬线体，词根serif即衬线的意思。所谓的衬线，就是在每个字符的边缘部分有一定的描边修饰。举例来说，中文字体中的“宋体“，英文字体中的“Times New Roma”就是典型的衬线体，而中文字体中的“黑体“，英文字体中的“Arial”就是典型的无衬线体。

按照字符的宽度，还可以将字体分为等宽字体和非等宽字体，顾名思义，等宽字体也就是每个字符的宽度都相同。在IT领域，一般都倾向于使用等宽字体，例如微软开发的Consolas字体就是典型的等宽字体，它被使用在windows的控制台中，新版本eclipse默认也使用该字体（旧版本默认的是Courier New字体）。从下面的对比中，可以很清楚地看到等宽字体和非等宽字体的差别。

一般来说，由于衬线体具有笔画上的修饰，使得感官上字符之间有一定的连续性，这样对于大段的文字就比较方便横向阅读，这也就是我们的课本，报纸等读物使用宋体进行印刷的原因之一，而无衬线体更符合现代美学从简的观念，也比较适合作为标语来印刷，例如挂着的大红横幅通常就是用黑体来印刷的。

我们在绘图的过程中，并不需要大段的文字，因此建议尽量使用同一种无衬线体，并且除了标题部分等进行特殊大小处理的字体，其他元素的文字都统一字号。在processon提供的字体中，笔者建议统一使用“微软雅黑“字体，字号大小为14px，并且加粗。这样可以使得导出的图片，粘贴在word等文档中时显得比较和谐。

如果我们要在图中引入代码或配置文件等专业性的内容，则尽量使用等宽字体，以保证内容排版的整齐性，这里建议使用Lucida Console，因为它既是等宽字体，又是无衬线字体。

4.3 配色

还是先介绍一些关于颜色的背景知识（引用自《超越平凡的平面设计：版式设计原理与应用》）：

色轮：由12基本颜色组成，首先由红、黄、蓝三原色，然后两两混合得到间色，间色再两两混合得到三级色

明度：色彩有明暗，有明度值来衡量，深色就是在纯色里加入黑色，浅色就是在纯色里加入白色。

色彩关系：由色轮和明度就可以产生颜色之间的关系，一个有6种基本关系：单色、近似色、补色、分裂补色、原色、间色

毕竟笔者不是学设计或美术出身，谈不上专业角度的美学配色方案，这里就引用网络上一篇关于中国街头广告牌设计的文章，以此借鉴对颜色的运用方法

素材来源微博《中国的招牌为什么这么丑｜大象公会》

上图就是充斥各个城市街头的广告牌，高纯度的大红色背景，高纯度颜色的字体，且没有充分留白，不同的色彩占据相似的面积，相比之下，下图的排版采用的是低纯度的暗色，以及充分的留白，档次明显高了很多，这就是通常讲的“素色审美“，有时候我们会称之为“小清新“，类似于宜家给人们的印象。

绘图中使用颜色的时候，建议不要过于追求高饱和度和鲜艳的色彩，而是采用低纯度和充分的留白。这一点，processon的调色板也给出非常好的示范，

processon的调色板提供的颜色基本属于web安全色，所谓web安全色，就是在不同浏览器都可以显示相同的颜色，它们用十六进制的00，33，66，99，cc，ff表示三原色，其中我们可以方便地找到饱和度低的配色，如上图的颜色方案，他们位于调色板的第二行，将其应用于框内背景色，可以让整幅图显得比较柔和，不会刺眼。

4.4 最小化原则

在运维的工作中，有一个重要的指导思想，即“最小化原则“，例如最小化安装操作系统，最小化启动服务，最小化安全权限等等。同样，我们也可以把这个思想引入到绘图的实践中来，主要体现在一下几点：

一个方块，除了包含文字和足够留白，就可以应该保持在最小的尺寸，而不应该毫无逻辑地扩大，建议四个方向上的留白大约保持在5px左右；

元素之间连线，除了在连续上标注足够的文字，就应该保持的在最短的长度；

相邻的元素之间，也应该保持在最小的间隔之内，不应该过大，大约在5px-20px之间；

整体比例保持在最小，不应该留有大面积的空白，但也不应过于拥挤，留有适当空间，可以让整体具有呼吸属性，不会让人觉得“密不透风“；

五、实战

因为IT细分领域内有着非常多的专业图表，但笔者知识边界有限，所以下面着重介绍两种通用性比较高的图：基本流程图和系统拓扑图

5.1 基本流程图

有关流程图的概念，最早是在软件工程中接触到的程序流程图，早期，流程图目的就是描述程序的执行过程，一直以来就是软件设计的重要工具，随着使用者增多，流程图的概念也不再限制于软件设计，只要涉及有关流程的任何场景，我们都可以用流程图来表示。

这里所谓的基本流程图，是相对于其他流程图来说的。这里简单介绍一下泳道图，下图所示，泳道图包含了流程中每一个步骤对应的相关单位，其中单位可以是部门，也可以是职位等，泳道图可以很好地表现了一个流程中不同的职能分工，以及协作的逻辑关系，是项目管理者制定项目计划的常用工具。

5.1.1 常用符号

下面整理了基本流程图常用的符号图示，掌握以下10个足够应付99%的流程图，其中最常用也就是第一行的符号：

开始和结束用圆弧矩形表示

处理过程用矩形表示

分支判断用菱形表示

元素之间用带箭头的线连接

5.1.2 基本结构

了解了常用符号之后，就可以画出流程图中的三个基本结构，即顺序结构，分支结构和循环结构：

顺序结构：也是最简单的结构，即按照事务的顺序依次执行

分支结构：流程中会进行条件的判断，根据不同的判断结果采取不同的处理，例如启动服务时，先检查pid文件是否存在，如果不存在，则启动服务，否则报错

循环结构：当条件不被满足时，重复执行同一个（或几个）处理，例如常会被用于遍历数组等操作

事实上，流程图就是由这三种基本的结构，根据实际业务情况，相互组合而成。我们在绘制流程图，首先就是要确定所要描述的业务实际的流程逻辑，然后推敲每个步骤的执行，是否存在分支和循环，目的就是要阅读流程图的人一目了然，迅速地理解流程的每个环节。

5.1.3 流程图案例

下面我们以“超市购物“为案例，综合运用一下上述3个基本结构。

如图，其中购物是一个循环结构，如果购物清单上的物品还没有买全，则继续购买物品，否则就可以去收银台结算了，而支付环节就是一个分支结构，如果现金足够的话，就选择用现金支付，否则就使用手机的APP支付。

像这样的流程，我们在工作和学习中还是有非常多的实战案例的，例如部署服务，安装软件等等，在整个流程中，一定是会出现各种问题，那么对于各种异常的处理，就可以用一个分支结构来表示，我们可以试着把工作遇到的问题和排查过程，通过流程图的方式落实到文档中，那么长久下来，对于经验的积累会起到非常大的帮助作用。

5.2 系统拓扑图

这里分享的系统拓扑图，主要是指集群架构图，对于其他拓扑图，从绘图的角度来说，本质上是一样的，可以融会贯通。

下面还是以一个案例来分享一些笔者浅薄的经验，如图，这是一个经典的中小规模web集群架构（参考自《跟老男孩学Linux运维：web集群实战》），包括负载均衡，web服务，数据库主从复制，读写分离，网络文件系统，文件备份，批量管理，yum仓库等诸多单元。

5.2.1 方案规划

首先在新建一张空白画纸之前，我们应该对当前这个系统架构有充分了解，不论你是否已经实现了这个架构，都至少有一个方案规划，方案描述了这个系统应该要完成的哪些功能，以及为了完成这些功能，需要提供哪些基础的服务等，另外还应当包含服务器规划表，用来说明为了完成这个系统，至少需要哪些服务器，这些服务器提供哪些服务等信息。

5.2.2 模块分割

在确定方案之后，就可以对系统中的各个模块进行分割，这个过程与软件设计的模块设计比较相似，先确定功能模块，先不管这个功能模块如何实现，只要确定他在系统架构中的位置和作用，以及提供服务的方式，数据的流向等。这些确定之后，整个系统的框架就设计完成了。如图，我们抽象出了几个模块：负载均衡，web服务，数据库，文件存储，以及管理五个模块。这些模块就可以实现一个基本的web服务解决方案了。

一般来说，每个模块内部，可以根据不同需求和资源，实现不同的方案：

负载均衡可以由nginx，lvs或者硬件等实现；

web服务根据开发语言的特性实现不同web容器，如apache+tomcat，nginx+php等；

数据库的实现就更多了，传统的关系型数据库和NoSQL数据库产品，甚至还可以实现利用redis，memcached等实现缓存；

文件存储，可以通过GlusterFS等各种分布式文件系统实现；

管理模块的功能比较多，例如安装，部署，监控等，对应有多种实现方式，这里就一一列举了；

但不管如何实现，以后即便模块内部进行调整，大的框架仍然不变。因此在绘图时，框架的确定尤为重要，也是我们着手绘制架构图的关键一步。

5.2.3 节点设计

接下来，就可以设计模块内部的实现了，我们可以通过各类的图标绘制不同服务的节点。processon提供的图标并没有MS visio中的丰富，但也足够使用了。

笔者的做法是，使用“服务器“图标+”功能“图标+圆角矩形组合成一个节点（如上面3.5小节中看到的那个图）。之所以要用圆角矩形进行包裹，一方面为了方便输入文字标注，更重要的一点是在架构比较复杂，连接线比较多的情况下，矩形的边可以连接更多的线，而如果直接连接服务器的图标，会显得非常杂乱，有时候也会遮挡文字标注。

“服务器“和“功能“图标，在processon绘图界面右下角“更多图形“中的网络拓扑图下可以找到，分别在network和Azure子目录（这个Azure就是微软的云，另外也有aws的图标，但是不太看得懂-_-||）

绘制各个节点时，尽量使用Ctrl+D进行复用。对于“功能“图标，由于默认的图标比较大，在调整大小时可以按住Ctrl键进行拖拽的操作，这样可以保持图标的大小比例，就不会失真了。

5.2.4 连线调整

当我们需要将每个节点连接起来的时候，务必记得对节点进行分组操作，不然一旦置于大框架之内，再想选择这个节点，或者再次添加连线操作就非常麻烦。比较遗憾的是processon的分组功能比较单薄，当我们将一个分组作为一个元素与其他的元素再次分组时，原来的分组就会撤销掉，也就是说分组不具有嵌套的特性，这和MS visio不太一样，所以在分组操作时，最好的方式就是单个节点分组。

分组之后，节点中的三个元素就作为一个整体，此时再与其他节点进行相连，连接时也务必连接到对方的边上，这样在拖动时就可以跟着一起动。针对重要节点连线，需要进行一定的文字标注，说明其意义。