大家好，我是小林。
最近很多讀者私信問我，我圖解文章中用到的畫圖工具、思維導(dǎo)圖工具、代碼貼圖工具是什么？
我在很早的時(shí)候提到過，不過時(shí)間有點(diǎn)久了，而且比較零散，可能現(xiàn)在大部分讀者還不知道。
我今天統(tǒng)一整理一下，我圖解文章用到的各類工具吧，這些工具我用了一年多了，沒發(fā)現(xiàn)什么問題，所以是值得推薦的。
我在這里先列一下：
畫圖工具：draw.io
思維導(dǎo)圖工具：xmind/effie
代碼貼圖工具：carbon
文章編寫工具：有道云筆記/typora/effie
接下來，詳細(xì)聊一聊。
畫圖工具
這篇文章的封面圖就是 draw.io 的開發(fā)團(tuán)隊(duì)。
我的圖解文章里的圖片全是在 draw.io 這個(gè)工具畫的，寫了那么久的圖解文章，再加上我工作中也有畫圖的習(xí)慣，累計(jì)也有在上面畫了接近 1000+ 張圖片。
選擇它的原因很簡單，因?yàn)槭敲赓M(fèi)的，而且圖片的源文件可以直接保存到 Github 的，這樣非常方便，相當(dāng)于直接將云備份到了 Github 倉庫里，然后用 Github 作為圖床。
這一套操作下來，不管是畫圖工具，還是圖床，都是不花一分錢的方案！
draw.io 畫圖工具可以在線畫圖，或者下載應(yīng)用，或者作為 visual studio code 插件來使用。
我比較常用的方式是在線畫圖，就是直接在網(wǎng)站上畫圖。draw.io 一開始的畫圖網(wǎng)站地址就是直接在瀏覽器輸入 draw.io 地址后，就會(huì)自動(dòng)進(jìn)入在線畫圖工具頁面，現(xiàn)在它改版了， 改成重定向到官網(wǎng)地址了，所以現(xiàn)在想進(jìn)入在線畫圖工具頁面，地址是：
https://app.diagrams.net
當(dāng)然，如果你想下載應(yīng)用來使用，也可以在 Github 下載：
https://github.com/jgraph/drawio-desktop/releases/
我們來看看這個(gè)畫圖工具的頁面長什么樣子，主要分為三個(gè)區(qū)域，從左往右的順序是「圖形選擇區(qū)域、繪圖區(qū)域、屬性設(shè)置區(qū)域」。
慌了，CTO叫我推薦幾款優(yōu)秀的程序員一定要知道的畫圖工具
2021-12-08 16:04·IT互聯(lián)網(wǎng)新資訊
大家好，我是小林。
最近很多讀者私信問我，我圖解文章中用到的畫圖工具、思維導(dǎo)圖工具、代碼貼圖工具是什么？
我在很早的時(shí)候提到過，不過時(shí)間有點(diǎn)久了，而且比較零散，可能現(xiàn)在大部分讀者還不知道。
我今天統(tǒng)一整理一下，我圖解文章用到的各類工具吧，這些工具我用了一年多了，沒發(fā)現(xiàn)什么問題，所以是值得推薦的。
我在這里先列一下：
畫圖工具：draw.io
思維導(dǎo)圖工具：xmind/effie
代碼貼圖工具：carbon
文章編寫工具：有道云筆記/typora/effie
接下來，詳細(xì)聊一聊。
畫圖工具
這篇文章的封面圖就是 draw.io 的開發(fā)團(tuán)隊(duì)。
我的圖解文章里的圖片全是在 draw.io 這個(gè)工具畫的，寫了那么久的圖解文章，再加上我工作中也有畫圖的習(xí)慣，累計(jì)也有在上面畫了接近 1000+ 張圖片。
選擇它的原因很簡單，因?yàn)槭敲赓M(fèi)的，而且圖片的源文件可以直接保存到 Github 的，這樣非常方便，相當(dāng)于直接將云備份到了 Github 倉庫里，然后用 Github 作為圖床。
這一套操作下來，不管是畫圖工具，還是圖床，都是不花一分錢的方案！
draw.io 畫圖工具可以在線畫圖，或者下載應(yīng)用，或者作為 visual studio code 插件來使用。
我比較常用的方式是在線畫圖，就是直接在網(wǎng)站上畫圖。draw.io 一開始的畫圖網(wǎng)站地址就是直接在瀏覽器輸入 draw.io 地址后，就會(huì)自動(dòng)進(jìn)入在線畫圖工具頁面，現(xiàn)在它改版了， 改成重定向到官網(wǎng)地址了，所以現(xiàn)在想進(jìn)入在線畫圖工具頁面，地址是：
https://app.diagrams.net
當(dāng)然，如果你想下載應(yīng)用來使用，也可以在 Github 下載：
https://github.com/jgraph/drawio-desktop/releases/
我們來看看這個(gè)畫圖工具的頁面長什么樣子，主要分為三個(gè)區(qū)域，從左往右的順序是「圖形選擇區(qū)域、繪圖區(qū)域、屬性設(shè)置區(qū)域」。
其中，最左邊的「圖形選擇區(qū)域」可以選擇的圖案有很多種，常見的流程圖、時(shí)序圖、表格圖都有，甚至還可以在最左下角的「更多圖形」找到其他種類的圖形，比如網(wǎng)絡(luò)設(shè)備圖標(biāo)等。
具體的畫圖方法，我在之前的文章詳細(xì)介紹過，這次我就不再贅述啦。
之前沒有詳細(xì)介紹，怎么將文件保存到 Github，然后作為圖床使用，這次補(bǔ)充下。
1、在瀏覽器輸入地址：
https://app.diagrams.net
進(jìn)入到在線畫圖網(wǎng)站后，就會(huì)彈出保存文件到什么地方的選擇，可以保存到本地、Github、OneDrive等。
2、選擇保存到 Github 然后，就選擇創(chuàng)建一個(gè)新的畫圖文件。
3、選擇創(chuàng)建一個(gè)空白的圖片，然后可以給文件取個(gè)名字，畫圖的源文件后綴是 .drawio，最后點(diǎn)擊創(chuàng)建。
4、點(diǎn)擊創(chuàng)建后，就會(huì)彈出獲取你的信息 Github 賬號權(quán)限，點(diǎn)擊同意就行。
5、接著輸入你的名字 Github 賬號密碼。
6、接著，點(diǎn)擊同意授權(quán)。
7、然后就會(huì)跳轉(zhuǎn)到一個(gè)網(wǎng)站，在你的Github需要安裝 draw.io App，直接點(diǎn)擊安裝即可，初次使用才會(huì)有這一步，后面就不用那么麻煩了。
8、然后選擇你要授權(quán)的倉庫，可以是某個(gè)倉庫，也可以是全部倉庫，我這里為了方便，就直接選擇了所有倉庫。
9、安裝完成后，再回到在線畫圖網(wǎng)站，點(diǎn)擊「try again」。
10、到這一步，授權(quán)的工作就完成了。然后，就可以開始畫圖了。畫完圖后，就可以導(dǎo)出 png 圖片。
11、我直接將 png 圖片保存到 Github。
12、保存好圖片后，我們可以用以下地址作為圖片的地址。
我這個(gè)地址是經(jīng)過 jsdeliver cdn 加速的了，這個(gè) cdn 也是免費(fèi)的。地址的構(gòu)成是這樣的：
也就是說，紅色部分的前綴地址是固定的，綠色部分的地址是根據(jù)文件的保存?zhèn)}庫路徑而變更就行。
如果你嫌這樣替換地址麻煩，想自動(dòng)化一點(diǎn)。可以搭配使用 pingo 工具來上傳圖片，上傳完圖片它會(huì)自動(dòng)生成一個(gè)經(jīng)過 jsdeliver cdn 加速的地址。網(wǎng)上的資料很多，關(guān)鍵詞搜索「github + jsdeliver cdn + pingo」即可。
怎么樣，這一套免費(fèi)版的畫圖+Github云同步+圖床的方案，還是很舒服的。
思維導(dǎo)圖工具
我用的思維導(dǎo)圖工具是 xmind，是國產(chǎn)的。他們軟件的交互設(shè)計(jì)做得很不錯(cuò)，很簡潔明了。
它有很多種風(fēng)格選擇，基本都是五彩的，整體挺好看的。
有意思的地方，這個(gè)思維導(dǎo)圖工具的右側(cè)會(huì)有一些圖標(biāo)圖片選擇，比如表情圖片、標(biāo)簽圖片、進(jìn)度圖圖片等等。
習(xí)慣用思維導(dǎo)圖做筆記的同學(xué)， xmind 這個(gè)思維導(dǎo)圖工具是個(gè)不錯(cuò)的選擇。
另外，我也會(huì)使用 Effie 這個(gè)工具來生成思維導(dǎo)圖，它本身是一個(gè)寫作的工具，但是自帶一個(gè)根據(jù)文字內(nèi)容生成思維導(dǎo)圖的功能。
代碼貼圖工具
如果你想展示你的代碼，又苦于源代碼的樣式不好看，則可以使用一個(gè)生成漂亮的代碼貼圖網(wǎng)站。
地址：https://carbon.now.sh
導(dǎo)出圖片后，就是一張漂亮的代碼展示圖。
文章編寫工具
我寫文章都是用 mardown 格式，這樣的好處是能方便發(fā)布到各個(gè)博客平臺(tái)。
剛好有道云筆記支持 mardown 格式，所以一直都在用這個(gè)，但是永久后，它的雙屏顯示體驗(yàn)不是很好，就是左邊是 mardown 格式的文檔，右邊是顯示渲染的效果。
最近就開始轉(zhuǎn)到 typora 寫文章了。
因?yàn)?typora 自身沒有云備份功能，所以我是將 md 文件直接保存到 iCoud 云盤的文件夾，這樣相當(dāng)于實(shí)現(xiàn)了文件內(nèi)容自動(dòng)備份功能，再也不怕文章內(nèi)容丟失了，壞處就是無法跨平臺(tái)，因?yàn)?iCoud 云盤只能用于 macOS 系統(tǒng)。
最新版本的 typora 已經(jīng)開始收費(fèi)了，我一直沒有更新，所以還是免費(fèi)的狀態(tài)。
還有一點(diǎn)，typora 有生成 pdf 的功能，我之前生成的圖解系統(tǒng)和圖解網(wǎng)絡(luò)的 pdf，就是在 typora 生成的。
有時(shí)候?qū)懸恍└邢腩惖奈恼拢揖椭苯釉?Effie 這個(gè)工具寫，因?yàn)樗捻撁娣浅：啙嵓兇猓褪且粡埓蟀准堩撁妫浅Ｈ菀讓Ｗ⑵饋恚沂侵С?mardown 格式的語法。
還有很多優(yōu)秀的記筆記的軟件，比如語雀、notion、wolai等等。
以上這些就是我寫文章的時(shí)候，常用的工具了，看起來很多，其實(shí)用習(xí)慣的話還好，而且基本都是不花錢的工具，用起來也很 nice。
你們?nèi)粘Ｖ杏心男┖糜蒙裣绍浖部梢栽u論區(qū)說下，我來種種草
