在写《深入浅出 HTTPS：从原理到实战》这本书的时候（月底能出版了），画了不少流程图，在此期间主要使用了三款 Web 流程图软件（draw.io、processon.com、lucidchart.com），这篇文章主要分享使用过程中的一些体会。

简单理解流程图

从技术领域，有很多类型的图，对于我来说，主要关心下面三种类型：

• 流程图，把一个流程或者一件事情讲清楚。
• UML，在分析、设计、开发的时候，进行业务抽象。
• Mind 思维导图，用于整理思路，或者做笔记。

这篇文章主要讲解流程图，流程图可能是使用最广泛的一种图了，在各个领域都会用到，所以称呼非常多，比如系统流程图、数据流程图、产品流程图。对于我来说，如果没有特别的目的，没有必要纠结于流程图的类型。

从本质上看，流程图就是由为数不多的元素（图形和图标）组成，元素之间有特定的作用和关系，严格意义上来讲，流程图也是有规则的，不应该混淆使用各种元素，关于流程图元素的定义，可以参考 Flowchart Symbols and Notation 这篇文章。

当然对我来说，使用流程图软件将业务过程描述清楚更关键，所以如果元素类型使用错误关系也不大。在流程图中，其实还有两种流程图比较重要，分别是泳道图和 BPMN，这也是我后续想重点学习的。

为加深印象，可以通过下面两张图了解泳道图和 BPMN：

图1：泳道图

图2：BPMN

关于流程图的定义，可以引用下面这段话，个人觉得准确进行了定义：

A flowchart is a diagram that depicts a process, system or computer algorithm. They are widely used in multiple fields to document, study, plan, improve and communicate often complex processes in clear, easy-to-understand diagrams

我将要介绍的三个软件都基于 Web，对于一个复杂软件来说，是不是 Web 版我觉得不重要，只要软件好，下载一个电脑版，对我来说也是毫无问题的。

对于这三款流程图软件来说，Web 版代表好用、易用、够用。好用表示这三个软件能够画出一张流程图，不管是工作还是学习，最终生成的流程图是有用的，是能够解决问题的。

易用是最重要的一个特性，说实话，微软的很多产品（比如 Word、Visio）功能非常多，如果能够真正掌握它，那说明多了一个立身的技能，很多岗位需要专业的办公化人才。正因为功能多，所以市面上才会出现很多相关的书籍，也可见这些软件确实是难学的。对于我来说，以 Visio 为例，工作这么旧了，一直学不会这门软件，原因在哪儿呢？一方面确实缺乏使用技巧，另外就是缺乏美感，画不出好看的流程图软件，我特别羡慕那些会画流程图的人。

但是这三款软件至少在学习成本上不用耗费太久的时间，简简单单经过拖拽，就能够画出一张流程图，简单的说来就是使用的时候不会遇到很多的挫折。

够用的意思是什么呢？对于一个非专业人员来说，流程图可能仅仅是为了描述一个流程，或者呈现业务逻辑，没有必要花很多的时间去雕琢它，也就是说，如果你使用 Visio 画流程图，可能 90% 的功能也不会遇到，那么我们是否可以将这 10% 的常用功能独立出来，然后给用户使用呢？这三个软件的设计初衷也许就基于此，够用就行，如果你想画出更专业的流程图软件，那么你可以使用其他的软件。

那么这些软件为什么好用呢，说实话，我无法描述出，只是在内心深处感觉这些软件通人性，帮你考虑了很多问题，让你画流程图的时候更顺畅。

举几个例子，画流程图就是连接各个图形，这三个软件在连接图形方面做的都非常好，可操作性非常好。另外在图形的排列和分布控制上也足够简单，拖动一个图形的时候，会告诉你其和相邻图形之间的关系。

总之，这三个软件在操作的时候比较简单，建议大家可以尝试一下。

三个软件的比较

首先说明 processon.com 完全模仿 lucidchart.com，甚至连界面也差不多，但这不是重点，processon.com 进一步弱化了功能，废除了一些 lucidchart.com 拥有的功能，但我觉得这反而更实用，所以我觉得这是一款非常不错的软件。在写《深入浅出 HTTPS：从原理到实战》这本书的时候，所有的图片全部由 processon.com 完成，当然如果时间足够的话，我最终会使用 draw.io，这也基本反映了我的选择。

• 如果不是十分重要的流程图，建议使用 processon.com。
• 如果希望流程图比较完整、专业、可控性较强，建议选择 draw.io，尤其它是完全免费的。
• 不建议使用 lucidchart.com，主要原因是它收费。但如果想学习画图软件的知识，那么它的文档非常棒。

接下去简单描述下这三款软件的一些特点，以此加深对他们的理解。

