大廠程序員都在用什么工具繪圖？

    

     
    
大廠技術(shù)  高級(jí)前端  Node進(jìn)階
點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群

作者：程序員晚天

原文：https://juejin.cn/post/7239996872005091383

如果你不只悶頭寫(xiě)代碼，還需要方案設(shè)計(jì)、內(nèi)部分享、向上匯報(bào)、述職答辯、追求晉升等等，繪圖工具幾乎是互聯(lián)網(wǎng)從業(yè)者標(biāo)配工具。好用的繪圖工具，可以大幅提升繪圖效率和圖形效果，甚至能夠讓你的匯報(bào)鶴立雞群、增色不少。

那么，弱弱的請(qǐng)教下，你在用什么「工具繪圖」呢？歡迎大家把自己最喜歡的繪圖工具回復(fù)在本文的評(píng)論區(qū)。

本文先拋磚引玉，介紹一個(gè)作者在使用，且非常喜歡的白板繪圖工具 Excalidraw^[1]。

Excalidraw

Excalidraw^[2] 是一個(gè)開(kāi)源的無(wú)限畫(huà)布的手繪效果白板繪圖工具，支持多人協(xié)作和端到端加密。

作者

Excalidraw^[3] 的作者是一位目前在 Facebook 工作的法裔前端開(kāi)發(fā)工程師 Vjeux。除了是 Excalidraw^[4] 的作者之外，還是 React Native、Prettier 的聯(lián)合創(chuàng)始人，也是 CSS-IN-JS、Yoga、React Conf 的創(chuàng)建者。

發(fā)展趨勢(shì)

Excalidraw 也是 Github 開(kāi)源項(xiàng)目，從 2020 年開(kāi)源開(kāi)始，Star 數(shù)一路直線增長(zhǎng)，目前已經(jīng)積攢了 49.1k 的 Star 數(shù)。

從 npm 趨勢(shì)上，我們也能看到 Excalidraw 的熱度目前也處于一個(gè)爆發(fā)式增長(zhǎng)的階段，沒(méi)有已經(jīng)有接近 7w 的 npm 下載量。

效果

下面我們來(lái)看下，使用 Excalidraw 我們能夠繪制怎樣的效果.

首先,比較常見(jiàn)的,我們可以繪制手繪效果的流程圖,從這張圖的效果我們可以看出 Excalidraw 的手繪效果還是非常真實(shí)的。

我們還可以繪制網(wǎng)頁(yè)的線框圖、步驟圖、不同形式的流程圖、看板圖等等；

線框圖：

步驟圖：

天馬星空的流程圖：

看板：

甚至只要發(fā)揮想象力，我們可以繪制出所有手繪等夠得到的圖形。比如這些火柴人。

功能介紹

對(duì)效果進(jìn)行簡(jiǎn)單展示之后，我們來(lái)對(duì) Excalidraw 的工具進(jìn)行手把手的演示。接下來(lái)，我將給大家演示 Excalidraw 的布局、基礎(chǔ)繪圖、圖層、批量操作、圖表、快捷鍵、文件保存、多端能力。

布局

我們來(lái)看下 Excalidraw 的布局。

左上角是菜單欄，有打開(kāi)文件、保存文件、導(dǎo)出圖片、實(shí)時(shí)協(xié)作、重置畫(huà)布、設(shè)置畫(huà)布背景等功能；

頂部是工具欄，有拖動(dòng)、選擇、矩形、菱形、圓形、箭頭、線、畫(huà)筆、文本、圖片、橡皮擦等功能；

右上角有實(shí)時(shí)協(xié)作、素材庫(kù)功能；

左下角可以縮放畫(huà)布、撤回操作和取消撤回操作；

右下角是快捷鍵和幫助。

基礎(chǔ)繪圖

介紹完布局，我們來(lái)實(shí)操下繪圖。Excalidraw 的繪圖非常簡(jiǎn)單，拿到就可以直接上手。下面，我們來(lái)繪制一個(gè)矩形，我們可以看到在左側(cè)菜單，可以對(duì)我們剛繪制的圖形進(jìn)行屬性設(shè)置，包括描邊、背景、寬度、邊框、線條風(fēng)格、邊角、透明度，同時(shí)我們可以可以進(jìn)行圖層、賦值、刪除、增加鏈接等操作；

接下來(lái)，我們用 Excalidraw 繪制一個(gè)簡(jiǎn)單的流程圖。

如果想要增加繪圖效率，最好的方式就是使用快捷鍵。我們可以在右下角的快捷鍵幫助中看到所有快捷鍵。

