在寫《深入淺出 HTTPS：從原理到實(shí)戰(zhàn)》這本書的時(shí)候（月底能出版了），畫了不少流程圖，在此期間主要使用了三款 Web 流程圖軟件（draw.io、processon.com、lucidchart.com），這篇文章主要分享使用過(guò)程中的一些體會(huì)。

簡(jiǎn)單理解流程圖

從技術(shù)領(lǐng)域，有很多類型的圖，對(duì)于我來(lái)說(shuō)，主要關(guān)心下面三種類型：

• 流程圖，把一個(gè)流程或者一件事情講清楚。
• UML，在分析、設(shè)計(jì)、開發(fā)的時(shí)候，進(jìn)行業(yè)務(wù)抽象。
• Mind 思維導(dǎo)圖，用于整理思路，或者做筆記。

這篇文章主要講解流程圖，流程圖可能是使用最廣泛的一種圖了，在各個(gè)領(lǐng)域都會(huì)用到，所以稱呼非常多，比如系統(tǒng)流程圖、數(shù)據(jù)流程圖、產(chǎn)品流程圖。對(duì)于我來(lái)說(shuō)，如果沒(méi)有特別的目的，沒(méi)有必要糾結(jié)于流程圖的類型。

從本質(zhì)上看，流程圖就是由為數(shù)不多的元素（圖形和圖標(biāo)）組成，元素之間有特定的作用和關(guān)系，嚴(yán)格意義上來(lái)講，流程圖也是有規(guī)則的，不應(yīng)該混淆使用各種元素，關(guān)于流程圖元素的定義，可以參考 Flowchart Symbols and Notation 這篇文章。

當(dāng)然對(duì)我來(lái)說(shuō)，使用流程圖軟件將業(yè)務(wù)過(guò)程描述清楚更關(guān)鍵，所以如果元素類型使用錯(cuò)誤關(guān)系也不大。在流程圖中，其實(shí)還有兩種流程圖比較重要，分別是泳道圖和 BPMN，這也是我后續(xù)想重點(diǎn)學(xué)習(xí)的。

為加深印象，可以通過(guò)下面兩張圖了解泳道圖和 BPMN：

圖1：泳道圖

圖2：BPMN

關(guān)于流程圖的定義，可以引用下面這段話，個(gè)人覺得準(zhǔn)確進(jìn)行了定義：

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

我將要介紹的三個(gè)軟件都基于 Web，對(duì)于一個(gè)復(fù)雜軟件來(lái)說(shuō)，是不是 Web 版我覺得不重要，只要軟件好，下載一個(gè)電腦版，對(duì)我來(lái)說(shuō)也是毫無(wú)問(wèn)題的。

對(duì)于這三款流程圖軟件來(lái)說(shuō)，Web 版代表好用、易用、夠用。好用表示這三個(gè)軟件能夠畫出一張流程圖，不管是工作還是學(xué)習(xí)，最終生成的流程圖是有用的，是能夠解決問(wèn)題的。

易用是最重要的一個(gè)特性，說(shuō)實(shí)話，微軟的很多產(chǎn)品（比如 Word、Visio）功能非常多，如果能夠真正掌握它，那說(shuō)明多了一個(gè)立身的技能，很多崗位需要專業(yè)的辦公化人才。正因?yàn)楣δ芏啵允忻嫔喜艜?huì)出現(xiàn)很多相關(guān)的書籍，也可見這些軟件確實(shí)是難學(xué)的。對(duì)于我來(lái)說(shuō)，以 Visio 為例，工作這么舊了，一直學(xué)不會(huì)這門軟件，原因在哪兒呢？一方面確實(shí)缺乏使用技巧，另外就是缺乏美感，畫不出好看的流程圖軟件，我特別羨慕那些會(huì)畫流程圖的人。

但是這三款軟件至少在學(xué)習(xí)成本上不用耗費(fèi)太久的時(shí)間，簡(jiǎn)簡(jiǎn)單單經(jīng)過(guò)拖拽，就能夠畫出一張流程圖，簡(jiǎn)單的說(shuō)來(lái)就是使用的時(shí)候不會(huì)遇到很多的挫折。

