20211203100452.jpg
作為一款開源的主流代碼編輯器，VSCode 在發(fā)布之后一直受到不少開發(fā)者的喜愛。
今天給大家推薦一款實用的 VSCode 插件：VSCode Drawio。
聽到這個名字，你應(yīng)該大致就能猜想到，它跟 draw.io 應(yīng)該有不小的淵源。
是的，在不久前，一位來自德國前端工程師 Henning Dieterichs 成功將 draw.io 的功能集成進了 VSCode，并打包成了插件供開發(fā)者下載使用，讓你分分鐘能用 VSCode 畫出完美的流程圖、思維導(dǎo)圖與 UML 圖。
它的具體效果，就像下面這樣：
20211203100724.gif
一些水友可能對 draw.io 這款產(chǎn)品不太了解，這里跟大家簡單介紹下：
draw.io 是一個支持在線繪圖的網(wǎng)站工具，因其界面簡潔直觀，功能豐富強大而受到不少用戶喜愛。
訪問它的網(wǎng)站，你便能看到如下界面：
20211203101403.jpg
由上圖我們清楚可以看到，draw.io 所擁有的功能非常全面，完全能夠輕松勝任我們?nèi)粘５膱D形繪制需求。
不僅如此，draw.io 還支持將圖形保存到 Google Drive、One Drive 等云端硬盤上，讓用戶可以隨時進行同步與讀取。
由于使用這款工具的人數(shù)眾多，開發(fā)者還貼心的對其進行了國際化文案翻譯。因此英文不太好的同學(xué)，也不用過于擔(dān)心。
另外，上面你能看到的所有功能，都是永久免費對外開放，只要你喜歡，隨便用！
如此強悍且實用的工具，怎能缺了 VSCode 的身影呢？
在作者 Henning Dieterichs 的辛苦努力下，VSCode 現(xiàn)已完美集成 drwa.io，用戶只需點點鼠標(biāo)，安裝下插件，便能立即在 VSCode 上體驗 draw.io 的所有核心功能。
這么一款神器，在 GitHub 上發(fā)布短短不到一周的時間，便已成功斬獲 3300+ Star，其受歡迎程度由此可見一斑。
20211203101459.jpg
這款 VSCode 插件跟網(wǎng)站對比起來，有個比較明顯的差異，就是當(dāng)你在繪制和設(shè)計流程圖時，如果某個文字或詞匯需要批量修改，那么你可以直接編程該流程圖的 XML 源文件，進行批量搜索替換。也能在 XML 文件中，直接更改流程圖某個節(jié)點的背景顏色。
具體效果就像下面這樣：
20211203101547.gif
此外，該插件還有一個比較強悍的功能，就是支持對 .drawio.png 文件的修改。
當(dāng)你發(fā)現(xiàn)流程圖的 png 格式文件有誤時，可以隨時對 png 圖片重新進行更改調(diào)整，然后再次生成即可。
在你的 GitHub 項目、技術(shù)文章或演講的 PPT 中，所有需要用到流程圖展示的地方，這項功能會非常有用。
20211203101647.gif
稍微有點遺憾的是，作者稱，當(dāng)前這個功能所調(diào)用的 VSCode API 暫時還不太穩(wěn)定，因此這項新特性還未發(fā)布，需要等下次 VSCode 更新時再一并發(fā)布，大家也可以好好期待下。
最后，給大家遞上該插件的 GitHub 地址，感興趣的同學(xué)可以安裝試用一下：
https://github.com/hediet/vscode-drawio
