最適合程序員的畫(huà)圖工具？

大家好，我是魚(yú)皮，今天跟大家聊聊畫(huà)圖這件事。

畫(huà)圖對(duì)于我們的工作其實(shí)很有幫助。比如，如果你想跟領(lǐng)導(dǎo)匯報(bào)一個(gè)業(yè)務(wù)流程的問(wèn)題，把業(yè)務(wù)流程畫(huà)出來(lái)，肯定用圖的方式比用文字的方式交流起來(lái)會(huì)更有效率，更輕松些。

再比如說(shuō)，如果你參與了一個(gè)比較復(fù)雜的項(xiàng)目開(kāi)發(fā)，你也可以把代碼的流程圖給畫(huà)出來(lái)，不僅能幫助自己加深理解，也能幫助后面參與的同事能更快地接手這個(gè)項(xiàng)目，甚至如果你要晉升級(jí)別了，演講 PTT 里的配圖也是必不可少的。

很多人都是糾結(jié)用什么畫(huà)圖工具，今天給大家分享一個(gè)非常好用的畫(huà)圖工具：draw.io。

畫(huà)圖工具

它是免費(fèi)的，而且圖片的源文件可以直接保存到 Github 的，這樣非常方便，相當(dāng)于直接云備份到了 Github 倉(cāng)庫(kù)里。

draw.io 畫(huà)圖工具可以在線(xiàn)畫(huà)圖，或者下載應(yīng)用，或者作為 visual studio code 插件來(lái)使用。

比較常用的方式是在線(xiàn)畫(huà)圖，就是直接在網(wǎng)站上畫(huà)圖。draw.io 一開(kāi)始的畫(huà)圖網(wǎng)站地址就是直接在瀏覽器輸入 draw.io  地址后，就會(huì)自動(dòng)進(jìn)入在線(xiàn)畫(huà)圖工具頁(yè)面，現(xiàn)在它改版了， 改成重定向到官網(wǎng)地址了，所以現(xiàn)在想進(jìn)入在線(xiàn)畫(huà)圖工具頁(yè)面，地址是：

• https://app.diagrams.net

我們來(lái)看看這個(gè)畫(huà)圖工具的頁(yè)面長(zhǎng)什么樣子，主要分為三個(gè)區(qū)域，從左往右的順序是「圖形選擇區(qū)域、繪圖區(qū)域、屬性設(shè)置區(qū)域」。

其中，最左邊的「圖形選擇區(qū)域」可以選擇的圖案有很多種，常見(jiàn)的流程圖、時(shí)序圖、表格圖都有，甚至還可以在最左下角的「更多圖形」找到其他種類(lèi)的圖形，比如網(wǎng)絡(luò)設(shè)備圖標(biāo)等。

再來(lái)，最右邊「屬性設(shè)置區(qū)域」可以設(shè)置文字的大小，圖片顏色、線(xiàn)條形狀等，而我最常用顏色板塊是下面這三種，都是比較淺色的，這樣看起來(lái)舒服些。

基本圖形介紹

常用的一個(gè)圖形是圓角方塊圖，它的位置如下圖：

但是它默認(rèn)的顏色過(guò)于深色，如果要在方框圖中描述文字，則可能看不清楚，這時(shí)可以在最右側(cè)的「屬性設(shè)置區(qū)域」把方塊顏色設(shè)置成淺色系列的。另外，還有一點(diǎn)需要注意的是，默認(rèn)的字體大小比較小，一般調(diào)成 16px 大小會(huì)比較好。

如果你不喜歡上圖的帶有「劃痕」的圓角方塊圖形，可以選擇下圖中這個(gè)最簡(jiǎn)潔的圓角方框圖形。

這個(gè)簡(jiǎn)潔的圓角方框圖形，再搭配顏色，能組合成很多結(jié)構(gòu)圖，比如下面這個(gè) CPU Cache 的結(jié)構(gòu)圖。

直角方框圖形，主要是用來(lái)組成「表格」，原始自帶的表格不好看，也不方便調(diào)。

比如，用直角方框圖形畫(huà)出下面這個(gè)「不同層級(jí)的存儲(chǔ)器之間的成本對(duì)比表格」。

如果覺(jué)得直直的線(xiàn)條太死板，你可以把圖片屬性中的「Comic」勾上，于是就會(huì)變成歪歪扭扭的效果啦，有點(diǎn)像手繪風(fēng)格，挺多人喜歡這種風(fēng)格。

比如，可以畫(huà)出這種風(fēng)格的 TCP 三次握手的流程圖：

方塊圖形再加上菱形，就可以組合成簡(jiǎn)單程序流程圖了，比如下面這個(gè)「寫(xiě)直達(dá)」緩存更新模型的流程圖。

