工作中總是少不了要畫(huà)畫(huà)圖，不管是開(kāi)發(fā)中繪制流程圖，還是設(shè)計(jì)系統(tǒng)時(shí)畫(huà)出架構(gòu)圖，一款趁手的工具總是少不了。今天我們就來(lái)聊聊畫(huà)圖的白板工具。

今天我們推薦的推薦的項(xiàng)目幫你畫(huà)出手繪風(fēng)的高顏值圖標(biāo)，目前在 GitHub 已超過(guò) 66K Star，它就是：excalidraw

excalidraw 是什么?

Excalidraw 是一個(gè)虛擬白板應(yīng)用，專門(mén)用于繪制類似手繪的圖表。它提供了一個(gè)無(wú)限的、基于畫(huà)布的白板，具有手繪風(fēng)格，支持多種功能。

Excalidraw 具備輕量級(jí)、易用、美觀、安全、協(xié)作等能力，非常適合用于技術(shù)文章配圖、思維導(dǎo)圖、架構(gòu)圖、流程圖等場(chǎng)景。Excalidraw 編輯器提供的能力包括：

• 免費(fèi)且開(kāi)源。
• 無(wú)限的、基于畫(huà)布的白板。
• ??類似手繪的風(fēng)格。
• 黑暗模式。
• ?可定制。
• 圖片支持。
• 形狀庫(kù)支持。
• 本地化（i18n）支持。
• ? 導(dǎo)出為 PNG、SVG 和剪貼板。
• 開(kāi)放格式 – 將圖紙導(dǎo)出為.excalidraw
• json 文件。
• ?? 多種工具 – 矩形、圓形、菱形、箭頭、線條、自由繪制、橡皮擦 …
• ?? 箭頭綁定和標(biāo)記箭頭。
• 撤消 / 重做。
• 縮放和平移支持。

下面是它的 GitHub star 歷史，Excalidraw 在繪圖工具圈里起步算是比較晚的，但是可以看出發(fā)展還是非?？斓?。

為什么用 excalidraw

繪圖工具還是很多，比如 processon、PlantUML、Draw.io，之前我也一直在用 Draw.io 畫(huà)圖，來(lái)說(shuō)說(shuō) excalidraw 對(duì)比同類的特點(diǎn)：

• 手繪風(fēng)：excalidraw 主打的第一點(diǎn)就是手繪風(fēng)格，從呈現(xiàn)來(lái)說(shuō)，我個(gè)人覺(jué)得更好看一些。
• 易于集成：excalidraw 可以很容易的集成進(jìn)你的 app，也提供多種集成插件方便開(kāi)發(fā)過(guò)程。
• 快速上手：使用上和主流產(chǎn)品基本一致，可以無(wú)成本快速上手使用。
• 協(xié)作：支持團(tuán)隊(duì)協(xié)作
• 安全：支持端到端的加密，保障數(shù)據(jù)安全。

使用 excalidraw

在線環(huán)境

首先 Excalidraw 還提供了在線的環(huán)境方便用戶快速上手，地址如下：https://excalidraw.com/

進(jìn)入后直接就可以開(kāi)始畫(huà)圖，連登錄什么的都不需要，不掃碼、不要驗(yàn)證碼，真是要好評(píng)一個(gè)。

頂部的工具欄是可以直接按數(shù)字鍵來(lái)切換的，細(xì)節(jié)拉滿。

也有一些小小的不適應(yīng)，就是 Draw.io 的框里可以直接加文字，在這里是創(chuàng)建一個(gè)文本，我一開(kāi)始還奇怪字怎么歪了。

點(diǎn)擊右側(cè)可以打開(kāi)素材庫(kù)，自己畫(huà)的內(nèi)容就是自己的素材，還可以去素材庫(kù)添加素材

加了一些圖標(biāo)進(jìn)來(lái)，還是用現(xiàn)成的素材省事。除了基本的素材，也有模版，可以自己翻一番。

可以將自己的畫(huà)作保存下來(lái)，或者也可以分享給其他同伴來(lái)協(xié)同工作。怎么樣我畫(huà)圖還不錯(cuò)吧，這個(gè)也是個(gè)模版。

自己部署

項(xiàng)目支持 docker 運(yùn)行也支持源碼運(yùn)行：

源碼的話，前提要確認(rèn)已經(jīng)安裝好 nodejs，接下來(lái)：

 下載代碼
git clone <https://github.com/excalidraw/excalidraw.git>

安裝
yarn

啟動(dòng)
yarn start

現(xiàn)在可以打開(kāi) http://localhost:3000 并開(kāi)始使用

docker 的話：

可以在源碼中構(gòu)建 docker image

docker build -t excalidraw/excalidraw .

也可以直接從 dockerhub 拉

docker pull excalidraw/excalidraw

總之獲取鏡像之后，啟動(dòng)就可以了。

docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

最后 excalidraw 還提供了一個(gè) VScode 插件，可以直接在 vscode 里畫(huà)圖了。

項(xiàng)目信息

• 項(xiàng)目名稱：excalidraw
• GitHub 鏈接：https://github.com/excalidraw/excalidraw
• Star 數(shù)：66K+