在寫《深入淺出 HTTPS：從原理到實戰(zhàn)》這本書的時候（月底能出版了），畫了不少流程圖劫乱，在此期間主要使用了三款 Web 流程圖軟件（draw.io、processon.com办陷、lucidchart.com）析孽，這篇文章主要分享使用過程中的一些體會。
簡單理解流程圖
從技術領域踊挠，有很多類型的圖，對于我來說冲杀，主要關心下面三種類型：
- 流程圖效床，把一個流程或者一件事情講清楚。
- UML权谁，在分析剩檀、設計、開發(fā)的時候旺芽，進行業(yè)務抽象沪猴。
- Mind 思維導圖，用于整理思路采章，或者做筆記运嗜。
這篇文章主要講解流程圖，流程圖可能是使用最廣泛的一種圖了悯舟，在各個領域都會用到担租，所以稱呼非常多，比如系統(tǒng)流程圖抵怎、數(shù)據(jù)流程圖奋救、產(chǎn)品流程圖。對于我來說反惕，如果沒有特別的目的尝艘，沒有必要糾結于流程圖的類型。
從本質(zhì)上看姿染，流程圖就是由為數(shù)不多的元素（圖形和圖標）組成背亥，元素之間有特定的作用和關系，嚴格意義上來講盔粹，流程圖也是有規(guī)則的隘梨，不應該混淆使用各種元素，關于流程圖元素的定義舷嗡，可以參考 Flowchart Symbols and Notation 這篇文章轴猎。
當然對我來說，使用流程圖軟件將業(yè)務過程描述清楚更關鍵进萄，所以如果元素類型使用錯誤關系也不大捻脖。在流程圖中锐峭，其實還有兩種流程圖比較重要，分別是泳道圖和 BPMN可婶，這也是我后續(xù)想重點學習的沿癞。
為加深印象，可以通過下面兩張圖了解泳道圖和 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 版代表好用达皿、易用天吓、夠用。好用表示這三個軟件能夠畫出一張流程圖峦椰，不管是工作還是學習龄寞，最終生成的流程圖是有用的，是能夠解決問題的们何。
易用是最重要的一個特性萄焦，說實話，微軟的很多產(chǎn)品（比如 Word冤竹、Visio）功能非常多拂封，如果能夠真正掌握它，那說明多了一個立身的技能鹦蠕，很多崗位需要專業(yè)的辦公化人才冒签。正因為功能多，所以市面上才會出現(xiàn)很多相關的書籍钟病，也可見這些軟件確實是難學的绵患。對于我來說或悲，以 Visio 為例今阳，工作這么舊了街佑，一直學不會這門軟件，原因在哪兒呢屹徘？一方面確實缺乏使用技巧走趋，另外就是缺乏美感，畫不出好看的流程圖軟件噪伊，我特別羨慕那些會畫流程圖的人簿煌。
但是這三款軟件至少在學習成本上不用耗費太久的時間氮唯，簡簡單單經(jīng)過拖拽，就能夠畫出一張流程圖姨伟，簡單的說來就是使用的時候不會遇到很多的挫折惩琉。
夠用的意思是什么呢？對于一個非專業(yè)人員來說夺荒，流程圖可能僅僅是為了描述一個流程瞒渠，或者呈現(xiàn)業(yè)務邏輯，沒有必要花很多的時間去雕琢它技扼，也就是說在孝，如果你使用 Visio 畫流程圖，可能 90% 的功能也不會遇到淮摔，那么我們是否可以將這 10% 的常用功能獨立出來，然后給用戶使用呢始赎？這三個軟件的設計初衷也許就基于此和橙，夠用就行，如果你想畫出更專業(yè)的流程圖軟件造垛，那么你可以使用其他的軟件魔招。
那么這些軟件為什么好用呢，說實話五辽，我無法描述出办斑，只是在內(nèi)心深處感覺這些軟件通人性，幫你考慮了很多問題杆逗，讓你畫流程圖的時候更順暢乡翅。
舉幾個例子，畫流程圖就是連接各個圖形罪郊，這三個軟件在連接圖形方面做的都非常好蠕蚜，可操作性非常好。另外在圖形的排列和分布控制上也足夠簡單悔橄，拖動一個圖形的時候靶累，會告訴你其和相鄰圖形之間的關系。
總之癣疟，這三個軟件在操作的時候比較簡單挣柬，建議大家可以嘗試一下。
三個軟件的比較
首先說明 processon.com 完全模仿 lucidchart.com睛挚，甚至連界面也差不多邪蛔，但這不是重點，processon.com 進一步弱化了功能竞川，廢除了一些 lucidchart.com 擁有的功能店溢，但我覺得這反而更實用叁熔，所以我覺得這是一款非常不錯的軟件。在寫《深入淺出 HTTPS：從原理到實戰(zhàn)》這本書的時候床牧，所有的圖片全部由 processon.com 完成荣回，當然如果時間足夠的話，我最終會使用 draw.io戈咳，這也基本反映了我的選擇心软。
- 如果不是十分重要的流程圖，建議使用 processon.com著蛙。
- 如果希望流程圖比較完整删铃、專業(yè)、可控性較強踏堡，建議選擇 draw.io猎唁，尤其它是完全免費的。
- 不建議使用 lucidchart.com顷蟆，主要原因是它收費诫隅。但如果想學習畫圖軟件的知識，那么它的文檔非常棒帐偎。
接下去簡單描述下這三款軟件的一些特點逐纬，以此加深對他們的理解。
（1）lucidchart.com 的箭頭類型可供選擇的非常少削樊，只有三種豁生，processon.com 雖然較多，但是相比 draw.io 來說不夠精細漫贞，這一點上 draw.io 可以說是完勝甸箱。
（2）文件格式，processon.com 能夠?qū)С鰹楦黝悎D片（比如 png迅脐、svg）和 PDF摇肌，基本滿足大部分需求了。也可以導入導出 .pos 文件仪际，這是 processon.com 內(nèi)部的一種文件格式围小，對于其他畫圖軟件來說沒有通用性。
draw.io 是開源軟件树碱，每一張圖對應的源文件是 XML 格式肯适，通過 XML 能了解每張圖的數(shù)據(jù)結構。draw.io 也能導出各類圖片（比如 png成榜、jpg框舔、svg）和 PDF，同時也能導出 HTML 格式和 VSDX格式（Microsoft Visio 圖形格式）。
lucidchart.com 在導入導出上功能最強大刘绣，這也是它的賣點之一樱溉。和 draw.io 相比，還能導出為 CSV 格式（很奇怪纬凤，CSV 現(xiàn)在很通用嗎福贞？）；在導入上停士，它分為兩種方式挖帘。可以導入圖形（Diagram）恋技，比如 Visio拇舀、Omnigraffle、Gliffy蜻底、Draw.io骄崩，這是非常流行的四個流程圖軟件。另外也可以導入數(shù)據(jù)（Data）薄辅，比如 CSV刁赖、Mindmaps、SQL 等各類數(shù)據(jù)长搀。
draw.io 也能嵌入到其他的應用程序中，比如以圖片鸡典、HTML源请、IFrame、Google Docs 插件的方式供其他軟件使用彻况。lucidchart.com 在這方面做的最不好谁尸，基本上是一個封閉的系統(tǒng)。processon.com 考慮到用戶的實際使用需求纽甘，在分享方面做的不錯良蛮，支持在線圖片的瀏覽、在線文件瀏覽（有 processon.com 操作按鈕）悍赢，也支持 IFrame 嵌入方式决瞳。
（3）是否收費，draw.io 是完全免費的軟件左权；雖然 processon.com 是收費的（圖數(shù)量有上限）皮胡，但可以通過各類方法（比如推薦別人注冊）增加數(shù)量上限。如果還是超出了數(shù)量限制赏迟，還可以將原來畫的圖導出為 pos 格式屡贺，然后刪除在線文件，并將 pos 文件保存到本地，以后想使用的時候再導入甩栈。
lucidchart.com 在免費策略上非承合桑苛刻，所以如果你想要使用它量没，那不得不付費玉转。
（4）關于圖形粗細，一幅圖是由一個個圖形和連接線構成的允蜈，圖形和連接線的顏色和粗細對于呈現(xiàn)非常重要冤吨，在這方面，processon.com 是最讓人不滿意的饶套，它最細的尺寸是 1 px漩蟆，顯得不夠精細，在顏色方面選擇的黑色在視覺上感覺是灰色的妓蛮，線條非常發(fā)虛怠李。draw.io 最細的尺寸也是 1px，但顏色還是比較正的蛤克。lucidchart.com 在這方面做的最好捺癞，最細尺寸是 0.5 px，顯得有質(zhì)感构挤。
如果 processon.com 能在這方面做的更好一點髓介，對于我來說，可以作為長期使用的一個流程圖軟件（可以忍受其他某些功能的缺失）筋现。
（5）只有 draw.io 有獨立的直線（line）圖形唐础，其他兩個軟件都沒有，但是他們可以基于箭頭圖形（比如兩端的箭頭設置為 None）生成直線矾飞，但是在效果上差了一些一膨。
這三款軟件在連接各個圖形方面做的都不錯，但是如果想獨立畫一些圖形洒沦，那么必須首推 draw.io豹绪，畫圖控制方面做的最好。
（6）云端保存申眼，lucidchart.com 和 processon.com 都是實時將文件保持在云端瞒津，對于用戶來說，一般不會丟失更新操作括尸。而對于 draw.io 來說仲智，它是一款免費的軟件，它沒有云端存儲的概念姻氨，那么文件（XML）保存在哪兒呢钓辆？它結合了一些云端網(wǎng)盤的功能，比如可以連接 Google Drive、OneDrive前联、Dropbox功戚，利用這些軟件的存儲特性和實時保存功能。這是非常好的一種策略似嗤，但是我個人不是很喜歡啸臀，為了保存軟件，必須手動點擊保存按鈕（生成一個本地 XML 文件）烁落，以免丟失文件操作乘粒。
（7）關于畫布，processon.com 畫布配置是最簡單的伤塌，可以是 A3灯萍、A4、A5 大小每聪，背景顏色和內(nèi)邊距可以設置旦棉，為了更好的控制流程圖，也可以縮放畫布药薯。draw.io 畫布設置和 processon.com 差不多绑洛，而 lucidchart.com 控制力度最大，對于這三種軟件來說童本，最終下載的圖片大小都是由畫布上所有圖形范圍決定的真屯。
（8）能夠畫那些圖？這三款軟件可以畫很多類型的圖穷娱，除了可以畫基本的流程圖绑蔫；在軟件領域可以畫 UML、ER鄙煤、UI Mockups（可以理解為原型圖）、Site Maps茶袒；在商業(yè)領域可以畫 Data Flow梯刚、BPMN；當然也支持其他類型的圖薪寓，不過在我看來亡资，其實挺雞肋的。
其實萬變不離其中向叉，不管什么類型的圖锥腻，最后都是由一些元素組合而成的，至于“哪一種類型圖”其實是對元素組合的一種分類母谎，沒有本質(zhì)的區(qū)別瘦黑，除了 processon.com，其他兩個軟件都可以導入自定義的圖形和圖標，從而體現(xiàn)可擴展性幸斥。
draw.io 的一些使用技巧
接下去跟隨 draw.io 的官方手冊匹摇，描述其一些特點。
（1）對于每一個元素來說（圖形和圖標）甲葬，共有三種控制操作廊勃，分別是“樣式”、“文本”经窖、“圖形調(diào)整”坡垫，
從“樣式”的角度看，比較有特點的是画侣，圖形可以有多種效果冰悠，比如長方形可以支持“圓角”、“陰影”棉钧、“玻璃效果”屿脐、“手繪”等效果。
線條是非常重要的一個元素宪卿，在“樣式”中可設置的空間非常大的诵，線條有三種線型，分別是“圓角”佑钾，“尖角”西疤，“曲線”，每一個線條可以設置寬度休溶，線頭的兩端可以設置箭頭的樣式代赁，設置可以調(diào)整箭頭的大小。同時線條一般是連接其他的圖形兽掰，可以微調(diào)線條和圖形之間的間距芭碍，可見線條的設置非常多。另外 Waypoints 的配置非常的豐富孽尽，關于什么是 Waypoints 后面再說窖壕，簡單的說，就是連接圖形之間的線條可以有多種方式杉女。
需要注意的是“樣式”設置是全局保存的瞻讽，你如果對第一個圖形進行“樣式“設置，那么加入一個新的圖形熏挎，這個圖形的設置是復用上一個圖形“樣式”的速勇。
如果你覺得一個圖形的“樣式”比較好，可以對“樣式”進行復制和粘帖坎拐，
對于“文本”設置來說烦磁，一般情況下會在圖形元素中輸入文字养匈，這個設置就是用于控制文字的，比如文字大小个初、字體（微軟雅黑是 Mircrosoft Yahei）乖寒、文字位置。
對于“圖形調(diào)整”來說院溺，就是控制元素的大小楣嘁，以及在畫布中的位置，同時元素也可以翻轉角度珍逸。
（2）按住一個圖形逐虚，將會出現(xiàn)一個十字架和四個藍色箭頭（固定連接點，fixed connection points）谆膳，使用固定連接點可以控制鏈接器（connector叭爱，連接圖形之間的線條），ctrl+點擊固定連接點=復制一個元素漱病；shift+點擊固定連接點=生成一個線條买雾；ctrl+拖拽固定連接點=復制一個元素并連接兩個元素。
在四個藍色箭頭周圍移動鼠標杨帽，將看到更多的綠色圓形漓穿，這些長方形可以連接其他的元素，選中綠色圓形注盈，拖動鼠標可以生成一條線晃危，可以用于精準的控制連接線（Connectors）的位置。連接線有個特點老客，就是會隨著元素移動而移動僚饭，始終依附在元素四周。
（3）元素也可以調(diào)整（Altering Shapes）胧砰，比如說可以翻轉元素（Rotating Shapes）鳍鸵，也可以調(diào)整大小，當選中一個元素（主要是圖形）后尉间，在元素四周會出現(xiàn)多個藍色 dots偿乖，拖動其中某一個 藍色 dots，就可以改變元素的大小乌妒，如果選等比例改變元素大小汹想，可以選擇 shift 鍵拖動或者拖動元素四個正角方向的 dots 點外邓。
（5）關于連接線（Connectors）進一步描述撤蚊，連接線實際上就是線條，連接線有兩種方式损话，Anchored 表示隨著圖形的移動侦啸，連接點永遠在原來的位置槽唾，通過下圖可以清晰的了解含義。
而 Floating 表示隨著圖形的移動光涂，連接點會調(diào)整連接點的位置庞萍，通過下圖可以清晰的了解含義。
至于如何控制是 Anchored 連接還是 Floating 連接忘闻，可以參考下面兩張表格钝计。
第一張表格：
| 連接兩個已存在的圖形 | 開始連接點 | 結束連接點 |
|---|---|---|
| 拖動元素四周的連接點（Drag to edge connection point） | Anchored | Floating |
| Drag to centre（沒有測試成功） | Anchored | Anchored |
第二張表格：
| 產(chǎn)生新的元素和連接點 | 開始連接點 | 結束連接點 |
|---|---|---|
| Clinking arrow symbol to copy | Floating | Floating |
| Use copy on connect | Anchored | Floating |
（6）Waypoints 就是可以以多種方式調(diào)整連接點，在復雜的圖中齐佳，它是非常重要的概念私恬，用處非常多，可以避免干擾元素之間的連接炼吴。
連接點有多種不同形式本鸣，比如 Straight（直線）、Orghogonal（正交）硅蹦、Simple荣德、Lsometric（等尺寸）、Curved童芹、Entity Relation涮瞻。通過 Waypoints，連接線的形式會非常豐富辐脖。
不同類型的連接點上有多個 Waypoints（直線的連接點沒有 Waypoints）饲宛，通過拖動 Waypoints，可以進一步調(diào)整連接點的形式嗜价，比如下圖中艇抠，藍色的圓形小點就是 Waypoints。
需要注意的是久锥，根據(jù)連接點的形式不同家淤，連接線和圖形之間的連接位置也是會移動的。比如下面這張圖
如果是直線連接線瑟由，那么移動長方形的位置絮重，連接線和長方形之間的連接位置也會變化（與 Anchored 和 Floating 也有關），而對于曲線連接線歹苦，拖動 Waypoints 點青伤，連接線和元素之間的連接位置一般情況下是固定的（居中）。
關于連接線殴瘦，其和連接線的形式（nchored狠角、Floating）、Waypoints蚪腋、連接線的種類丰歌、連接線元素有關姨蟋，通過算法的控制，可以描述出更多的樣式立帖。
如果通過 Waypoints 調(diào)整了連接線眼溶，也可以控制菜單清除 Waypoints，從而可以恢復到調(diào)整之前的樣式晓勇。
（7）draw.io 能夠插入或者布局各種圖形堂飞、連接、圖片等元素绑咱，而且為了快速進行畫畫酝静，通過算法可以調(diào)整各個元素之間的布局，比如說支持 Flow（垂直或者橫向）流羡玛、Tree（垂直或者橫向）樹别智、organic（意會作用吧）、circle（意會作用吧）稼稿，這個功能對于快速畫圖或者組織元素非常有用薄榛。
這三個流程圖軟件都需要人為控制，還有一些軟件可以通過“代碼”自動生成圖让歼，可控性和樣式上效果非常好敞恋，推薦三個：
- PlantUML
- Dot 語言，Graphviz 工具內(nèi)置的語言
- Mermaid
