Docker系列 头脑风暴专用手绘图应用excalidraw

转自我的个人博客https://blognas.hwb0307.com。欢迎关注！

前言

前段时间逛Github的时候偶然发现了一个叫excalidraw的应用，Github Repo有30.8k的Star。excalidraw是一个绘制手绘图的虚拟白板，支持文字、图标，甚至是某些简单的Excel图表：

它还有个素材库，里面的自定义素材支持生成各种复杂的实例：

你可以在B站里搜索一下excalidraw，应该有不少相关的使用技巧。对于某些人而言，它提供了一个相对自由、定制程度较高的空间，特别适合头脑风暴的过程中临时制作思维导图。画好之后，你可以将project保存为一个.excalidraw格式的文件，方便在其它地方/时机打开。excalidraw确实是个好东西，所以这里分享给大家！

excalidraw官方支持Docker自建。最近版本中，docker build多多少少有点bug，感觉很不方便；直接镜像功能又过于简陋。和Derek沟通后，请他帮忙定制了一个新的Docker镜像。新镜像可将整个web文件夹映射至宿主机空间，所以很多web样式可以自定义。如果你对html、css或js比较熟悉，应该可以自定义出一个理想的excalidraw。本教程也会进行一些简单的自定义设置，比如更改默认字体、默认标题等。

本教程主要和大家分享一下如何自建Docker版excalidraw。虽然excalidraw宣称有端到端加密的技术，不过我觉得自建的安全性会更高一些（虽然实际使用时不一定需要这么高的安全性；其实只是想折腾，哈哈！）。我也提供了一个自建excalidraw应用，感兴趣的小伙伴也可以试用一下。我个人觉得还不错！

测试环境

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
1
2
3
4
5

准备工作

创建并进入工作目录：

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

开放端口：

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

ddns-go & NPM

不了解Nginx Proxy Manager用法的小伙伴，请看《Docker系列 两大神器NPM和ddns-go的安装》。

在ddns-go或者域名托管商后台解析好域名，比如excalidrwarn2.hwb0307.com。

Nginx Proxy Manager设置无特殊，类似于下图：

配置yaml

新增docker-compose.yml文件：

vim $work/docker-compose.yml
1

填写以下内容：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上线服务：

cd $work && docker-compose up -d
1

直接访问：https://excalidrwarn2.hwb0307.com，即可正常使用。

设置

自定义中文字体

由于系统的默认中文字体不是手写体，实际使用时有点违和感，强迫症受不了。Derek的镜像支持更改默认中文字体。你要提前准备好一个你喜欢的中文字体（自己网上到那些字体库里下载），然后将其转换为woff2格式，最后上传到$work/data目录里，类似这样：

注意，这个新字体的名字一定要是MyFonts.woff2。

上传完成后，更改一下文件所属的用户（组）：

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

然后重启一下应用：

cd $work && docker-compose restart
1

在我的实例中，我使用了一个叫沐瑶随心的手写体字体，效果如下：

有什么好看的、免费的手写体，希望有小伙伴可以推荐一下！

自定义标题

你还可以更改一下网站的title。效果类似这样：

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

vim $work/data/index.html
1

修改完成后，最后重启服务：

docker-compose restart
1

其它

其实还可以改网站图标那些，自己摸索下，我没需要就不搞了。有啥需求可以留言，有空我会折腾一下。

小结

感谢Derek小伙伴的大力支持，让excalidraw的安装变得简单和高度可定制化！我也是刚刚安装好，之后有什么使用心得再来更新吧。我这里没有展示excalidraw的基本用法，因为它设计得够简单了；也没有展示一些快捷键的使用。自己试用一下，然后看看网上的教程，基本就会了。有什么问题欢迎评论区留言！

参考

• Github Repo: excalidraw
• Docker镜像：excalidraw/excalidraw
• 风靡硅谷的白板工具 Excalidraw ｜开源 + 手绘 = 快乐加倍
• Obsidian 的 Excalidraw 插件自定义中文字体
• 分享一个在线做图的开源工具-excalidraw
• Docker excalidraw from ddsderek
• 官方Demo: https://excalidraw.com