IT从业者的绘图指南(Processon版)

一、引言

作为一名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目前支持的快捷键
其中,除了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 配色

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


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

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

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

### 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不太一样,所以在分组操作时,最好的方式就是单个节点分组。

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

5.2.5 整体调整

这里就需要应用最小化原则进行调整。在设计节点的时候,为了能够包含各个节点,通常会把大框调整到比较大的尺寸,不至于影响节点的拖拽,而当模块内部完成之后,就要将整幅图的比例调整到合适的大小,去掉无意义的空白,使得布局趋于紧凑合理。

然后去掉框架之间的连线,将提供服务的节点和使用服务的节点直接相连,由于管理中的节点与其他节点都需要连接,如果画线就显得比较凌乱,并且连线的意义不大,故而省去。

最后再加上一些修饰,以及外部的调用情况,就完成了整个系统架构图。

六、总结

本文主要分享了以下几点

  • 介绍了绘图作为IT从业人员软实力的重要性,以及绘图在日常工作中的重要作用
  • 绘图工具processon中各个功能特性和使用技巧,主要有分布,对齐,z轴排列,快捷键等
  • 提出了一些绘图的规范建议,包括大小,字体,颜色,最小化原则,均是体现在细节上,不过,这些细节最终会影响到整体的质感
  • 流程图和系统拓扑图的绘制要领和经验。
  • 绘图是抽象思维能力的培养方式之一
  • 流程图的常用符号,基本结构,以及实战运用
  • 以web集群架构为案例介绍了绘制系统拓扑图的步骤
  • 一点微薄的经验分享,希望可以帮助到那些不习惯画图,或者想画好图却在画图各种操作上耗费过多精力的小伙伴们。

七、参考资料

  • Jesse James Garrett. 用户体验的要素:以用户为中心的Web设计. 机械工业出版社, 2007.
  • 麦克韦德. 超越平凡的平面设计 版式设计原理与应用. 人民邮电出版社, 2010.
  • 大象公社. 中国的招牌为什么这么丑. http://weibo.com/ttarticle/p/show?id=2309403993629365534797, 2016.
  • 张海藩. 软件工程导论[M]. 清华大学出版社, 2003.
  • 老男孩. 跟老男孩学Linux运维:Web集群实战. 机械工业出版社, 2016.