所以，不要小看這些基本圖形，只要構(gòu)思清晰，再基本的圖形，也是能構(gòu)成層次分明并且好看的圖。

各種組合畫(huà)圖

基本的圖形介紹完后，相信你畫(huà)一些簡(jiǎn)單程序流程圖等圖形是沒(méi)問(wèn)題的了，接下來(lái)就是各種圖形 + 線(xiàn)條的組合的了。

通過(guò)一些基本的圖形組合，你還可以畫(huà)出時(shí)序圖，時(shí)序圖可以用來(lái)描述多個(gè)對(duì)象之間的交互流程，比如這個(gè)多個(gè)線(xiàn)程獲取互斥鎖的時(shí)序圖：

再來(lái)，為了更好表達(dá)零拷貝技術(shù)的過(guò)程，那么用圖的方式會(huì)更清晰。

也可以，只用一張圖就描述 MySQL 執(zhí)行一條 SQL 查詢(xún)語(yǔ)句的流程。

當(dāng)然，draw.io 這個(gè)畫(huà)圖工具，不只有簡(jiǎn)單圖形，還有其他自帶的設(shè)備類(lèi)圖形。通常我都會(huì)這些設(shè)備類(lèi)型的圖標(biāo)來(lái)畫(huà)網(wǎng)絡(luò)圖。

比如，畫(huà)這個(gè)路由器尋址的圖片。

 再比如下面這個(gè)演示 TCP 流量控制的圖：

還有好多好多，我就比一一列舉了。

圖床

市面上有很多免費(fèi)的圖床，但是這類(lèi)免費(fèi)圖床用著用著就不能用了，然后每次遷移圖片都會(huì)花費(fèi)很多時(shí)間去搞，果然免費(fèi)就是最貴的。

所以，建議自己掏錢(qián)搞個(gè)圖床，具體做法可以是在云廠商那買(mǎi) OSS 存儲(chǔ)服務(wù)器，然后在加上 CDN 形成自己的圖床。

思維導(dǎo)圖工具

推薦一個(gè)思維導(dǎo)圖工具：xmind，是國(guó)產(chǎn)的。軟件的交互設(shè)計(jì)做的很不錯(cuò)，很簡(jiǎn)潔明了。

它有很多種風(fēng)格選擇，基本都是五彩的，整體挺好看的。

有意思的地方，這個(gè)思維導(dǎo)圖工具的右側(cè)會(huì)有一些圖標(biāo)圖片選擇，比如表情圖片、標(biāo)簽圖片、進(jìn)度圖圖片等等。

習(xí)慣用思維導(dǎo)圖做筆記的同學(xué)， xmind 這個(gè)思維導(dǎo)圖工具是個(gè)不錯(cuò)的選擇。

另外，也可以使用 Effie 這個(gè)工具來(lái)生成思維導(dǎo)圖，它本身是一個(gè)寫(xiě)作的工具，但是自帶一個(gè)根據(jù)文字內(nèi)容生成思維導(dǎo)圖的功能。

代碼貼圖工具

如果你想展示你的代碼，又苦于源代碼的樣式不好看，則可以使用一個(gè)生成漂亮的代碼貼圖網(wǎng)站。

地址：https://carbon.now.sh

導(dǎo)出圖片后，就一張漂亮的代碼展示圖。

最后

畫(huà)圖可以更好的詮釋文章內(nèi)容，文字的分享有局限性，關(guān)鍵還是要你自己動(dòng)手摸索摸索，形成自己一套畫(huà)圖的方法論，練習(xí)的時(shí)候可以先從模仿畫(huà)起，后面再結(jié)合工作或文章的需求畫(huà)出自己心中的那個(gè)圖。

最后羅列一下，好用的畫(huà)圖相關(guān)工具：

• 畫(huà)圖工具：draw.io
• 思維導(dǎo)圖工具：xmind
• 代碼貼圖工具：carbon
• 文章編寫(xiě)工具：typora、語(yǔ)雀

小伙伴還知道哪些不錯(cuò)的畫(huà)圖工具？歡迎在評(píng)論區(qū)留言~

歡迎學(xué)編程的朋友們加入魚(yú)皮的編程知識(shí)星球，我會(huì) 1 對(duì) 1 解決你的問(wèn)題，并且直播帶大家開(kāi)發(fā)完整項(xiàng)目（第三期項(xiàng)目進(jìn)行中）?？梢约游⑿?yupi1085，備注【加入星球】和自己的情況領(lǐng)取優(yōu)惠加入星球，不備注不通過(guò)，非誠(chéng)勿擾謝謝。