（1）lucidchart.com 的箭头类型可供选择的非常少，只有三种，processon.com 虽然较多，但是相比 draw.io 来说不够精细，这一点上 draw.io 可以说是完胜。

（2）文件格式，processon.com 能够导出为各类图片（比如 png、svg）和 PDF，基本满足大部分需求了。也可以导入导出 .pos 文件，这是 processon.com 内部的一种文件格式，对于其他画图软件来说没有通用性。

draw.io 是开源软件，每一张图对应的源文件是 XML 格式，通过 XML 能了解每张图的数据结构。draw.io 也能导出各类图片（比如 png、jpg、svg）和 PDF，同时也能导出 HTML 格式和 VSDX格式（Microsoft Visio 图形格式）。

lucidchart.com 在导入导出上功能最强大，这也是它的卖点之一。和 draw.io 相比，还能导出为 CSV 格式（很奇怪，CSV 现在很通用吗？）；在导入上，它分为两种方式。可以导入图形（Diagram），比如 Visio、Omnigraffle、Gliffy、Draw.io，这是非常流行的四个流程图软件。另外也可以导入数据（Data），比如 CSV、Mindmaps、SQL 等各类数据。

draw.io 也能嵌入到其他的应用程序中，比如以图片、HTML、IFrame、Google Docs 插件的方式供其他软件使用。lucidchart.com 在这方面做的最不好，基本上是一个封闭的系统。processon.com 考虑到用户的实际使用需求，在分享方面做的不错，支持在线图片的浏览、在线文件浏览（有 processon.com 操作按钮），也支持 IFrame 嵌入方式。

（3）是否收费，draw.io 是完全免费的软件；虽然 processon.com 是收费的（图数量有上限），但可以通过各类方法（比如推荐别人注册）增加数量上限。如果还是超出了数量限制，还可以将原来画的图导出为 pos 格式，然后删除在线文件，并将 pos 文件保存到本地，以后想使用的时候再导入。

lucidchart.com 在免费策略上非常苛刻，所以如果你想要使用它，那不得不付费。

（4）关于图形粗细，一幅图是由一个个图形和连接线构成的，图形和连接线的颜色和粗细对于呈现非常重要，在这方面，processon.com 是最让人不满意的，它最细的尺寸是 1 px，显得不够精细，在颜色方面选择的黑色在视觉上感觉是灰色的，线条非常发虚。draw.io 最细的尺寸也是 1px，但颜色还是比较正的。lucidchart.com 在这方面做的最好，最细尺寸是 0.5 px，显得有质感。

如果 processon.com 能在这方面做的更好一点，对于我来说，可以作为长期使用的一个流程图软件（可以忍受其他某些功能的缺失）。

（5）只有 draw.io 有独立的直线（line）图形，其他两个软件都没有，但是他们可以基于箭头图形（比如两端的箭头设置为 None）生成直线，但是在效果上差了一些。

这三款软件在连接各个图形方面做的都不错，但是如果想独立画一些图形，那么必须首推 draw.io，画图控制方面做的最好。

（6）云端保存，lucidchart.com 和 processon.com 都是实时将文件保持在云端，对于用户来说，一般不会丢失更新操作。而对于 draw.io 来说，它是一款免费的软件，它没有云端存储的概念，那么文件（XML）保存在哪儿呢？它结合了一些云端网盘的功能，比如可以连接 Google Drive、OneDrive、Dropbox，利用这些软件的存储特性和实时保存功能。这是非常好的一种策略，但是我个人不是很喜欢，为了保存软件，必须手动点击保存按钮（生成一个本地 XML 文件），以免丢失文件操作。

（7）关于画布，processon.com 画布配置是最简单的，可以是 A3、A4、A5 大小，背景颜色和内边距可以设置，为了更好的控制流程图，也可以缩放画布。draw.io 画布设置和 processon.com 差不多，而 lucidchart.com 控制力度最大，对于这三种软件来说，最终下载的图片大小都是由画布上所有图形范围决定的。

（8）能够画那些图？这三款软件可以画很多类型的图，除了可以画基本的流程图；在软件领域可以画 UML、ER、UI Mockups（可以理解为原型图）、Site Maps；在商业领域可以画 Data Flow、BPMN；当然也支持其他类型的图，不过在我看来，其实挺鸡肋的。

其实万变不离其中，不管什么类型的图，最后都是由一些元素组合而成的，至于“哪一种类型图”其实是对元素组合的一种分类，没有本质的区别，除了 processon.com，其他两个软件都可以导入自定义的图形和图标，从而体现可扩展性。

draw.io 的一些使用技巧

接下去跟随 draw.io 的官方手册，描述其一些特点。

（1）对于每一个元素来说（图形和图标），共有三种控制操作，分别是“样式”、“文本”、“图形调整”，

