自建 Excalidraw，画草图并保留可编辑文件

讨论一个产品页面或 API 流程时，先画几个框往往比写长段说明更容易发现遗漏。Excalidraw 的手绘风格适合草图，不需要为了表达一个想法先处理复杂的排版。

本文部署的是官方前端镜像。它不附带完整多人协作后端，也不是把每张图自动存进 VPS 的网盘。图文件的保存方式要在使用前弄清楚。

安装供自己使用的编辑器

先确定只需要 Excalidraw 编辑器，还是还要自行配置协作服务，两种部署的范围不同。要新购 VPS，可以从雨云云服务器查看 Linux 实例；重要图纸仍应另存可编辑文件。优惠码 KuZhuJi。如有消费返利，以购买页所选规格显示的金额为准。

以下命令在 Linux VPS 上执行，需要有 Docker 操作权限。先运行 docker version 和 docker compose version，确认引擎与 Compose v2 都能工作。没有安装 Docker 时，按 Docker 官方安装说明选择对应发行版；不要把其他发行版的仓库配置直接复制过来。

示例工作目录为 /opt/excalidraw，所有相对路径都以这个目录为基准。VPS_IP、SSH 用户和示例域名需要换成自己的值。端口 8084 若已被占用，只改映射左侧的宿主机端口，并同步修改访问地址。

sudo install -d -m 0750 -o "$(id -u)" -g "$(id -g)" /opt/excalidraw
cd /opt/excalidraw
umask 077

这个基础部署不挂载数据目录，因为编辑内容主要在浏览器一侧。先供自己通过 SSH 隧道使用；需要公开访问前端时，再按照项目文档配置自己的 HTTPS 反向代理。

若需要真正实时协作、跨浏览器账户存储或链接分享，应单独查对应后端与集成方案，不能仅靠给静态前端增加一个磁盘挂载实现。

将下面内容保存为 compose.yaml：

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    restart: unless-stopped
    ports:
      - "127.0.0.1:8084:80"

在工作目录启动并检查日志：

docker compose config --quiet
docker compose pull
docker compose up -d
docker compose ps
docker compose logs --tail=80

启动后按下面的步骤试用。遇到目录不可写的报错，先核对 UID 和挂载路径，不要直接改成 chmod 777。

用 SSH 隧道打开界面

示例仅把应用端口发布到 VPS 的 127.0.0.1。在自己的电脑上运行以下命令，保留终端窗口，再打开 http://127.0.0.1:8084：

ssh -N -L 8084:127.0.0.1:8084 your_ssh_user@VPS_IP

浏览器里的回环地址是自己的电脑，SSH 把请求转到 VPS。若本地同号端口被占用，可换隧道左侧端口；涉及应用外部 URL 的项目也要一起调整。管理界面无需因此开放公网端口。

把草图保存成能继续编辑的文件

先画一个“浏览器—应用—数据库”的简单示意图，再加请求方向、登录检查位置和一个失败分支。图里每个节点只表达一件事，箭头旁写清传什么，避免画成一堆没有方向的方框。

保存原生 .excalidraw 文件到自己的资料目录，再导出 PNG 或 SVG 用于文章。换一个浏览器导入原生文件，检查文本、箭头、颜色和分组仍可编辑。导出图片只适合阅读，不能代替源文件。

浏览器缓存或本地存储可能在清理数据、换设备时消失。关闭标签页后图还在，并不能证明它已被服务器备份。重要草图及时导出，并记录所属项目和日期。

要放进公开文章的 SVG 先检查是否含内部地址、账号或尚未发布的产品信息。嵌入文件里保留编辑数据时，也要考虑这些数据是否适合对外分享。

更新的是编辑器，备份的是图文件

保存 Compose 和旧镜像摘要即可重建这个前端；真正需要备份的是导出的 .excalidraw 文件。把它们放进自己的版本库或文件备份系统，并定期做一次导入检查。

更新容器后用已有文件检查中文、箭头和导出结果。若只是首页打开正常，还没验证实际作图流程。团队共享源文件时，用明确文件名和版本约定，避免多人各自编辑后互相覆盖。

安装参数和数据路径可对照Excalidraw 开发与 Docker 说明。