技術(shù)人員一般需要具備一定得畫(huà)圖能力，特別是架構(gòu)師，需要畫(huà)各種圖：除了讓架構(gòu)更清晰，方便給別人講解，也是裝逼神器~

畫(huà)圖工具有很多，今天推薦的是一款 VSCode 插件！沒(méi)錯(cuò)，在 VSCode 中畫(huà)圖。它就是 vscode-drawio，即將 draw.io 集成進(jìn) VSCode 中。

項(xiàng)目地址：https://github.com/hediet/vscode-drawio，截止目前 Star 數(shù)：4.3k+，下載安裝量 33k+。

從一個(gè) Demo 開(kāi)始

通過(guò)簡(jiǎn)單瀏覽動(dòng)圖發(fā)現(xiàn)真的挺強(qiáng)大。

安裝

打開(kāi) VSCode，點(diǎn)擊最左側(cè)底部的 Extensions，搜索 draw.io，找到其中的 Draw.io Integration：

跟安裝其他擴(kuò)展沒(méi)什么區(qū)別。建議安裝完后重啟下 VSCode。

簡(jiǎn)單使用

創(chuàng)建一個(gè)文件：test.drawio，打開(kāi)后，自動(dòng)是如下界面：

之后你就可以跟很多其他畫(huà)圖工具一樣，拖拽畫(huà)圖了。

說(shuō)明一下：目前該擴(kuò)展不支持導(dǎo)出，不過(guò)很快會(huì)支持可以編輯 png 格式。有人提 issue 希望支持導(dǎo)出，作者的意思因?yàn)轳R上支持 png，因此不需要導(dǎo)出。具體可以看 issue39。