在 VPS 上自建 Excalidraw:一个完全属于自己的手绘白板

起因

我经常需要画一些架构图、流程图和草图。在线工具虽然方便,但有两个问题:

  1. 数据在别人服务器上——画的图可能被分析、被用于训练
  2. 需要登录——每次用都要登录账号

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,零成本、完全隐私、无需登录。 单机版适合自己画图,数据存在浏览器本地。如果需要多人协作,需要额外部署协作服务。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注