从“样式”的角度看，比较有特点的是，图形可以有多种效果，比如长方形可以支持“圆角”、“阴影”、“玻璃效果”、“手绘”等效果。

线条是非常重要的一个元素，在“样式”中可设置的空间非常大，线条有三种线型，分别是“圆角”，“尖角”，“曲线”，每一个线条可以设置宽度，线头的两端可以设置箭头的样式，设置可以调整箭头的大小。同时线条一般是连接其他的图形，可以微调线条和图形之间的间距，可见线条的设置非常多。另外 Waypoints 的配置非常的丰富，关于什么是 Waypoints 后面再说，简单的说，就是连接图形之间的线条可以有多种方式。

需要注意的是“样式”设置是全局保存的，你如果对第一个图形进行“样式“设置，那么加入一个新的图形，这个图形的设置是复用上一个图形“样式”的。

如果你觉得一个图形的“样式”比较好，可以对“样式”进行复制和粘帖，

对于“文本”设置来说，一般情况下会在图形元素中输入文字，这个设置就是用于控制文字的，比如文字大小、字体（微软雅黑是 Mircrosoft Yahei）、文字位置。

对于“图形调整”来说，就是控制元素的大小，以及在画布中的位置，同时元素也可以翻转角度。

（2）按住一个图形，将会出现一个十字架和四个蓝色箭头（固定连接点，fixed connection points），使用固定连接点可以控制链接器（connector，连接图形之间的线条），ctrl+点击固定连接点=复制一个元素；shift+点击固定连接点=生成一个线条；ctrl+拖拽固定连接点=复制一个元素并连接两个元素。

在四个蓝色箭头周围移动鼠标，将看到更多的绿色圆形，这些长方形可以连接其他的元素，选中绿色圆形，拖动鼠标可以生成一条线，可以用于精准的控制连接线（Connectors）的位置。连接线有个特点，就是会随着元素移动而移动，始终依附在元素四周。

（3）元素也可以调整（Altering Shapes），比如说可以翻转元素（Rotating Shapes），也可以调整大小，当选中一个元素（主要是图形）后，在元素四周会出现多个蓝色 dots，拖动其中某一个 蓝色 dots，就可以改变元素的大小，如果选等比例改变元素大小，可以选择 shift 键拖动或者拖动元素四个正角方向的 dots 点。

（5）关于连接线（Connectors）进一步描述，连接线实际上就是线条，连接线有两种方式，Anchored 表示随着图形的移动，连接点永远在原来的位置，通过下图可以清晰的了解含义。

图3：Anchored

而 Floating 表示随着图形的移动，连接点会调整连接点的位置，通过下图可以清晰的了解含义。

图4：Floating

至于如何控制是 Anchored 连接还是 Floating 连接，可以参考下面两张表格。

第一张表格：

第二张表格：

（6）Waypoints 就是可以以多种方式调整连接点，在复杂的图中，它是非常重要的概念，用处非常多，可以避免干扰元素之间的连接。

连接点有多种不同形式，比如 Straight（直线）、Orghogonal（正交）、Simple、Lsometric（等尺寸）、Curved、Entity Relation。通过 Waypoints，连接线的形式会非常丰富。

不同类型的连接点上有多个 Waypoints（直线的连接点没有 Waypoints），通过拖动 Waypoints，可以进一步调整连接点的形式，比如下图中，蓝色的圆形小点就是 Waypoints。

图5：Waypoints

需要注意的是，根据连接点的形式不同，连接线和图形之间的连接位置也是会移动的。比如下面这张图

如果是直线连接线，那么移动长方形的位置，连接线和长方形之间的连接位置也会变化（与 Anchored 和 Floating 也有关），而对于曲线连接线，拖动 Waypoints 点，连接线和元素之间的连接位置一般情况下是固定的（居中）。

图6：Waypoint-Floating-Connectors

关于连接线，其和连接线的形式（nchored、Floating）、Waypoints、连接线的种类、连接线元素有关，通过算法的控制，可以描述出更多的样式。

如果通过 Waypoints 调整了连接线，也可以控制菜单清除 Waypoints，从而可以恢复到调整之前的样式。

（7）draw.io 能够插入或者布局各种图形、连接、图片等元素，而且为了快速进行画画，通过算法可以调整各个元素之间的布局，比如说支持 Flow（垂直或者横向）流、Tree（垂直或者横向）树、organic（意会作用吧）、circle（意会作用吧），这个功能对于快速画图或者组织元素非常有用。

这三个流程图软件都需要人为控制，还有一些软件可以通过“代码”自动生成图，可控性和样式上效果非常好，推荐三个：

• PlantUML
• Dot 语言，Graphviz 工具内置的语言
• Mermaid

yudadanwx