此外，Excalidraw 還支持圖層、批量對(duì)齊、文件保存、圖片導(dǎo)出等能力。

自動(dòng)生成圖表

Excalidraw 還有一個(gè)非常值得一提的功能是基于“兩列表格”自動(dòng)生成圖表，簡(jiǎn)直秀的飛起。

例如，我們有下列「全球公司市值排行榜」兩列表格數(shù)據(jù)：

我們復(fù)制上述兩列數(shù)據(jù)黏貼到 Excalidraw 中，將會(huì)得到如下效果：

隨便選擇一個(gè)圖表形式，即可生成如下效果：

是不是秀的飛起？再也不用使用 Excel 中生成的丑陋的圖表了。

缺點(diǎn)

Excalidraw 的功能演示完成。整體體驗(yàn)下來(lái)，Excalidraw 的繪圖能力是非常強(qiáng)大的，但是也有兩個(gè)比較致命的缺點(diǎn)，會(huì)勸退很多人。

1. 缺少中文手繪效果，使得使用中文繪制出的內(nèi)容充滿違和感；
2. 不支持多畫(huà)布能力，如果我們需要并行繪制多個(gè)畫(huà)布，往往是不太可行的。但是，現(xiàn)實(shí)場(chǎng)景下，我們不可能一個(gè)個(gè)的畫(huà)布繪制，往往是在繪制一個(gè)主題畫(huà)布的時(shí)候，就需要繪制另一個(gè)主題的畫(huà)布。

解決方案

只提問(wèn)題，不提解決方案是遠(yuǎn)遠(yuǎn)不夠的。這里作者針對(duì)上述兩個(gè)問(wèn)題，也給出了解決方案。那就是 Handraw^[5]，一個(gè)支持中文手繪效果和多畫(huà)布能力的 Excalidraw 增強(qiáng)版。

Handraw

Handraw^[6] 是基于開(kāi)源 Excalidraw 進(jìn)行了「中文手繪效果」和「多畫(huà)布」能力增強(qiáng)，并推出了免費(fèi)線上服務(wù) Handraw^[7] 和開(kāi)源項(xiàng)目 excalidraw-cn^[8]。

中文手繪效果

我們直接拿前文中的流程圖做示例，分別使用 Handraw^[9] 和 Excalidraw 實(shí)現(xiàn)該流程圖，對(duì)比效果如下，Handraw 完美支持了中文手繪效果，解決了手繪圖中中文效果確是打印體這種滿滿違和感的問(wèn)題。

多畫(huà)布能力

Handraw^[10] 相較 Excalidraw 在左上側(cè)菜單中新增了「新建畫(huà)布」和「切換畫(huà)布」功能，使得用戶可以同時(shí)創(chuàng)建和繪制多個(gè)畫(huà)布，相互不干擾，大大提升并行繪制效率。與此同時(shí)，也在畫(huà)布左上角顯示了當(dāng)前畫(huà)布名稱，告訴用戶當(dāng)前編輯的畫(huà)布是哪一個(gè)，避免在并行繪制過(guò)程中出現(xiàn)畫(huà)布混淆。

總結(jié)

Excalidraw 是一個(gè)非常強(qiáng)大的手繪效果的白板工具，一經(jīng)推出，就非常火爆、廣受歡迎。但是作為中文用戶，在使用中卻沒(méi)有中文手繪效果，這是接受不了的。另外，只有單畫(huà)布能力也大大限制了我們?nèi)粘５氖褂眯省?/p>

因此，作者基于開(kāi)源 Excalidraw 進(jìn)行了能力增強(qiáng)，并推出了免費(fèi)線上服務(wù) Handraw^[11] 和開(kāi)源項(xiàng)目 excalidraw-cn^[12]（歡迎 star），大家可免費(fèi)使用。

文章提到的增強(qiáng)版 Excalidraw 產(chǎn)品 Handraw 已升級(jí)為 ReveZone，不僅支持中文手繪效果，支持自定義字體，支持類(lèi) Notion 筆記功能，使用方法如下，歡迎前往使用。

ReveZone：

• 線上體驗(yàn)版 (基礎(chǔ)功能): revezone.com^[13]
• 桌面應(yīng)用版 (全量功能): github.com/revezone/re…^[14]

另外，歡迎大家把自己喜歡的繪圖工具回復(fù)到評(píng)論區(qū)，大家互通有無(wú)，交流學(xué)習(xí)。

參考資料