最適合程序員的畫圖工具？

大家好，我是魚皮，今天跟大家聊聊畫圖這件事。

畫圖對于我們的工作其實很有幫助。比如，如果你想跟領導匯報一個業(yè)務流程的問題，把業(yè)務流程畫出來，肯定用圖的方式比用文字的方式交流起來會更有效率，更輕松些。

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

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

畫圖工具

它是免費的，而且圖片的源文件可以直接保存到 Github 的，這樣非常方便，相當于直接云備份到了 Github 倉庫里。

draw.io 畫圖工具可以在線畫圖，或者下載應用，或者作為 visual studio code 插件來使用。

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

• https://app.diagrams.net

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

其中，最左邊的「圖形選擇區(qū)域」可以選擇的圖案有很多種，常見的流程圖、時序圖、表格圖都有，甚至還可以在最左下角的「更多圖形」找到其他種類的圖形，比如網絡設備圖標等。

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

基本圖形介紹

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

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

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

這個簡潔的圓角方框圖形，再搭配顏色，能組合成很多結構圖，比如下面這個 CPU Cache 的結構圖。

直角方框圖形，主要是用來組成「表格」，原始自帶的表格不好看，也不方便調。

比如，用直角方框圖形畫出下面這個「不同層級的存儲器之間的成本對比表格」。

如果覺得直直的線條太死板，你可以把圖片屬性中的「Comic」勾上，于是就會變成歪歪扭扭的效果啦，有點像手繪風格，挺多人喜歡這種風格。

比如，可以畫出這種風格的 TCP 三次握手的流程圖：

方塊圖形再加上菱形，就可以組合成簡單程序流程圖了，比如下面這個「寫直達」緩存更新模型的流程圖。

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

各種組合畫圖

基本的圖形介紹完后，相信你畫一些簡單程序流程圖等圖形是沒問題的了，接下來就是各種圖形 + 線條的組合的了。

通過一些基本的圖形組合，你還可以畫出時序圖，時序圖可以用來描述多個對象之間的交互流程，比如這個多個線程獲取互斥鎖的時序圖：

再來，為了更好表達零拷貝技術的過程，那么用圖的方式會更清晰。

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

當然，draw.io 這個畫圖工具，不只有簡單圖形，還有其他自帶的設備類圖形。通常我都會這些設備類型的圖標來畫網絡圖。

比如，畫這個路由器尋址的圖片。

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

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

圖床

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

所以，建議自己掏錢搞個圖床，具體做法可以是在云廠商那買 OSS 存儲服務器，然后在加上 CDN 形成自己的圖床。

思維導圖工具

推薦一個思維導圖工具：xmind，是國產的。軟件的交互設計做的很不錯，很簡潔明了。

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

有意思的地方，這個思維導圖工具的右側會有一些圖標圖片選擇，比如表情圖片、標簽圖片、進度圖圖片等等。

習慣用思維導圖做筆記的同學， xmind 這個思維導圖工具是個不錯的選擇。

另外，也可以使用 Effie 這個工具來生成思維導圖，它本身是一個寫作的工具，但是自帶一個根據文字內容生成思維導圖的功能。

代碼貼圖工具

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

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

導出圖片后，就一張漂亮的代碼展示圖。

最后

畫圖可以更好的詮釋文章內容，文字的分享有局限性，關鍵還是要你自己動手摸索摸索，形成自己一套畫圖的方法論，練習的時候可以先從模仿畫起，后面再結合工作或文章的需求畫出自己心中的那個圖。

最后羅列一下，好用的畫圖相關工具：

• 畫圖工具：draw.io
• 思維導圖工具：xmind
• 代碼貼圖工具：carbon
• 文章編寫工具：typora、語雀

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

歡迎學編程的朋友們加入魚皮的編程知識星球，我會 1 對 1 解決你的問題，并且直播帶大家開發(fā)完整項目（第三期項目進行中）?？梢约游⑿?yupi1085，備注【加入星球】和自己的情況領取優(yōu)惠加入星球，不備注不通過，非誠勿擾謝謝。