夠用的意思是什么呢？對(duì)于一個(gè)非專業(yè)人員來(lái)說(shuō)，流程圖可能僅僅是為了描述一個(gè)流程，或者呈現(xiàn)業(yè)務(wù)邏輯，沒(méi)有必要花很多的時(shí)間去雕琢它，也就是說(shuō)，如果你使用 Visio 畫流程圖，可能 90% 的功能也不會(huì)遇到，那么我們是否可以將這 10% 的常用功能獨(dú)立出來(lái)，然后給用戶使用呢？這三個(gè)軟件的設(shè)計(jì)初衷也許就基于此，夠用就行，如果你想畫出更專業(yè)的流程圖軟件，那么你可以使用其他的軟件。

那么這些軟件為什么好用呢，說(shuō)實(shí)話，我無(wú)法描述出，只是在內(nèi)心深處感覺這些軟件通人性，幫你考慮了很多問(wèn)題，讓你畫流程圖的時(shí)候更順暢。

舉幾個(gè)例子，畫流程圖就是連接各個(gè)圖形，這三個(gè)軟件在連接圖形方面做的都非常好，可操作性非常好。另外在圖形的排列和分布控制上也足夠簡(jiǎn)單，拖動(dòng)一個(gè)圖形的時(shí)候，會(huì)告訴你其和相鄰圖形之間的關(guān)系。

總之，這三個(gè)軟件在操作的時(shí)候比較簡(jiǎn)單，建議大家可以嘗試一下。

三個(gè)軟件的比較

首先說(shuō)明 processon.com 完全模仿 lucidchart.com，甚至連界面也差不多，但這不是重點(diǎn)，processon.com 進(jìn)一步弱化了功能，廢除了一些 lucidchart.com 擁有的功能，但我覺得這反而更實(shí)用，所以我覺得這是一款非常不錯(cuò)的軟件。在寫《深入淺出 HTTPS：從原理到實(shí)戰(zhàn)》這本書的時(shí)候，所有的圖片全部由 processon.com 完成，當(dāng)然如果時(shí)間足夠的話，我最終會(huì)使用 draw.io，這也基本反映了我的選擇。

• 如果不是十分重要的流程圖，建議使用 processon.com。
• 如果希望流程圖比較完整、專業(yè)、可控性較強(qiáng)，建議選擇 draw.io，尤其它是完全免費(fèi)的。
• 不建議使用 lucidchart.com，主要原因是它收費(fèi)。但如果想學(xué)習(xí)畫圖軟件的知識(shí)，那么它的文檔非常棒。

接下去簡(jiǎn)單描述下這三款軟件的一些特點(diǎn)，以此加深對(duì)他們的理解。

（1）lucidchart.com 的箭頭類型可供選擇的非常少，只有三種，processon.com 雖然較多，但是相比 draw.io 來(lái)說(shuō)不夠精細(xì)，這一點(diǎn)上 draw.io 可以說(shuō)是完勝。

（2）文件格式，processon.com 能夠?qū)С鰹楦黝悎D片（比如 png、svg）和 PDF，基本滿足大部分需求了。也可以導(dǎo)入導(dǎo)出 .pos 文件，這是 processon.com 內(nèi)部的一種文件格式，對(duì)于其他畫圖軟件來(lái)說(shuō)沒(méi)有通用性。

draw.io 是開源軟件，每一張圖對(duì)應(yīng)的源文件是 XML 格式，通過(guò) XML 能了解每張圖的數(shù)據(jù)結(jié)構(gòu)。draw.io 也能導(dǎo)出各類圖片（比如 png、jpg、svg）和 PDF，同時(shí)也能導(dǎo)出 HTML 格式和 VSDX格式（Microsoft Visio 圖形格式）。

