Excalidraw本地部署与远程协作实现
Excalidraw本地部署与远程协作实现
在团队协作日益依赖数字工具的今天，一张随手可画、即时共享的手绘白板，反而成了最能激发创意的“原始武器”。Excalidraw 正是这样一款让人眼前一亮的开源虚拟白板——它用轻松随意的手绘风格，打破了技术文档冰冷刻板的印象。流程图、系统架构、产品原型，在这里都变得生动有趣。
更关键的是，Excalidraw 不只是个单机玩具。通过容器化部署和网络穿透技术，它可以轻松变身成一个支持多人实时协作、跨地域访问的私有白板平台。结合 AI 插件后，甚至能通过一句话描述自动生成草图，效率翻倍。
本文将带你从零开始，基于 Docker 镜像完成 Excalidraw 的本地部署，并一步步配置局域网共享、持久化存储、WebSocket 协作服务，最终通过内网穿透实现公网远程访问。整个过程无需复杂开发，适合开发者、产品经理、设计师等各类角色上手操作。
什么是Excalidraw？
Excalidraw 是一个开源的、手绘风格的在线白板应用，专为技术交流与创意表达而设计。它的核心魅力在于“极简却不简单”：界面干净，操作直观，但背后却有着强大的扩展能力和社区生态。
主要特性包括：
- ✅ 自然手绘风渲染：所有图形自动呈现类似手写的效果，视觉更亲切，减少“完美主义”压力
- ✅ 纯前端运行：默认模式下完全离线可用，不依赖服务器也能使用
- ✅ 实时协作能力（需后端支持）：多用户可同时编辑同一块画布，光标位置、修改内容实时同步
- ✅ 插件系统丰富：支持 Mermaid 流程图、LaTeX 数学公式、AI 生图等多种增强功能
- ✅ 数据自主可控：本地部署时，所有内容均保留在你自己的设备或服务器中
项目源码托管于 GitHub：https://github.com/excalidraw/excalidraw
💡 小知识：名字 “Excalidraw” 源自亚瑟王传说中的神剑 Excalibur，寓意“赋予你绘图的神兵利器”。
如今，Excalidraw 已被广泛应用于敏捷回顾会、系统设计讨论、教学演示、产品原型草稿等场景。许多技术博主也用它来制作配图，因其独特的风格极具辨识度。
为什么选择本地部署？
虽然官方提供了在线版本 https://excalidraw.com，但对于企业或团队来说，直接使用公共服务存在几个明显短板：
| 问题 | 实际影响 |
|---|---|
| 数据隐私不可控 | 敏感的技术架构图上传至第三方服务器，存在泄露风险 |
| 协作依赖外网 | 团队成员必须联网才能协同，断网即中断工作流 |
| 功能受限 | 官方版禁用部分高级插件（如 AI 扩展），无法自定义集成 |
| 内容易丢失 | 关闭浏览器或清缓存后，未导出的内容可能永久消失 |
相比之下，本地部署 + 自建服务 的方案优势显著：
- 安全可控：所有数据停留在内部网络或自有设备上
- 灵活定制：可自由启用插件、调整界面、集成内部系统
- 持续可用：配合持久化存储和固定域名，打造长期稳定的协作入口
- 成本低廉：一台普通 PC 或低配云主机即可承载数十人协作
更重要的是，借助 Docker 和内网穿透工具，整个部署过程可以做到“一键启动 + 快速暴露”，几乎没有学习门槛。
环境准备：安装Docker（推荐方式）
我们强烈建议使用 Docker 来部署 Excalidraw。原因很简单：环境隔离、部署快捷、升级方便。一条命令就能拉起完整服务，避免各种依赖冲突。
Windows 用户安装步骤
-
前往官网下载 Docker Desktop：
-
安装完成后启动程序，任务栏应出现鲸鱼图标，表示 Docker 引擎已就绪
-
打开终端（CMD / PowerShell / Terminal），执行以下命令验证是否成功：
docker --version
预期输出示例：
Docker version 24.0.7, build afdd53b
✅ 出现版本号说明安装成功！
📝 提示：Mac 用户可通过 Homebrew 安装：
brew install docker；Linux 用户可使用sudo apt install docker.io或yum install docker-ce。
确保 Docker 正常运行后，就可以进入下一步了。
使用官方镜像快速部署Excalidraw
Excalidraw 官方提供了 Docker 镜像，托管在 Docker Hub 上，镜像名为 excalidraw/excalidraw。
只需一条命令即可启动服务：
docker run -d \
--name excalidraw \
-p 5000:80 \
excalidraw/excalidraw
📌 参数解释：
-d：后台运行容器，不占用当前终端--name excalidraw：为容器命名，便于后续管理（如停止、删除）-p 5000:80：将宿主机的 5000 端口映射到容器的 80 端口（Nginx 默认端口）excalidraw/excalidraw：指定要运行的镜像名称
首次运行时，Docker 会自动从远程仓库拉取镜像（约 50MB），之后每次启动都非常迅速。
验证本地服务是否启动成功
打开浏览器，访问：
http://localhost:5000
你应该能看到 Excalidraw 的主界面正常加载，可以自由绘制矩形、箭头、文字，拖动元素也没有卡顿。
🎉 恭喜！你已经拥有了一个本地运行的 Excalidraw 实例！
此时服务仅限本机访问。如果你想让同事在同一局域网内接入，还需要进一步配置。
实现局域网内共享访问
为了让团队成员在办公室或家庭网络中共同使用这块白板，我们需要让服务对局域网开放。
第一步：获取本机局域网 IP 地址
在命令行中执行：
ipconfig
找到 “IPv4 地址” 字段，通常是 192.168.x.x 或 10.x.x.x 格式。
例如：
IPv4 地址 . . . . . . . . . . . . : 192.168.31.100
记下这个地址。
第二步：其他设备访问测试
确保你的手机或其他电脑连接的是同一个 Wi-Fi 网络。
在任意设备的浏览器中输入：
http://192.168.31.100:5000
如果页面正常加载，说明局域网共享已生效。
⚠️ 注意：此时所有人看到的是独立实例，除非启用 WebSocket 后端，否则无法实现真正的实时协作。也就是说，你在 A 设备上画的内容，B 设备不会自动刷新。
这只是一个“静态共享”，接下来我们要让它真正“活起来”。
搭建持久化存储以保留数据
目前的服务是临时性的。一旦你删除容器或重启 Docker，之前保存的所有画布记录都会丢失。
解决办法是挂载一个本地目录作为持久化卷，将数据写入宿主机磁盘。
创建本地存储路径
比如在 D 盘新建文件夹：
D:\excalidraw-data
也可以放在任意你喜欢的位置，只要路径正确即可。
重新运行容器并挂载数据卷
先停用并移除旧容器：
docker stop excalidraw
docker rm excalidraw
然后运行新容器，加入 -v 参数进行目录映射：
docker run -d \
--name excalidraw \
-p 5000:80 \
-v D:/excalidraw-data:/usr/share/nginx/html/excalidraw/data \
excalidraw/excalidraw
📌 说明：
-v D:/excalidraw-data:/usr/share/nginx/html/excalidraw/data
表示将宿主机的D:/excalidraw-data映射到容器内的/usr/share/nginx/html/excalidraw/data路径
该路径是官方镜像中用于存放导出文件和本地缓存的关键目录。通过绑定此路径，即使容器被销毁重建，历史数据依然保留。
从此以后，你可以放心地把重要图表存下来，再也不怕“一关机就归零”。
启用协作功能：集成WebSocket服务器
真正的多人协作需要一个 WebSocket 服务来实现实时消息推送。Excalidraw 官方提供了一个独立的后端项目：excalidraw-room，基于 Node.js 编写。
不过对于大多数用户而言，更简单的做法是使用社区维护的集成版镜像，它已经内置了 Nginx + WebSocket 代理，开箱即用。
推荐方案：使用 thewtex/excalidraw 镜像
这是一个广受好评的增强版镜像，集成了协作功能：
docker run -d \
--name excalidraw-collab \
-p 5000:80 \
-p 443:443 \
thewtex/excalidraw:latest
📌 新增端口映射：
5000:80：HTTP 访问端口443:443：HTTPS 及 WebSocket 使用的安全端口
启动后，访问：
http://<your-ip>:5000
点击右上角的「Live collaboration」按钮，输入房间名（如 team-meeting），即可创建一个协作会话。
其他人只要访问相同链接并加入同一房间，就能看到彼此的光标、实时编辑内容，真正做到“边聊边画”。
🔔 注意事项：
- 如果你在局域网使用，请确保所有设备都能访问主机 IP
- 若出现连接失败，检查防火墙是否放行了 443 端口
公网远程访问：通过内网穿透实现跨地域协作
现在你的 Excalidraw 已经支持局域网协作，但如果想在家访问公司部署的白板，或者邀请外地客户参与头脑风暴，就需要让它走出内网。
这时就要用到 内网穿透 技术。我们推荐使用 Cpolar，因为它配置简单、支持 HTTPS、有中文界面，非常适合非专业运维人员。
Windows 下安装 Cpolar
- 前往官网下载客户端：https://www.cpolar.com
- 注册账号并登录
- 安装后启动服务，默认会在
http://localhost:9200提供 Web 控制台
配置 HTTP 隧道
打开浏览器访问：
http://localhost:9200
进入「隧道管理」→「创建隧道」：
| 配置项 | 设置值 |
|---|---|
| 隧道名称 | Excalidraw-Public |
| 协议类型 | HTTP |
| 本地地址 | 5000 |
| 域名类型 | 随机域名（免费） |
| 地区节点 | China VIP |
点击「创建」后，系统会生成一个公网 HTTPS 地址，例如：
https://1a2b3c4d5e.ngrok-free.io
将这个链接分享给任何人，他们都可以通过浏览器直接访问你的 Excalidraw 实例！
✅ 支持移动端、平板、PC 多端接入，真正实现“随时随地协同创作”。
💡 小技巧：你可以在会议室电视上投屏该网址，现场扫码加入，立刻开启一场可视化会议。
固定公网地址，打造专属协作平台
前面使用的随机域名有个缺点：每次重启 Cpolar 服务后都会变化，不适合长期推广使用。
好在 Cpolar 支持绑定固定二级子域名，让你拥有一个稳定、易记的专属入口。
步骤一：预留固定子域名
- 登录 Cpolar 仪表盘
- 进入「预留」→「保留二级子域名」
- 输入你喜欢的名字，如
mywhiteboard - 地区选择 China VIP
- 点击「保留」
成功后你会获得一个永久地址：
https://mywhiteboard.cpolar.cn
步骤二：更新隧道配置
回到 Cpolar 客户端或 Web 控制台，编辑原有隧道：
| 配置项 | 修改为 |
|---|---|
| 域名类型 | 二级子域名 |
| 子域名 | mywhiteboard |
| 地区 | China VIP |
点击「更新」后，公网地址将变为固定形式。
从此以后，无论何时重启服务，只要记住 https://mywhiteboard.cpolar.cn，就能直达你们团队的专属手绘白板平台。
你可以把这个链接加入企业微信、钉钉群公告，甚至印在名片上：“有问题？来我的白板聊聊。”
这种高度集成的设计思路，正引领着轻量级协作工具向更可靠、更高效的方向演进。Excalidraw 不只是一个绘图工具，更是现代团队沟通方式的一种进化——当抽象的想法被一笔一划勾勒出来，理解的成本就降低了，创造力也就释放了。
不妨试试结合 AI 插件（如 Excalidraw AI Sketch Generator），输入“画一个微服务架构图”，瞬间生成初始草图，再手动优化——这才是未来工作流的模样！
赶快动手部署属于你和团队的 Excalidraw 协作空间吧！
更多推荐
28
0- 0
已为社区贡献4条内容
所有评论(0)