強強聯手！VS Code讓它成為最強流程圖工具

2020 年 5 月 21 日
AI

自從切換到mac之後，我一直在尋找一款趁手的流程圖工具。遇到//draw.io之後，我被這款工具的跨平台，適用場景廣泛所吸引。直到它與vs code強強結合，使得它一舉奠定在我心中最為優秀的流程圖工具。本文就來介紹一款這款讓人讚不絕口的流程圖工具。

前言

之前，我一直時Visio的忠實用戶，雖然桌面版、網頁版流程圖工具比比皆是，但是我還是堅持選擇Visio。

直到切換mac之後，我不得不考慮找一款替代工具，

OmniGraffle
edraw
…

要麼收取高昂的費用、要麼功能捉襟見肘。

無奈之下我開始考慮，是否有一些網頁端的流程圖工具？

其實，我第一時間想到的就是耳熟能詳的ProcessOn。

不得不說，它的確很少用，功能不亞於很多商業桌面應用。

但是，ProcessOn免費文件數量限制和僅能在網頁使用，讓我始終無法堅定的成為它的忠實用戶。

最終，我把目光鎖定在//draw.io這款工具上面，使用一段時間之後的確覺得這是一款堪稱良心的強大工具。

但是，讓我單獨寫一篇文章介紹//draw.io，我覺得它還過於單薄，所以，我一直在試用不同的類似工具，希望能夠整理一個集合然後介紹給大家。

直到近期//draw.io與vs code強強聯合，頓時讓我覺得眼前一亮。我覺得，//draw.io加入vs code使得它頓時與其他同類工具拉開了差距，讓它更加強大、與眾不同。

本文，就來詳細介紹一下這款值得大書特書的流程圖工具吧！

//draw.io

如果問//draw.io最初吸引我的原因是什麼？

其實很簡單，

免登錄
完全免費
跨平台

免登錄

我是一個很懶的人，雖然我很喜歡網頁應用，但是大多數網頁應用讓我腿兒卻步的主要原因之一便是需要登錄。

我記不住數不清的帳號密碼，也不原因反覆輸入帳號密碼，對於工具，我更加傾向於開箱即用。

從這一點，//draw.io與其他網頁端流程圖工具相比，勝出！

完全免費

作為一款輔助工具，我是不會去付費購買流程圖工具的。

雖然ProcessOn已經很好用，但是免費文件數量只有9張，這讓我心裡一直有一個心結。

從這一點，//draw.io與其他網頁端流程圖工具相比，勝出！

跨平台

這是當初吸引我使用//draw.io的3個原因中最為突出的一點。

雖然，網頁端工具很好用，但是，沒有網路怎麼辦？

這也是網頁端應用相對於桌面應用最致命的缺陷之一。

//draw.io在跨平台方面可以說是非常良心，你不僅可以在網頁端使用，還可以下載安裝到Mac和Windonws使用。也就是說，//draw.io不僅可以在線使用，還可以離線使用。

從這一點，//draw.io與其他網頁端流程圖工具相比，勝出！

除此之外，//draw.io還可以在OneDrive、Google Drive、本地磁碟創建流程圖，同時還可以載入來自Dropbox等網盤的流程圖文件。

vs code插件

//draw.io很好用，但是，在此之前它只是我無奈之下選擇的替代品。

但是，隨著//draw.io開源vs code插件之後，它一躍成為我心中最強大的流程圖工具，沒有之一。

vs code應該不必多介紹，近幾年來非常熱門的一款開發工具，在很多開發者急需的功能方面做出很多改變，例如，遠程開發、程式碼調試。

如果說vs code最大的優勢在哪裡，我覺得就是在於它豐富而實用的第三方插件方面。

code runner、local history、Partial Diff、TODO Tree、Better Comments…等眾多優秀的第三方插件使得vs code如虎添翼。

有了這些vs code插件，我們可以在開發過程中聽歌、快速執行程式碼、提升開發效率、書寫文檔。

那麼，是否可以在vs code里畫圖？最好是流程圖！

這是一個大膽的想法。

而，//draw.io使得這個想法成為了現實，填補了這片空白！

//vscode-draw.io插件開源不足兩周，在GitHub已經4.6kstar，並在在vs code也有40k+下載，其火爆程度可見一斑。

的確，//vscode-draw.io插件出現，不僅給這款流程圖工具在適用場景方面進一步拓展，而且還使得原本複雜臃腫的流程圖工具變得更加輕量化、簡單易用。

使用

目前//draw.io支援3中文件後綴，你只需要新建3種後綴之一的文件就可以在vs code中畫流程圖，它們分別是，

*.drawio
*.dio
*.drawio.svg

後續還會支援*.drawio.png，可以直接保存為常規圖片格式，目前尚未發布。

drawio

drawio.svg

svg是一種矢量圖形，基於xml開發，直接用程式碼來描繪影像，可以插入到文本中，例如GitHub README，另外，尺寸更小，且可壓縮性更強。所以，近幾年非常受歡迎。

另外，你可以使用文本編輯器打開drawio文件來編輯xml，這可以更加快速的創建或者編輯流程圖。

Diagrams For Everyone, Everywhere

就如同它的口號一樣，的確做到了2個難得的點，

For Everyone
Everywhere