lucidchart.com 在導(dǎo)入導(dǎo)出上功能最強(qiáng)大，這也是它的賣點(diǎn)之一。和 draw.io 相比，還能導(dǎo)出為 CSV 格式（很奇怪，CSV 現(xiàn)在很通用嗎？）；在導(dǎo)入上，它分為兩種方式?？梢詫?dǎo)入圖形（Diagram），比如 Visio、Omnigraffle、Gliffy、Draw.io，這是非常流行的四個(gè)流程圖軟件。另外也可以導(dǎo)入數(shù)據(jù)（Data），比如 CSV、Mindmaps、SQL 等各類數(shù)據(jù)。

draw.io 也能嵌入到其他的應(yīng)用程序中，比如以圖片、HTML、IFrame、Google Docs 插件的方式供其他軟件使用。lucidchart.com 在這方面做的最不好，基本上是一個(gè)封閉的系統(tǒng)。processon.com 考慮到用戶的實(shí)際使用需求，在分享方面做的不錯(cuò)，支持在線圖片的瀏覽、在線文件瀏覽（有 processon.com 操作按鈕），也支持 IFrame 嵌入方式。

（3）是否收費(fèi)，draw.io 是完全免費(fèi)的軟件；雖然 processon.com 是收費(fèi)的（圖數(shù)量有上限），但可以通過(guò)各類方法（比如推薦別人注冊(cè)）增加數(shù)量上限。如果還是超出了數(shù)量限制，還可以將原來(lái)畫的圖導(dǎo)出為 pos 格式，然后刪除在線文件，并將 pos 文件保存到本地，以后想使用的時(shí)候再導(dǎo)入。

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

（4）關(guān)于圖形粗細(xì)，一幅圖是由一個(gè)個(gè)圖形和連接線構(gòu)成的，圖形和連接線的顏色和粗細(xì)對(duì)于呈現(xiàn)非常重要，在這方面，processon.com 是最讓人不滿意的，它最細(xì)的尺寸是 1 px，顯得不夠精細(xì)，在顏色方面選擇的黑色在視覺上感覺是灰色的，線條非常發(fā)虛。draw.io 最細(xì)的尺寸也是 1px，但顏色還是比較正的。lucidchart.com 在這方面做的最好，最細(xì)尺寸是 0.5 px，顯得有質(zhì)感。

如果 processon.com 能在這方面做的更好一點(diǎn)，對(duì)于我來(lái)說(shuō)，可以作為長(zhǎng)期使用的一個(gè)流程圖軟件（可以忍受其他某些功能的缺失）。

（5）只有 draw.io 有獨(dú)立的直線（line）圖形，其他兩個(gè)軟件都沒(méi)有，但是他們可以基于箭頭圖形（比如兩端的箭頭設(shè)置為 None）生成直線，但是在效果上差了一些。

這三款軟件在連接各個(gè)圖形方面做的都不錯(cuò)，但是如果想獨(dú)立畫一些圖形，那么必須首推 draw.io，畫圖控制方面做的最好。

（6）云端保存，lucidchart.com 和 processon.com 都是實(shí)時(shí)將文件保持在云端，對(duì)于用戶來(lái)說(shuō)，一般不會(huì)丟失更新操作。而對(duì)于 draw.io 來(lái)說(shuō)，它是一款免費(fèi)的軟件，它沒(méi)有云端存儲(chǔ)的概念，那么文件（XML）保存在哪兒呢？它結(jié)合了一些云端網(wǎng)盤的功能，比如可以連接 Google Drive、OneDrive、Dropbox，利用這些軟件的存儲(chǔ)特性和實(shí)時(shí)保存功能。這是非常好的一種策略，但是我個(gè)人不是很喜歡，為了保存軟件，必須手動(dòng)點(diǎn)擊保存按鈕（生成一個(gè)本地 XML 文件），以免丟失文件操作。

（7）關(guān)于畫布，processon.com 畫布配置是最簡(jiǎn)單的，可以是 A3、A4、A5 大小，背景顏色和內(nèi)邊距可以設(shè)置，為了更好的控制流程圖，也可以縮放畫布。draw.io 畫布設(shè)置和 processon.com 差不多，而 lucidchart.com 控制力度最大，對(duì)于這三種軟件來(lái)說(shuō)，最終下載的圖片大小都是由畫布上所有圖形范圍決定的。

