本地部署Excalidraw手绘白板工具

本地部署 Excalidraw 手绘白板工具

你有没有遇到过这样的场景：在一次紧急的远程会议中，急需画一张架构图来解释系统流程，却只能靠口头描述？或者想快速勾勒一个产品原型，却发现专业设计工具太重、太复杂？这时候，一个轻量、直观又支持协作的白板工具就显得尤为珍贵。

Excalidraw 正是为此而生。它是一款开源、极简风格的虚拟手绘白板，界面自带“草图感”，让人一眼就觉得轻松无压力。无论是画流程图、系统架构、UI 线框图，还是做头脑风暴笔记，它的自由拖拽和自然笔触都能让表达更流畅。更重要的是，它完全可以在本地私有化部署——不依赖云端服务，数据留在自己手里，安全又可控。

借助 Docker，我们甚至不需要编译源码或配置前端环境，几分钟内就能在本地启动一个专属实例。下面，我将带你一步步完成从零到可用的全过程，并分享一些实用优化技巧，帮你把 Excalidraw 真正变成团队协作中的生产力利器。

快速启动：用 Docker 跑起你的第一个实例

最简单的方式，就是直接使用官方提供的 Docker 镜像excalidraw/excalidraw。这个镜像是基于 Nginx 的静态服务打包而成，包含了完整的前端应用，开箱即用。

运行这条命令，即可在后台启动容器：

docker run -d \ --name excalidraw \ -p 3002:80 \ -e NODE_ENV=production \ excalidraw/excalidraw:v1.0.0

几个关键点值得留意：
--d表示后台运行，避免占用终端；
---name excalidraw给容器命名，方便后续管理（比如重启、查看日志）；
--p 3002:80将主机的 3002 端口映射到容器的 80 端口，因为容器内运行的是 Nginx，默认监听 80；
--e NODE_ENV=production设置为生产模式，能关闭开发调试信息，提升性能与响应速度；
- 使用v1.0.0版本标签而非latest，可以避免因自动更新导致的行为变化，更适合稳定部署。

执行后，你可以通过docker ps查看容器是否正常运行。如果状态是Up，说明服务已经就绪。

此时打开浏览器访问 http://localhost:3002，就能看到干净清爽的 Excalidraw 界面了——没有广告、没有登录墙，直接开始创作。

进阶部署：用 docker-compose 实现灵活管理

虽然单条docker run命令足够快捷，但如果你打算长期使用，或者未来可能扩展功能（比如多人协作），强烈建议改用docker-compose.yml文件来管理服务。

先创建一个独立目录用于部署：

mkdir excalidraw-deploy && cd excalidraw-deploy

然后创建docker-compose.yml文件：

version: '3.8' services: excalidraw: image: excalidraw/excalidraw:v1.0.0 container_name: excalidraw ports: - "3002:80" environment: - NODE_ENV=production - ALLOW_SAVE_URL=true - FIREBASE_DATABASE_NAME= restart: unless-stopped

这里有几个值得注意的配置细节：
-ALLOW_SAVE_URL=true允许将画布内容编码进 URL 参数中。这意味着你可以复制当前页面链接发给别人，对方打开就能看到一模一样的图——非常适合临时分享草图。
-FIREBASE_DATABASE_NAME=显式留空，表示不连接任何远程数据库，所有操作仅限本地会话，符合私有化部署的安全需求。
-restart: unless-stopped是个贴心设置：即使服务器重启或容器崩溃，Docker 也会自动拉起服务，保障可用性。

保存文件后，执行：

docker compose up -d

服务就会以后台模式启动。相比手动敲命令，这种方式更容易维护，也便于后续添加新服务（比如协作后端、反向代理等）。

配置优化：根据实际场景调整运行参数

默认配置适合大多数情况，但在真实环境中，往往需要做一些适配和增强。

修改端口映射

如果你本地的3002端口已被占用，只需修改ports配置即可：

ports: - "8080:80"

之后通过http://localhost:8080访问即可。这种灵活性使得多个内部工具共存成为可能。

挂载自定义资源目录

如果你想在白板中加入公司 Logo、定制图标集或特殊字体，可以通过挂载 volume 实现。

例如，在项目根目录下创建custom-assets文件夹：

mkdir custom-assets

然后在 compose 文件中添加挂载：

volumes: - ./custom-assets:/usr/share/nginx/html/custom

这样就可以通过/custom/your-logo.svg这样的路径引用外部资源。结合 Nginx 静态资源配置，还能实现主题切换等功能。

反向代理 + HTTPS（面向公网部署）

当你希望将 Excalidraw 暴露给团队成员甚至客户时，推荐通过 Nginx 做反向代理，并启用 HTTPS。

假设你有一个域名whiteboard.yourcompany.com，Nginx 配置如下：

