轉(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

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