小林寫這么多篇圖解文章，你們猜我收到的最多的讀者問題是什么？沒錯，就是問我是使用什么畫圖工具，看來對這一點大家都相當(dāng)好奇，那干脆不如寫一篇介紹下我是怎么畫圖的。

如果我的文章缺少了自己畫的圖片，相當(dāng)于失去了靈魂，技術(shù)文章本身就很枯燥，如果文章中沒有幾張圖片，讀者被勸退的概率飆飆升，剩下沒被勸退的估計看著看著就睡著了。

所以，精美的圖片可以說是必不可少的一部分，不僅在閱讀時能帶來視覺的沖擊，而且圖片相比文字能涵蓋更多的信息，不然怎會有一圖勝千言的說法呢？

這時，可能有的讀者會說自己不寫文章呀，是不是沒有必要了解畫圖了？我覺得這是不對，畫圖在我們工作中其實也是有幫助的，比如如果你想跟領(lǐng)導(dǎo)匯報一個業(yè)務(wù)流程的問題，把業(yè)務(wù)流程畫出來，肯定用圖的方式比用文字的方式交流起來會更有效率，更輕松些。

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

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

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

咳咳，沒問題，直接坦白講，我用的是一個在線的畫圖網(wǎng)址，地址是：

• https://draw.io

用它的原因是使用方便和簡單，當(dāng)然最重要的是它完全免費，沒有什么限制，甚至還能直接把圖片保存到 GoogleDrive 、 OneDrive 和 Github，我就是保存到 Github，然后用 Github 作為我的圖床。

既然要認(rèn)識它，那就先來看看它長什么樣子，它主要分為三個區(qū)域，從左往右的順序是「圖形選擇區(qū)域、繪圖區(qū)域、屬性設(shè)置區(qū)域」。

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

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

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

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

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

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

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

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

方塊圖形再加上菱形，就可以組合成簡單程序流程圖了，比如我畫過存儲器緩存流程圖。

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

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

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

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

前面也提到，圖形不只是簡單圖形，還有其他自帶的設(shè)備類圖形，比如我用網(wǎng)絡(luò)設(shè)備圖畫過單播、廣播、多播通信的區(qū)別圖。

你要問，我畫過最復(fù)雜的圖，那就是寫 TCP 流量控制的時候，我把整個交互過程 + 文字描述 + 滑動窗口狀況都畫出來了，現(xiàn)在回想起來還是覺得累人。

還有好多好多，我就不一一列舉，這半年下來，小林至少畫了 500+ 張圖了，每一張圖其實還是挺費時間的，相信畫過圖的朋友后，都能體會到這種感覺了。

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

另外，細心的讀者也發(fā)現(xiàn)了，小林貼代碼的時候，使用的是圖片的形式，原因是代碼通常都是比較長，在手機看文章用圖片的呈現(xiàn)的方式會更舒服清晰。

在這里也推薦下這個代碼截圖網(wǎng)址：

• https://carbon.now.sh/

網(wǎng)站頁面如下圖，代碼顯示的效果是不是很美觀？

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

完，

寫于 2020-10-21 晚