Excalidraw 本地部署与远程协作实现
在当今分布式团队日益普遍的背景下,如何高效地进行可视化协作成了一个关键问题。无论是产品原型讨论、系统架构设计,还是敏捷开发中的任务拆解,一张清晰直观的草图往往比冗长的文字描述更有效。
而Excalidraw正是为此诞生的一款开源神器。它以极简的手绘风格界面和强大的实时协作能力,迅速成为开发者、产品经理和技术团队的新宠。更重要的是,随着插件生态的发展,它还能结合 AI 工具实现“一句话生成流程图”的智能绘图体验。
本文将带你一步步完成:
- 使用 Docker 快速部署 Excalidraw 实例
- 配置本地实时协作环境
- 借助 Cpolar 实现公网访问
- 构建稳定可分享的远程协作空间
无需云服务器、不用复杂配置,只需几分钟,你就能拥有一个完全私有、安全可控的在线白板平台。
我们选择从 Docker 启动服务,是因为它能极大简化依赖管理,避免“在我机器上能跑”的尴尬。首先确保你的设备已安装 Docker 和 Docker Compose。
如果你使用的是 Windows 或 macOS,推荐直接下载 Docker Desktop。安装后打开终端执行:
docker --version docker-compose --version正常输出版本号即表示准备就绪。对于 Linux 用户(如 Ubuntu),可通过以下命令安装:
sudo apt update sudo apt install -y apt-transport-https ca-certificates curl gnupg lsb-release curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null sudo apt update sudo apt install -y docker-ce docker-ce-cli containerd.io # 添加用户到 docker 组,避免频繁使用 sudo sudo usermod -aG docker $USER # 安装 docker-compose sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose重启终端后验证即可。
接下来,我们通过官方提供的excalidraw/excalidraw镜像快速启动服务。这条命令几乎涵盖了所有常用场景所需的配置:
docker run -d \ --name excalidraw \ -p 3000:80 \ -e ALLOW_ANONYMOUS=y \ -e COLLABORATION=true \ excalidraw/excalidraw参数说明如下:
--d:后台运行容器
---name excalidraw:命名容器便于后续管理
--p 3000:80:将主机 3000 端口映射到容器的 80 端口(Nginx 默认端口)
--e ALLOW_ANONYMOUS=y:允许匿名访问,适合内网小团队快速协作
--e COLLABORATION=true:开启 WebSocket 协作支持
- 镜像名excalidraw/excalidraw来自 Docker Hub,自动拉取最新版
等待几秒后运行docker ps查看状态:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES ... excalidraw/excalidraw "/docker-entrypoint.…" 2 minutes ago Up 2 minutes 0.0.0.0:3000->80/tcp excalidraw只要看到Up状态,说明服务已经就位。
此时打开浏览器访问:
http://localhost:3000你会看到简洁清新的手绘风界面加载成功。试着画几个形状、添加文字或连线,操作流畅且响应迅速。
点击右上角的“Live collaboration”按钮,复制房间链接,在另一个浏览器窗口中打开,你会发现两个视图可以实时同步编辑,每个人的光标位置都清晰可见,修改即时呈现——这就是基于 WebSocket 的协作机制在发挥作用。
这一步验证了本地多用户协同工作的可行性。但目前仍局限于本机或局域网访问,外部成员无法加入。要实现真正的远程协作,我们需要打通公网链路。
常规做法是把应用部署到云服务器,并配置域名解析与 HTTPS 加密。但这对个人或小型团队来说成本高、运维复杂。
更轻量的解决方案是使用内网穿透工具,比如Cpolar。它可以将本地服务暴露为一个公网 HTTPS 地址,无需公网 IP、无需路由器设置,非常适合临时演示或长期共享。
前往 Cpolar 官网 下载对应系统的客户端并安装。完成后在终端登录账户:
cpolar login该命令会弹出浏览器页面引导授权。也可使用 Token 登录(适用于无图形界面环境):
cpolar authtoken <your_auth_token>Token 可在 Cpolar Dashboard 中获取。
最简单的测试方式是创建一条临时 HTTP 隧道:
cpolar http 3000执行后,Cpolar 会返回一个形如:
https://abc123.cpolar.cn -> http://localhost:3000的公网地址。复制此链接,在任何设备的浏览器中打开,即可访问你本地运行的 Excalidraw!
邀请同事或朋友点击进入,你们就可以开始跨地域的实时协作绘图了。这种“零配置上线”的体验,特别适合紧急会议、远程教学或异地评审等场景。
不过需要注意:免费版生成的域名是随机且临时的,24 小时后可能失效,不适合长期使用。
如果希望拥有一个固定、易记的公网地址(例如excalidraw.yourteam.cpolar.cn),建议升级至专业套餐并保留二级域名。
步骤如下:
- 登录 Cpolar Dashboard
- 进入左侧菜单「Reserved Tunnels」→「Reserve HTTPS Subdomain」
- 填写信息:
- Subdomain: 输入你喜欢的名字,如excalidraw
- Region: 推荐选择China VIP(国内访问延迟更低) - 点击Reserve,保存生成的域名(如
excalidraw.cpolar.cn)
接着创建一个配置文件excalidraw.yaml:
tunnels: excalidraw: addr: 3000 proto: http hostname: excalidraw.cpolar.cn region: cn_vip然后通过以下命令启动持久化隧道:
cpolar start -config=excalidraw.yaml excalidraw只要该进程运行着,你的 Excalidraw 就会一直对外提供服务,地址不变、永不掉线。
为了进一步提升稳定性,你可以将其注册为系统服务(Linux 使用 systemd,macOS 使用 launchd),实现开机自启。
当多人通过公网链接加入同一个房间时,每个人的操作都会实时广播给其他参与者。你可以看到对方的光标移动、正在输入的文字、拖动的图形,甚至支持内置聊天功能,方便边画边聊。
虽然 Excalidraw 本身不内置 AI 生成功能,但它的开放性让我们可以轻松集成外部能力。
方案一:调用大模型 API 自动生成图表
设想这样一个场景:你说一句“帮我画一个微服务架构图,包含用户认证、订单服务和数据库”,系统就能自动生成对应的草图。
实现路径如下:
1. 编写脚本调用 OpenAI 或通义千问 API
2. 输出符合 Excalidraw JSON 格式的元素数据
3. 在 Excalidraw 中选择Import→ 粘贴 JSON 数据
很快,一张初步架构图就呈现在白板上了。虽然细节还需手动调整,但大大缩短了从想法到可视化的路径。
方案二:嵌入 Mermaid 流程图
Excalidraw 支持 Mermaid 图表渲染。你可以在画布中插入代码块,语言设为mermaid,然后编写如下代码:
graph TD A[用户登录] --> B{验证身份} B -->|成功| C[进入主页] B -->|失败| D[提示错误]保存后,系统会自动将其渲染为矢量流程图,并可与其他手绘元素自由组合。这种方式非常适合撰写技术文档或做系统讲解。
整个过程走下来,你会发现这套方案的核心优势在于“极简+灵活”:
- 部署简单:一条
docker run命令搞定核心服务 - 协作顺畅:开箱即用的实时同步机制
- 公网可达:借助 Cpolar 实现一键穿透
- 长期可用:固定域名 + 自动重启保障稳定性
- 可扩展性强:支持与 AI、Mermaid、插件生态联动
更重要的是,这一切都不依赖第三方 SaaS 平台,数据始终掌握在自己手中,适合对隐私敏感的企业或团队。
Excalidraw 不只是一个绘图工具,它还原了人类最原始的表达方式——涂鸦。而在数字化时代,这种看似简单的形式反而成了激发创意、促进沟通的最佳载体。
无论你是架构师在梳理系统边界,产品经理在勾勒原型,还是教师在讲解算法逻辑,都可以用这支虚拟笔,把抽象思维具象化。
现在,就动手部署一个属于你的 Excalidraw 实例吧!叫上伙伴们一起头脑风暴,让每一次灵感碰撞都能被看见。
🎨 愿每一份创意都不被网络所限,
🌍 愿每一场远程协作,都如面对面般自然。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考