前言
前段时间逛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
准备工作
创建并进入工作目录:
# 按需修改
work=/docker/excalidraw && mkdir -p $work && cd $work
开放端口:
# 按需修改
sudo ufw allow 3698/tcp comment 'excaldraw' && sudo ufw reload
ddns-go & NPM
不了解Nginx Proxy Manager用法的小伙伴,请看《Docker系列 两大神器NPM和ddns-go的安装》。
在ddns-go或者域名托管商后台解析好域名,比如excalidrwarn2.hwb0307.com
。
Nginx Proxy Manager设置无特殊,类似于下图:
配置yaml
不了解docker的小伙伴请先看:《Docker系列 配置Docker全局环境》;《Docker系列 了解Docker Compose的配置文件》。
新增docker-compose.yml
文件:
vim $work/docker-compose.yml
填写以下内容:
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
上线服务:
cd $work && docker-compose up -d
直接访问:https://excalidrwarn2.hwb0307.com,即可正常使用。
设置
自定义中文字体
由于系统的默认中文字体不是手写体,实际使用时有点违和感,强迫症受不了。Derek的镜像支持更改默认中文字体。你要提前准备好一个你喜欢的中文字体(自己网上到那些字体库里下载),然后将其转换为woff2格式,最后上传到$work/data
目录里,类似这样:
注意,这个新字体的名字一定要是MyFonts.woff2
。
上传完成后,更改一下文件所属的用户(组):
sudo chown 101:102 $work/data/MyFonts.woff2
然后重启一下应用:
cd $work && docker-compose restart
在我的实例中,我使用了一个叫沐瑶随心
的手写体字体,效果如下:
有什么好看的、免费的手写体,希望有小伙伴可以推荐一下!
自定义标题
你还可以更改一下网站的title。效果类似这样:
直接修改下面的文件即可:
vim $work/data/index.html
修改完成后,最后重启服务:
docker-compose restart
其它
其实还可以改网站图标那些,自己摸索下,我没需要就不搞了。有啥需求可以留言,有空我会折腾一下。
小结
感谢Derek小伙伴的大力支持,让excalidraw的安装变得简单和高度可定制化!我也是刚刚安装好,之后有什么使用心得再来更新吧。我这里没有展示excalidraw的基本用法,因为它设计得够简单了;也没有展示一些快捷键的使用。自己试用一下,然后看看网上的教程,基本就会了。有什么问题欢迎评论区留言!
参考
- Github Repo: excalidraw
- Docker镜像:excalidraw/excalidraw
- 风靡硅谷的白板工具 Excalidraw |开源 + 手绘 = 快乐加倍
- Obsidian 的 Excalidraw 插件自定义中文字体
- 分享一个在线做图的开源工具-excalidraw
- Docker excalidraw from ddsderek
- 官方Demo: https://excalidraw.com
---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍
好文!我可以转到我的Blog吗?
没问题,指明出处即可 (ฅ´ω`ฅ)
非常感谢!