最適合程式設計師的畫圖工具？

大家好，我是小林。

圖解網站上線以來，一直有很多同學喜歡我畫的圖，然後很多同學就很好奇，我這些技術文章的配圖是用什麼工具畫的。

所以，今天就再囉嗦聊一下， 畫圖這件事。

我的圖解類的文章，可以說圖片是靈魂之處，沒有了圖片，相當於失去了靈魂，技術文章本身就很枯燥，如果文章中沒有幾張圖片，很多人看著看著就被勸退了，剩下沒被勸退的估計看著看著就睡著了。

有時候，一張圖片的資訊，勝過幾千字的解釋。文字的描述都線性的，有時候解釋的地方，可能看著迷糊的同學，都不知道在解釋哪個問題。而畫圖去解釋一個問題，圖片裡包含了很多資訊，就能一目瞭然的知道在說什麼問題。

可能有的讀者會說自己不寫文章呀，是不是沒有必要了解畫圖了？

我覺得這是不對，畫圖在我們工作中其實也是有幫助的。比如，如果你想跟領導彙報一個業務流程的問題，把業務流程畫出來，肯定用圖的方式比用文字的方式交流起來會更有效率，更輕鬆些，我自己常常透過這種方式跟領導反饋問題。

再比如說，如果你參與了一個比較複雜的專案開發，你也可以把程式碼的流程圖給畫出來，不僅能幫助自己加深理解，也能幫助後面參與的同事能更快的接手這個專案，甚至如果你要晉升級別了，演講 PTT 裡的配圖也是必不可少的。

不過很多人都是糾結用什麼畫圖工具，其實小林覺得再爛的畫圖工具，只要你思路清晰，確定自己要表達出什麼資訊，也是能把圖畫好的，所以不必糾結哪款畫圖工具，挑一款自己畫起來舒服的就行了。

畫圖工具

“小林，你說的我都懂，我就是喜歡你的畫圖風格嘛，你就說說你用啥畫的？”

沒問題，直接坦白講，我用了 2 年的畫圖工具是：draw.io。

我的圖解文章裡的圖片全是在 draw.io 這個工具畫的，寫了那麼久的圖解文章，再加上我工作中也有畫圖的習慣，累計也有在上面畫了接近 1000+ 張圖片。

選擇它的原因很簡單，因為是免費的，而且圖片的原始檔可以直接儲存到 Github 的，這樣非常方便，相當於直接雲備份到了 Github 倉庫裡。

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

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

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

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

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

基本圖形介紹

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

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

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

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

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

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

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

比如，我用過這種風格畫過 TCP 三次握手流程的圖。

方塊圖形再加上菱形，就可以組合成簡單程式流程圖了，比如我畫過「寫直達」快取更新模型的流程圖。

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

各種組合畫圖

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

透過一些基本的圖形組合，你還可以畫出時序圖，時序圖可以用來描述多個物件之間的互動流程，比如我畫過多個執行緒獲取互斥鎖的時序圖。

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

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

當然，draw.io 這個畫圖工具，不只有簡單圖形，還有其他自帶的裝置類圖形。通常我都會這些裝置型別的圖示來畫網路圖。

比如，我之前畫過路由器定址的圖片。

你要說，我畫過最複雜的圖，那就是寫 TCP 流量控制的時候，把整個互動過程 + 文字描述 + 滑動視窗狀況都畫出來了，現在回想起來還是覺得累人。

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

圖床

我之前用的圖床是一套免費的圖床，但是踩過坑。

我發現這類免費圖床用著用著就不能用了，然後每次遷移圖片我都花費很多時間去搞，果然免費就是最貴的。

所以，後來我就乾脆自己掏錢搞了個圖床，在雲廠商那買了 OSS 儲存伺服器，然後在加上 CDN 形成自己的圖床。

之前還寫過我遷移圖片的經歷：完了，小林網站的圖片都掛了

思維導圖工具

我用的思維導圖工具是 xmind，是國產的。他們軟體的互動設計做的很不錯，很簡潔明瞭。

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

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

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

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

程式碼貼圖工具

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

地址：

匯出圖片後，就一張漂亮的程式碼展示圖。

最後

這兩年下來，我感覺至少畫了 1000+ 張圖了，每一張圖其實還是挺費時間的，相信畫過圖的朋友後，都能體會到這種感覺了。

但沒辦法，誰叫我是圖解工具人呢，畫圖可以更好的詮釋文章內容，但最重要的是，把你們吸引過來了，這是件讓我非常高興的事情，也是讓我感覺畫圖這個事情值得認真做。

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

最後羅列一下，我常用工具：

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

如果你們知道其他不錯的畫圖工具，歡迎留言說一下。