搬瓦工部署 Excalidraw 在线白板协作工具完整教程

Excalidraw 是一款广受欢迎的开源在线白板工具，以其独特的手绘风格著称。它可以用于绘制流程图、架构图、线框图、思维导图等各种图表，支持实时多人协作。自托管 Excalidraw 可以确保你的数据完全在自己的控制之下，特别适合团队内部使用。本文将介绍如何在搬瓦工 VPS 上通过 Docker 部署 Excalidraw 及其协作后端。

一、准备工作

1.1 系统要求

• 操作系统：Ubuntu 20.04+（推荐 Ubuntu 22.04）。
• 内存：512MB 即可运行，1GB 以上更佳。
• 磁盘空间：程序约 100MB。
• Docker：需提前安装，参考 Docker 安装教程。

1.2 架构说明

完整的 Excalidraw 自托管方案包含三个组件：

• Excalidraw：前端 Web 应用，提供绘图界面。
• Excalidraw Room：WebSocket 协作服务器，支持实时多人编辑。
• Excalidraw Storage：存储后端，用于保存和分享画板内容。

1.3 创建目录

mkdir -p /opt/excalidraw
cd /opt/excalidraw

二、Docker Compose 部署

2.1 仅部署前端（无协作功能）

如果只需要单人使用的画板工具，部署前端即可：

cat > docker-compose.yml <<'EOF'
version: '3.8'

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - "3000:80"
EOF

2.2 完整部署（含协作功能）

如果需要实时协作功能，需要同时部署协作服务器：

cat > docker-compose.yml <<'EOF'
version: '3.8'

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - "3000:80"
    environment:
      REACT_APP_WS_SERVER_URL: "https://collab.example.com"
      REACT_APP_BACKEND_V2_GET_URL: "https://store.example.com/api/v2/scenes/"
      REACT_APP_BACKEND_V2_POST_URL: "https://store.example.com/api/v2/scenes/"

  excalidraw-room:
    image: excalidraw/excalidraw-room:latest
    container_name: excalidraw-room
    restart: unless-stopped
    ports:
      - "3002:80"

  excalidraw-storage:
    image: kiliandeca/excalidraw-storage-backend:latest
    container_name: excalidraw-storage
    restart: unless-stopped
    ports:
      - "3003:8080"
    environment:
      STORAGE_URI: "/data"
    volumes:
      - ./storage-data:/data
EOF

2.3 启动服务

docker compose up -d

2.4 访问界面

浏览器访问 http://你的服务器IP:3000 即可打开 Excalidraw 画板。无需登录即可直接使用。

三、Nginx 反向代理

# Excalidraw 前端
server {
    listen 443 ssl http2;
    server_name draw.example.com;

    ssl_certificate /etc/letsencrypt/live/draw.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/draw.example.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:3000;
        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_set_header X-Forwarded-Proto $scheme;
    }
}

# 协作 WebSocket 服务器
server {
    listen 443 ssl http2;
    server_name collab.example.com;

    ssl_certificate /etc/letsencrypt/live/collab.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/collab.example.com/privkey.pem;

    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_set_header X-Forwarded-Proto $scheme;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400s;
    }
}

# 存储后端
server {
    listen 443 ssl http2;
    server_name store.example.com;

    ssl_certificate /etc/letsencrypt/live/store.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/store.example.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:3003;
        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_set_header X-Forwarded-Proto $scheme;
    }
}

四、基本使用

4.1 绘图工具

Excalidraw 提供以下绘图工具：

• 选择工具：选中和移动元素。
• 矩形/椭圆/菱形：绘制基本形状。
• 箭头/线段：绘制连接线和箭头。
• 自由画笔：自由手绘。
• 文本：添加文字标注。
• 图片：插入图片。

所有元素都呈现手绘风格，非常适合制作非正式但清晰的技术图表。

4.2 快捷键

Excalidraw 支持丰富的键盘快捷键：

• Ctrl+D：复制选中的元素。
• Ctrl+G：将选中元素编组。
• Ctrl+Shift+G：取消编组。
• Ctrl+L：锁定元素。
• Ctrl+Z / Ctrl+Y：撤销/重做。
• Alt+拖动：复制并移动。

4.3 实时协作

点击左上角的「实时协作」按钮，生成一个共享链接。将链接发送给其他人，他们打开后即可看到你的画板内容，并且所有人的编辑操作会实时同步。协作数据通过端到端加密传输，即便服务器管理员也无法查看内容。

五、导出功能

Excalidraw 支持多种导出格式：

• PNG：导出为位图图片，可自定义背景和缩放。
• SVG：导出为矢量图，适合技术文档和网页使用。
• Excalidraw 格式：导出为 .excalidraw 文件，可再次导入编辑。
• 剪贴板：直接复制为图片粘贴到其他应用。

六、组件库

Excalidraw 支持组件库（Libraries）功能，你可以将常用的图形组合保存为组件库，方便重复使用。社区提供了大量的公共组件库，包括 AWS 架构图标、网络设备图标、UML 元素等，可以直接导入使用。

七、嵌入到其他应用

Excalidraw 可以嵌入到其他 Web 应用中。自托管版本可以通过 iframe 嵌入：

<iframe
  src="https://draw.example.com"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

八、维护与更新

8.1 更新 Excalidraw

cd /opt/excalidraw
docker compose pull
docker compose up -d

8.2 备份数据

# 备份存储后端数据
tar -czf excalidraw-storage.tar.gz -C /opt/excalidraw storage-data/

8.3 查看日志

docker compose logs --tail=50 excalidraw
docker compose logs --tail=50 excalidraw-room

总结

Excalidraw 是目前最受开发者欢迎的在线白板工具之一，其手绘风格和实时协作能力让团队沟通和技术文档制作变得轻松有趣。在搬瓦工 VPS 上自托管 Excalidraw 可以确保数据隐私和访问速度。如果你还需要其他协作工具，可以参考 Mattermost 团队聊天或 Vikunja 任务管理教程。选购搬瓦工 VPS 请参考 全部方案，购买时使用优惠码 NODESEEK2026 可享受 6.77% 的循环折扣。如遇问题，可前往 搬瓦工官网 提交工单。