偶爾講講工具，放松一下。

現在寫技術文章不但要寫技術細節，圖還得畫的好看。對于表達思路和架構來說，圖確實挺直觀的，這篇文章介紹一下常見的繪圖工具。大家可以看自己的喜好自行選擇。

在早期寫 golang-notes 的時候，想要向那些寫 RFC 文檔和早期的 unix 大神們致敬，所以比較喜歡 ascii 圖，這種圖的好處是你可以直接將圖表內嵌在文檔內部，不需要有附件。有利于單文件傳播。

用來畫 ascii 的圖工具有不少。

textik

textik 是一個在線項目：https://textik.com，可以直接在線繪制 ascii 圖，繪制完之后，鏈接可以直接丟給別人看，有點類似那些語言的 playground。在他們的后端大概是有一個簡單的存儲吧。

textik

工具很簡單，所以畫的圖一般也比較簡單。

asciiflow

asciiflow

asciiflow 也是一個在線應用 https://asciiflow.com/ ，導出的時候可以選擇 ascii 模式或者 extended 模式(其實就是用了一些非 ascii 的 unicode 字符)。

但是不支持中文。

monodraw

monodraw

monodraw 是一個 mac 上的 app，看起來比 textik 之類的就高級多了，繪制的時候可以選擇 unicode 模式或者 ascii 模式，unicode 模式的線條和邊角會比 ascii 模式流暢很多。之前我在寫 golang-notes 的時候，用 monodraw 畫了大量的圖片。

map

像 map 這種復雜的數據結構，一定是復雜的圖，用 monodraw 畫出來最終效果也不錯。

monodraw 也不支持中文。

除了這幾個工具，其實還有很多類似的：

比如：

https://technicism.github.io/Charaster/

還有可以把圖片轉成彩色 ascii 圖[1]的：

ascii_color

不過這個比較像玩具了，還有人把視頻抽幀轉成 ascii，再轉回視頻來博眼球的。

如果不喜歡 ascii 圖，現在有一些方便的工具，比如 draw.io(現在改名叫 diagrams.io了)，用來繪制一些常用的軟件工程圖也挺方便的。

有人說 draw.io 畫出來的圖不好看，有兩方面原因，一是工程師們基本都沒有什么審美，所以不會調色；二是工程師用畫圖工具基本只用默認樣式，所以對繪圖工具的比較就是哪款軟件的默認樣式好，就吹哪款。

draw.io 內置的圖有一些是很好看的：

drawio

這張圖當時震撼了我好久，畫圖本質上其實是個設計問題，最近和圖靈的老師要來了幾本設計書，等我設計功底過關的時候再看看我能畫出什么樣的圖。

不過我們還是要講講卷卷工程師們喜歡用的東西：

sketch

sketch 其實是一個原型設計工具，早期沒有原型工具的時候，設計師們都是用 PS 來做設計的，效率低反人類，這個輕便小巧的工具一出現就贏得了很多人的心。

沒想到多年后，連程序員也用這個玩藝兒來畫圖了。說白了他們就是喜歡這個工具的默認樣式嘛：

sketch

看著確實很唬人。對于大多數沒什么審美的人來說，#eeeeee 和 helvetica 就是極簡設計審美密碼了。

孰料設計行業的設計師們早就大踏步奔向了別的工具懷抱，這里賣個關子，關注我后面的分享的話應該知道未來他們在使用什么工具了。

omnigraffle

omnigraffle 和 sketch 一樣是個付費軟件，而且費用不低。主要優勢就是 stencil(其實就是模版)豐富：

stencil

寫《Go 高級編程》的時候有一些圖我是用這個工具畫的，不過用 draw.io 也一樣可以畫出來，感覺對于工程師來說，這個工具除了模板豐富，沒啥別的優勢了。

除了上面這些玩藝兒，我們可以選擇一些工程師自己才玩得轉的工具。

graphviz

graphviz 是一個用代碼來生成圖工具，你在用的 pprof 生成的圖本質上就是用 graphviz 繪制的。

graphviz

把一些代碼邏輯通過圖表展示出來，首選的應該就是 graphviz，玩開源玩的多的應該都見過它的蹤影。

plantuml

plantuml 是 java 寫的一個 uml 圖生成工具，之前在公司內部畫活動圖，序列圖的時候我用的非常多。用這種模式畫圖和寫代碼其實差不多：

@startuml scale?512*1024|Gateway| start repeat:record?data;:wating; repeat?while?(id?<?10)|#778899|<font?color=white>Copper</font>| :enter?the?Endurance; while?(not?hungry):play;:kick?football; endwhileend @enduml advanced_activity

既然是代碼，那我們用版本控制工具來把這些 plantuml 的代碼管理起來也是順理成章的。

未來需要回頭查(copy)閱(paste)也是很方便的。

該工具生成的圖默認是早期 rational rose 風格，很復古，看著很專業。

基本上所有類型的 uml 圖都可以用 plantuml 來繪制，前面說的 graphviz 能做的事情，有一部分用 plantuml 也可以做。

aws-plantuml

aws-plantuml[2]?是一個 plantuml 的擴展，能夠生成 aws 上的模塊交互圖，很方便：

aws

這一期講的都是一些還算正常的工具，下一期可能會講一些加速程序員內容輸出內卷的繪圖/視頻工具。

[1]

圖片轉成彩色 ascii 圖:?https://www.ascii-art-generator.org/

[2]

aws-plantuml:?https://github.com/milo-minderbinder/AWS-PlantUML

總結

以上是生活随笔為你收集整理的程序员应该知道的那些画图工具-第一期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。