（8）能夠畫那些圖？這三款軟件可以畫很多類型的圖，除了可以畫基本的流程圖；在軟件領(lǐng)域可以畫 UML、ER、UI Mockups（可以理解為原型圖）、Site Maps；在商業(yè)領(lǐng)域可以畫 Data Flow、BPMN；當(dāng)然也支持其他類型的圖，不過(guò)在我看來(lái)，其實(shí)挺雞肋的。

其實(shí)萬(wàn)變不離其中，不管什么類型的圖，最后都是由一些元素組合而成的，至于“哪一種類型圖”其實(shí)是對(duì)元素組合的一種分類，沒(méi)有本質(zhì)的區(qū)別，除了 processon.com，其他兩個(gè)軟件都可以導(dǎo)入自定義的圖形和圖標(biāo)，從而體現(xiàn)可擴(kuò)展性。

draw.io 的一些使用技巧

接下去跟隨 draw.io 的官方手冊(cè)，描述其一些特點(diǎn)。

（1）對(duì)于每一個(gè)元素來(lái)說(shuō)（圖形和圖標(biāo)），共有三種控制操作，分別是“樣式”、“文本”、“圖形調(diào)整”，

從“樣式”的角度看，比較有特點(diǎn)的是，圖形可以有多種效果，比如長(zhǎng)方形可以支持“圓角”、“陰影”、“玻璃效果”、“手繪”等效果。

線條是非常重要的一個(gè)元素，在“樣式”中可設(shè)置的空間非常大，線條有三種線型，分別是“圓角”，“尖角”，“曲線”，每一個(gè)線條可以設(shè)置寬度，線頭的兩端可以設(shè)置箭頭的樣式，設(shè)置可以調(diào)整箭頭的大小。同時(shí)線條一般是連接其他的圖形，可以微調(diào)線條和圖形之間的間距，可見線條的設(shè)置非常多。另外 Waypoints 的配置非常的豐富，關(guān)于什么是 Waypoints 后面再說(shuō)，簡(jiǎn)單的說(shuō)，就是連接圖形之間的線條可以有多種方式。

需要注意的是“樣式”設(shè)置是全局保存的，你如果對(duì)第一個(gè)圖形進(jìn)行“樣式“設(shè)置，那么加入一個(gè)新的圖形，這個(gè)圖形的設(shè)置是復(fù)用上一個(gè)圖形“樣式”的。

如果你覺得一個(gè)圖形的“樣式”比較好，可以對(duì)“樣式”進(jìn)行復(fù)制和粘帖，

對(duì)于“文本”設(shè)置來(lái)說(shuō)，一般情況下會(huì)在圖形元素中輸入文字，這個(gè)設(shè)置就是用于控制文字的，比如文字大小、字體（微軟雅黑是 Mircrosoft Yahei）、文字位置。

對(duì)于“圖形調(diào)整”來(lái)說(shuō)，就是控制元素的大小，以及在畫布中的位置，同時(shí)元素也可以翻轉(zhuǎn)角度。

（2）按住一個(gè)圖形，將會(huì)出現(xiàn)一個(gè)十字架和四個(gè)藍(lán)色箭頭（固定連接點(diǎn)，fixed connection points），使用固定連接點(diǎn)可以控制鏈接器（connector，連接圖形之間的線條），ctrl+點(diǎn)擊固定連接點(diǎn)=復(fù)制一個(gè)元素；shift+點(diǎn)擊固定連接點(diǎn)=生成一個(gè)線條；ctrl+拖拽固定連接點(diǎn)=復(fù)制一個(gè)元素并連接兩個(gè)元素。

在四個(gè)藍(lán)色箭頭周圍移動(dòng)鼠標(biāo)，將看到更多的綠色圓形，這些長(zhǎng)方形可以連接其他的元素，選中綠色圓形，拖動(dòng)鼠標(biāo)可以生成一條線，可以用于精準(zhǔn)的控制連接線（Connectors）的位置。連接線有個(gè)特點(diǎn)，就是會(huì)隨著元素移動(dòng)而移動(dòng)，始終依附在元素四周。

