在 VPS 上自建 Excalidraw:一个完全属于自己的手绘白板
起因
我经常需要画一些架构图、流程图和草图。在线工具虽然方便,但有两个问题:
- 数据在别人服务器上——画的图可能被分析、被用于训练
- 需要登录——每次用都要登录账号
Excalidraw 是一个开源的手绘风格白板工具。它支持自托管,数据存在浏览器本地,不经过服务器。这意味着:
- 完全隐私:画的内容不离开你的浏览器
- 无需登录:打开就能用
- 完全免费:没有订阅、没有额度限制
部署过程
Excalidraw 官方提供了 Docker 镜像,部署只需要一条命令。
在 VPS 上执行:
bash
docker run -d \ --name excalidraw \ --restart unless-stopped \ -p 5000:80 \ excalidraw/excalidraw:latest
这条命令做什么:
| 参数 | 作用 |
|---|---|
-d | 后台运行 |
--name excalidraw | 容器命名为 excalidraw |
--restart unless-stopped | 崩溃时自动重启 |
-p 5000:80 | 把宿主机的 5000 端口映射到容器的 80 端口 |
excalidraw/excalidraw:latest | 使用官方镜像 |
验证:
bash
docker ps | grep excalidraw
应该看到:
text
excalidraw excalidraw/excalidraw:latest Up (healthy) 0.0.0.0:5000->80/tcp
看到 Up 和 (healthy) 就说明部署成功。
访问方式
Excalidraw 只监听在 VPS 内部,需要建 SSH 隧道从你自己的电脑访问。
在你自己的电脑上执行(新开终端,保持运行):
bash
ssh -L 5000:127.0.0.1:5000 root@你的VPS的IP
这条命令做什么:
-L 5000:127.0.0.1:5000:把你自己电脑的 5000 端口,转发到 VPS 的 5000 端口- 执行后这个终端会挂起——这是正常的,不要关它
然后浏览器访问:
text
http://localhost:5000
应该能看到 Excalidraw 的白色画布和左侧工具栏。
单机版 vs 协作版
Excalidraw 自托管有两种模式,需要先想清楚你要哪种。
| 版本 | 功能 | 资源占用 |
|---|---|---|
| 单机版 | 纯绘图,数据存浏览器本地,不支持实时协作 | 几乎为零(纯静态前端) |
| 协作版 | 支持多人实时编辑,数据可存服务器 | 需要额外的存储和 WebSocket 服务 |
官方明确说明:自托管客户端不支持分享和协作功能。
如果你只需要自己画图,单机版完全够用。我用的就是这个。
如果需要协作
协作需要额外的 excalidraw-room 服务。社区有一个比较完整的方案,用 Docker Compose 把前端、存储后端和协作房间服务串起来。但要注意:协作版通常需要一个魔改版的 Excalidraw 前端(因为官方前端硬编码了 Firebase 或公共协作服务器),这意味着你可能需要自己构建镜像,或者接受社区维护的版本。
使用体验
数据存储
画的内容自动存在浏览器本地(IndexedDB),不经过服务器。
这意味着:
| 优点 | 缺点 |
|---|---|
| 完全隐私 | 换浏览器/换电脑看不到之前的图 |
| 响应快 | 清理浏览器数据会丢图 |
| 不需要网络(画的时候) | 无法跨设备同步 |
导出功能
Excalidraw 支持多种导出格式:
| 格式 | 用途 |
|---|---|
| PNG | 插入文档、PPT |
| SVG | 矢量图,可无限放大 |
| .excalidraw | 源文件,可重新导入编辑 |
重要:如果你画的图很重要,定期导出 .excalidraw 文件备份。因为浏览器数据可能因为清理缓存、更换设备而丢失。
踩坑记录
1. 官方镜像不支持协作
一开始以为自托管就能多人协作,实际上官方镜像只提供纯前端。想要协作需要额外部署 excalidraw-room,并且需要魔改前端。
2. 数据存在浏览器本地
这意味着:
- 你 Mac 上画的图,在手机上打开
http://localhost:5000是看不到的 - 清理浏览器数据后,所有图都会丢失
- 换电脑后,需要在旧电脑上导出
.excalidraw文件,再在新电脑导入
3. SSH 隧道需要保持运行
每次访问前,都要先建 SSH 隧道。如果隧道断了,浏览器就访问不了。
4. 端口冲突
如果你的 VPS 上已经有服务占用 5000 端口,需要改成其他端口:
bash
docker run -d \ --name excalidraw \ --restart unless-stopped \ -p 5050:80 \ excalidraw/excalidraw:latest
然后 SSH 隧道也用 5050:
bash
ssh -L 5050:127.0.0.1:5050 root@你的VPS的IP
成本分析
| 项目 | 成本 |
|---|---|
| Excalidraw 镜像 | 免费开源 |
| 磁盘占用 | 约 50 MB |
| 内存占用 | 约 10-20 MB |
| VPS | 已有,不增加成本 |
| 总计 | 0 元 |
当前状态
| 组件 | 状态 |
|---|---|
| Excalidraw 容器 | ✅ 运行中 |
| 端口映射 | ✅ 5000 → 80 |
| 健康检查 | ✅ healthy |
| SSH 隧道访问 | ✅ 正常 |
| 数据存储 | ✅ 浏览器本地 |
可优化的方向
1. 加 HTTPS 和域名
如果你想让手机也能访问,可以用 Caddy 反向代理 + 域名:
text
excalidraw.example.com {
reverse_proxy localhost:5000
}
这样不需要 SSH 隧道,任何设备都能访问。
2. 加密码保护
用 Caddy 的 basic_auth 加一层额外保护:
caddyfile
excalidraw.example.com {
basic_auth {
admin $2a$14$xxxxxxxxxxxx
}
reverse_proxy localhost:5000
}
3. 定期备份
虽然数据在浏览器本地,但定期导出 .excalidraw 文件是必要的。可以写一个脚本,把重要的图导出到 VPS 上备份。
一句话总结
用 Docker 一条命令在 VPS 上部署 Excalidraw,零成本、完全隐私、无需登录。 单机版适合自己画图,数据存在浏览器本地。如果需要多人协作,需要额外部署协作服务。
