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

簡單理解流程圖

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

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

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

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

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

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

圖1：泳道圖

圖2：BPMN

關(guān)于流程圖的定義，可以引用下面這段話，個人覺得準(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

我將要介紹的三個軟件都基于 Web，對于一個復(fù)雜軟件來說，是不是 Web 版我覺得不重要，只要軟件好，下載一個電腦版，對我來說也是毫無問題的。

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

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

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

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

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

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

總之，這三個軟件在操作的時候比較簡單，建議大家可以嘗試一下。

三個軟件的比較

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

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

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

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

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

draw.io 是開源軟件，每一張圖對應(yīng)的源文件是 XML 格式，通過 XML 能了解每張圖的數(shù)據(jù)結(jié)構(gòu)。draw.io 也能導(dǎo)出各類圖片（比如 png、jpg、svg）和 PDF，同時也能導(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，這是非常流行的四個流程圖軟件。另外也可以導(dǎo)入數(shù)據(jù)（Data），比如 CSV、Mindmaps、SQL 等各類數(shù)據(jù)。

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

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

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

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

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

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

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

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

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

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

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

draw.io 的一些使用技巧

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

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

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

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

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

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

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

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

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

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

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

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

圖3：Anchored

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

圖4：Floating

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

第一張表格：

第二張表格：

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

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

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

圖5：Waypoints

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

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

圖6：Waypoint-Floating-Connectors

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

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

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

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

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

yudadanwx