（3）元素也可以調(diào)整（Altering Shapes），比如說(shuō)可以翻轉(zhuǎn)元素（Rotating Shapes），也可以調(diào)整大小，當(dāng)選中一個(gè)元素（主要是圖形）后，在元素四周會(huì)出現(xiàn)多個(gè)藍(lán)色 dots，拖動(dòng)其中某一個(gè) 藍(lán)色 dots，就可以改變?cè)氐拇笮。绻x等比例改變?cè)卮笮?，可以選擇 shift 鍵拖動(dòng)或者拖動(dòng)元素四個(gè)正角方向的 dots 點(diǎn)。

（5）關(guān)于連接線（Connectors）進(jìn)一步描述，連接線實(shí)際上就是線條，連接線有兩種方式，Anchored 表示隨著圖形的移動(dòng)，連接點(diǎn)永遠(yuǎn)在原來(lái)的位置，通過(guò)下圖可以清晰的了解含義。

圖3：Anchored

而 Floating 表示隨著圖形的移動(dòng)，連接點(diǎn)會(huì)調(diào)整連接點(diǎn)的位置，通過(guò)下圖可以清晰的了解含義。

圖4：Floating

至于如何控制是 Anchored 連接還是 Floating 連接，可以參考下面兩張表格。

第一張表格：

第二張表格：

（6）Waypoints 就是可以以多種方式調(diào)整連接點(diǎn)，在復(fù)雜的圖中，它是非常重要的概念，用處非常多，可以避免干擾元素之間的連接。

連接點(diǎn)有多種不同形式，比如 Straight（直線）、Orghogonal（正交）、Simple、Lsometric（等尺寸）、Curved、Entity Relation。通過(guò) Waypoints，連接線的形式會(huì)非常豐富。

不同類型的連接點(diǎn)上有多個(gè) Waypoints（直線的連接點(diǎn)沒(méi)有 Waypoints），通過(guò)拖動(dòng) Waypoints，可以進(jìn)一步調(diào)整連接點(diǎn)的形式，比如下圖中，藍(lán)色的圓形小點(diǎn)就是 Waypoints。

圖5：Waypoints

需要注意的是，根據(jù)連接點(diǎn)的形式不同，連接線和圖形之間的連接位置也是會(huì)移動(dòng)的。比如下面這張圖

如果是直線連接線，那么移動(dòng)長(zhǎng)方形的位置，連接線和長(zhǎng)方形之間的連接位置也會(huì)變化（與 Anchored 和 Floating 也有關(guān)），而對(duì)于曲線連接線，拖動(dòng) Waypoints 點(diǎn)，連接線和元素之間的連接位置一般情況下是固定的（居中）。

圖6：Waypoint-Floating-Connectors

關(guān)于連接線，其和連接線的形式（nchored、Floating）、Waypoints、連接線的種類、連接線元素有關(guān)，通過(guò)算法的控制，可以描述出更多的樣式。

如果通過(guò) Waypoints 調(diào)整了連接線，也可以控制菜單清除 Waypoints，從而可以恢復(fù)到調(diào)整之前的樣式。

（7）draw.io 能夠插入或者布局各種圖形、連接、圖片等元素，而且為了快速進(jìn)行畫畫，通過(guò)算法可以調(diào)整各個(gè)元素之間的布局，比如說(shuō)支持 Flow（垂直或者橫向）流、Tree（垂直或者橫向）樹、organic（意會(huì)作用吧）、circle（意會(huì)作用吧），這個(gè)功能對(duì)于快速畫圖或者組織元素非常有用。

這三個(gè)流程圖軟件都需要人為控制，還有一些軟件可以通過(guò)“代碼”自動(dòng)生成圖，可控性和樣式上效果非常好，推薦三個(gè)：

• PlantUML
• Dot 語(yǔ)言，Graphviz 工具內(nèi)置的語(yǔ)言
• Mermaid

yudadanwx