server { listen 80; server_name whiteboard.yourcompany.com; return 301 https://$host$request_uri; } server { listen 443 ssl http2; server_name whiteboard.yourcompany.com; ssl_certificate /etc/nginx/ssl/whiteboard.crt; ssl_certificate_key /etc/nginx/ssl/whiteboard.key; location / { proxy_pass http://127.0.0.1:3002; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }

注意最后两行：WebSocket 协议升级头必须正确传递，否则会影响未来的实时协作功能。这也是为什么不能简单用静态 CDN 托管的原因之一。

配合 Let’s Encrypt 自动签发证书后，你的白板不仅安全，还拥有专业的访问入口。

使用体验：简洁却不简单的绘图能力

进入 http://localhost:3002 后，你会被其极简的设计打动。没有冗余菜单，没有复杂的图层面板，只有画笔、形状和文字工具栏。

你可以：
- 拖拽绘制矩形、圆形、箭头等基础图形；
- 开启“手绘模式”获得更真实的笔迹抖动效果；
- 添加便签、自由线条、连接线，构建清晰逻辑关系；
- 利用对齐辅助线和分组功能整理复杂图表；
- 直接双击文本进行编辑，支持基本样式设置。

导出方面也非常友好：
- 点击右上角「Export」按钮可导出 PNG 或 SVG 图像，适用于文档嵌入或汇报展示；
- “Copy as link” 功能会把整个画布状态编码进 URL，分享即可见（前提是开启了ALLOW_SAVE_URL）；
- 也可以导出.excalidrawJSON 文件，保留所有图层信息，供日后继续编辑。

不过要提醒一点：由于当前部署未接入持久化存储，所有数据都保存在浏览器本地或 URL 中。一旦关闭页面或清空缓存，未导出的内容可能会丢失。因此，重要成果一定要及时导出备份。

进阶功能：开启多人协作与数据持久化

目前的部署模式是“单人本地使用”。如果你们团队经常需要远程协同画图，比如一起评审架构方案或设计交互流程，那么可以进一步启用实时协作功能。

方案一：使用 Firebase 快速实现同步（适合小团队）

Firebase 是最简单的协作接入方式，尤其适合不想自己运维后端的小团队。

步骤如下：
1. 前往 Google Firebase 注册并创建新项目；
2. 在 Firestore Database 中启用数据库（选择测试模式以简化权限）；
3. 获取项目 ID（如my-whiteboard-1234）；

然后更新docker-compose.yml中的环境变量：

environment: - NODE_ENV=production - FIREBASE_DATABASE_NAME=my-whiteboard-1234 - FIREBASE_COLLECTION=rooms

重启服务：

docker compose down && docker compose up -d

完成后，用户可在页面底部输入房间名称（如design-meeting），点击“Join room”即可进入协作空间。多个用户同时编辑时，彼此的光标和修改都会实时同步。

⚠️ 注意：虽然 Firebase 支持认证和规则控制，但在测试模式下任何人都可读写数据。正式使用前务必配置安全规则，限制访问范围。

方案二：自建协作服务器（企业级私有化部署）

对于注重数据合规性和隐私保护的企业，推荐自行部署excalidraw-room-server。

这是一个基于 Node.js + WebSocket 的后端服务，支持 Redis 或 MongoDB 存储会话状态，能够完全掌控数据流向。

典型架构如下：

graph LR A[客户端浏览器] --> B[Nginx 反向代理] B --> C[Excalidraw 前端容器] B --> D[Room Server 后端] D --> E[(Redis/MongoDB)]

部署流程包括：
1. 克隆excalidraw-room-server仓库；
2. 配置数据库连接和 CORS 白名单；
3. 构建并运行服务（可用 PM2 或 Docker 容器化）；
4. 修改前端环境变量指向自建 server 地址。

这种方式虽然初期投入较大，但换来的是全链路可控、审计合规、高可用的协作平台，特别适合金融、医疗等行业。

总结与思考：为什么你应该拥有一个私有白板？

Excalidraw 的魅力，不仅在于它的“手绘风”带来的亲和力，更在于它对“低门槛表达”的极致追求。它不像 Figma 那样强大却复杂，也不像 Miro 那样功能繁多却容易分散注意力。它专注于一件事：让你快速把脑子里的想法可视化。

而通过 Docker 本地部署，你获得的不仅是工具本身，更是一种工作方式的自主权：
- 不受网络限制，离线也能用；
- 数据不出内网，满足安全审计要求；
- 可定制、可集成，未来还能对接 AI 自动生成图表（已有第三方插件支持自然语言转草图）；
- 成本几乎为零，一台旧笔记本就能跑起来。

无论你是独立开发者用来记录技术思路，还是产品经理组织需求讨论，抑或是设计师进行原型共创，Excalidraw 都能成为一个安静却高效的协作者。

下次当你又要对着空白文档发呆时，不妨打开本地的 Excalidraw，随手画几笔——有时候，一张粗糙的草图，胜过千言万语。