寫作中常用的繪圖工具
由于在寫作中經(jīng)常需要配圖，本文分享下我常用的繪圖工具以及如何存儲(chǔ)并展示配圖。
白板繪圖
Excalidraw
白板繪圖的好處在于靈活度非常高。好的白板工具可以很方便的繪制自由的圖片和預(yù)定義的結(jié)構(gòu)化圖形，這方面我在用的工具是 Excalidraw，由于本工具是開(kāi)源的，我也部署了自己的 Excalidraw 白板工具。在基于純文本的人生管理這篇文章里所有的配圖都是用 Excalidraw 繪制，比如下圖：
一個(gè)好的白板工具應(yīng)該需要有什么特性呢?Excalidraw 的創(chuàng)始人寫了一篇很好的文章Rethinking Virtual Whiteboard來(lái)回答這個(gè)問(wèn)題。
Excalidraw 的優(yōu)點(diǎn)有以下：
- 無(wú)需注冊(cè)，直接使用，用完即走;
- 代碼開(kāi)源，免費(fèi)使用，不用擔(dān)心商業(yè)問(wèn)題;
- 多人實(shí)時(shí)協(xié)作，共同繪制;
- 數(shù)據(jù)可導(dǎo)出，可通過(guò)鏈接直接分享給任何人;
- 數(shù)據(jù)存儲(chǔ)在瀏覽器本地，文件可離線編輯;
- 擴(kuò)展性強(qiáng)，可以導(dǎo)入其他人繪制的資源庫(kù);
- 數(shù)據(jù)采用端到端加密，服務(wù)器端數(shù)據(jù)加密存儲(chǔ)，隱私保護(hù)很可靠;
- 保存的文件可直接在 VSCode 編輯(通過(guò)插件)，同時(shí)可被其他網(wǎng)站嵌入使用，比如不只是筆記工具的 Logseq里的繪圖功能就是嵌入 Excalidraw 完成的;
擁有這么多特性，用 Excalidraw 能畫啥圖得取決于你的想象力了：在 One Year of Excalidraw與 Create Diagrams That Look Like Hand-drawn這兩篇文章里可以看到使用 Excalidraw 畫常見(jiàn)的結(jié)構(gòu)圖如架構(gòu)圖、結(jié)構(gòu)圖、流程圖與交互圖等，也可以自由繪制如品牌Logo、事件風(fēng)暴圖、原型圖、對(duì)比圖、手繪圖、四格漫畫與平面圖等。
除了 Excalidraw 外，其創(chuàng)始人早期用了另一個(gè)白板工具近 10 年，這個(gè)工具是 zwibbler，我看了下感覺(jué)用 Excalidraw 完全可以替代它。
Miro&& Mural&& Figma
這幾個(gè)在線白板很適合團(tuán)隊(duì)協(xié)作(比如敏捷工作流如 Retro、站會(huì)、頭腦風(fēng)暴、工作坊等)，和 Excalidraw 不同之處在于，它們支持的模版更為豐富，還能集成不同的 App，比如在白板里插入表格和圖片之類。其中 Figma 雖然是個(gè)類似 Sketch 的設(shè)計(jì)工具，但是也支持白板的用法。
不好的地方在于它們都不是開(kāi)源的，但是也提供了免費(fèi)版。當(dāng)然也可以用 Google 出品的jamboard替代，雖然沒(méi)有提供模版，但是基本功能都類似。
Perfect FreeHand
帶有壓感的在線手寫板工具，以下是用手寫板手寫的效果：
文本繪圖
文本繪圖的好處在于修改、存儲(chǔ)方便，很簡(jiǎn)單即可繪制出固定模式的圖，如時(shí)序圖、架構(gòu)圖、部署圖、線框圖、甘特圖、WBS與思維導(dǎo)圖。 PlantUML是一個(gè)支持文本繪制類UML圖的工具，可以在 Real World Plantuml 找到很多用它實(shí)現(xiàn)的圖。我一般用它來(lái)繪制以下一些圖。
思維導(dǎo)圖
文本如下：
@startmindmap
skinparam monochrome true
Markdown排版
(1) 寫作
- 博客
- 知乎專欄
- 微信公眾號(hào)
(2) 幻燈片
(3) 專業(yè)報(bào)告
(4) 筆記
@endmindmap
可以使用在線編輯器 PlantUML Editor在線編輯預(yù)覽。
架構(gòu)圖
源文本見(jiàn) arch_aws.plantuml。
關(guān)于文本繪圖的進(jìn)一步思考，推薦看 C4 Model 的作者這篇 Software architecture diagrams as text。
專業(yè)繪圖
Sketch/OmniGraffle
源文件見(jiàn) Serverless.sketch。
要想用 Sketch 畫好配圖，配色很重要，這方面可以看 draveness 寫的這篇《技術(shù)文章配圖指南》。當(dāng)然 Sketch 可以做的遠(yuǎn)不止這些，不過(guò)這不在本文討論范圍。
draw.io/GoogleDrawings
這類工具都可以繪制各類你想要的配圖，唯一限制的就是你的想象力了。
在線繪圖工具如 Google Drawings的多人實(shí)時(shí)協(xié)作功能更是團(tuán)隊(duì)協(xié)作繪圖利器。這篇《分布式事務(wù)中的時(shí)間戳》中的配圖就是用 Google Drawings 繪制的。
代碼繪圖
Python Jupyter Notebook
我用這個(gè)繪制一些數(shù)據(jù)分析的圖，比如這種：
源代碼見(jiàn)：index_month_quote_change.ipynb。
其他工具
Excel
用 Excel 畫圖不是不可以，你可以用數(shù)據(jù)繪制圖，也可以用單元格來(lái)繪制馬賽克的圖，不過(guò)我一般用它來(lái)繪制投資組合的一些走勢(shì)圖和狀態(tài)圖。
配圖存儲(chǔ)與展示
圖片我一般用 VSCode 插件 markdown image paste配置 AWS S3 后，可將復(fù)制到剪貼板的圖片一鍵上傳至 S3 桶，之后可通過(guò)桶綁定的域名訪問(wèn)圖片，具體詳見(jiàn)《我的筆記系統(tǒng)》VSCode插件一鍵存儲(chǔ)圖片至S3節(jié)。
關(guān)于繪圖工具的思考
沒(méi)有一種工具是萬(wàn)能的，萬(wàn)能如 Excalidraw 也無(wú)法替代 Lucidchart/Draw.io/Google Drawings/Visio 這些復(fù)雜的工具(他們更適合復(fù)雜的對(duì)精確性有高度要求的圖)。更沒(méi)有一種軟件工具能替代紙和筆。工具更重要的是背后使用它的人，能用圖片講好一個(gè)故事才是我們需要不斷提升的能力，一個(gè)工具能做到不限制你的發(fā)揮就算適合的好的工具。
【本文是51CTO專欄作者“ThoughtWorks”的原創(chuàng)稿件，微信公眾號(hào)：思特沃克，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】
