轉(zhuǎn)自我的個(gè)人博客https://blognas.hwb0307.com。歡迎關(guān)注！

前言

前段時(shí)間逛Github的時(shí)候偶然發(fā)現(xiàn)了一個(gè)叫excalidraw的應(yīng)用，Github Repo有30.8k的Star。excalidraw是一個(gè)繪制手繪圖的虛擬白板，支持文字、圖標(biāo)，甚至是某些簡(jiǎn)單的Excel圖表：

它還有個(gè)素材庫(kù)，里面的自定義素材支持生成各種復(fù)雜的實(shí)例：

你可以在B站里搜索一下excalidraw，應(yīng)該有不少相關(guān)的使用技巧。對(duì)于某些人而言，它提供了一個(gè)相對(duì)自由、定制程度較高的空間，特別適合頭腦風(fēng)暴的過(guò)程中臨時(shí)制作思維導(dǎo)圖。畫(huà)好之后，你可以將project保存為一個(gè).excalidraw格式的文件，方便在其它地方/時(shí)機(jī)打開(kāi)。excalidraw確實(shí)是個(gè)好東西，所以這里分享給大家！

excalidraw官方支持Docker自建。最近版本中，docker build多多少少有點(diǎn)bug，感覺(jué)很不方便；直接鏡像功能又過(guò)于簡(jiǎn)陋。和Derek溝通后，請(qǐng)他幫忙定制了一個(gè)新的Docker鏡像。新鏡像可將整個(gè)web文件夾映射至宿主機(jī)空間，所以很多web樣式可以自定義。如果你對(duì)html、css或js比較熟悉，應(yīng)該可以自定義出一個(gè)理想的excalidraw。本教程也會(huì)進(jìn)行一些簡(jiǎn)單的自定義設(shè)置，比如更改默認(rèn)字體、默認(rèn)標(biāo)題等。

本教程主要和大家分享一下如何自建Docker版excalidraw。雖然excalidraw宣稱有端到端加密的技術(shù)，不過(guò)我覺(jué)得自建的安全性會(huì)更高一些（雖然實(shí)際使用時(shí)不一定需要這么高的安全性；其實(shí)只是想折騰，哈哈?。?。我也提供了一個(gè)自建excalidraw應(yīng)用，感興趣的小伙伴也可以試用一下。我個(gè)人覺(jué)得還不錯(cuò)！

測(cè)試環(huán)境

uname -a # Linux racknerd-74a241 5.4.0-28-generic #32-Ubuntu SMP Wed Apr 22 17:40:10 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

docker --version # Docker version 20.10.14, build a224086

docker-compose --version # Docker Compose version v2.4.1

準(zhǔn)備工作

創(chuàng)建并進(jìn)入工作目錄：

# 按需修改
work=/docker/excalidraw && mkdir -p $work && cd $work

開(kāi)放端口：

# 按需修改
sudo ufw allow 3698/tcp comment 'excaldraw' && sudo ufw reload

ddns-go & NPM

不了解Nginx Proxy Manager用法的小伙伴，請(qǐng)看《Docker系列 兩大神器NPM和ddns-go的安裝》。

在ddns-go或者域名托管商后臺(tái)解析好域名，比如excalidrwarn2.hwb0307.com。

Nginx Proxy Manager設(shè)置無(wú)特殊，類似于下圖：

配置yaml

新增docker-compose.yml文件：

vim $work/docker-compose.yml

填寫(xiě)以下內(nèi)容：

version: '3.3'
services:
  excalidraw:
    image: 'ddsderek/excalidraw:latest'
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - '3698:80'
    volumes:
      - './data:/app/web'
    networks:
      - default
networks:
  default:
    name: excalidraw

上線服務(wù)：

cd $work && docker-compose up -d

直接訪問(wèn)：https://excalidrwarn2.hwb0307.com，即可正常使用。

設(shè)置

自定義中文字體

由于系統(tǒng)的默認(rèn)中文字體不是手寫(xiě)體，實(shí)際使用時(shí)有點(diǎn)違和感，強(qiáng)迫癥受不了。Derek的鏡像支持更改默認(rèn)中文字體。你要提前準(zhǔn)備好一個(gè)你喜歡的中文字體（自己網(wǎng)上到那些字體庫(kù)里下載），然后將其轉(zhuǎn)換為woff2格式，最后上傳到$work/data目錄里，類似這樣：

注意，這個(gè)新字體的名字一定要是MyFonts.woff2。

上傳完成后，更改一下文件所屬的用戶（組）：

sudo chown 101:102 $work/data/MyFonts.woff2

然后重啟一下應(yīng)用：

cd $work && docker-compose restart

在我的實(shí)例中，我使用了一個(gè)叫沐瑤隨心的手寫(xiě)體字體，效果如下：

有什么好看的、免費(fèi)的手寫(xiě)體，希望有小伙伴可以推薦一下！

自定義標(biāo)題

你還可以更改一下網(wǎng)站的title。效果類似這樣：

直接修改下面的文件即可：

vim $work/data/index.html

修改完成后，最后重啟服務(wù)：

docker-compose restart

其它

其實(shí)還可以改網(wǎng)站圖標(biāo)那些，自己摸索下，我沒(méi)需要就不搞了。有啥需求可以留言，有空我會(huì)折騰一下。

小結(jié)

感謝Derek小伙伴的大力支持，讓excalidraw的安裝變得簡(jiǎn)單和高度可定制化！我也是剛剛安裝好，之后有什么使用心得再來(lái)更新吧。我這里沒(méi)有展示excalidraw的基本用法，因?yàn)樗O(shè)計(jì)得夠簡(jiǎn)單了；也沒(méi)有展示一些快捷鍵的使用。自己試用一下，然后看看網(wǎng)上的教程，基本就會(huì)了。有什么問(wèn)題歡迎評(píng)論區(qū)留言！

參考

• Github Repo: excalidraw
• Docker鏡像：excalidraw/excalidraw
• 風(fēng)靡硅谷的白板工具 Excalidraw ｜開(kāi)源 + 手繪 = 快樂(lè)加倍
• Obsidian 的 Excalidraw 插件自定義中文字體
• 分享一個(gè)在線做圖的開(kāi)源工具-excalidraw
• Docker excalidraw from ddsderek
• 官方Demo: https://excalidraw.com

本文使用 文章同步助手 同步