Excalidraw vs Miro：谁才是开源时代的白板之王？

Excalidraw vs Miro：谁才是开源时代的白板之王？

在分布式团队成为常态的今天，一场技术会议可能涉及五地八人的远程协作。会议室里不再有粉笔灰飞扬的白板，取而代之的是浏览器中跳动的光标与实时更新的图形元素。然而，当我们在 Miro 上拖拽第 17 个模板卡片时，是否曾想过——我们到底是在设计系统架构，还是在学习如何使用一款复杂的 SaaS 工具？

正是在这种背景下，Excalidraw 像一股清流浮现出来：一个打开即用、无需培训、连图标都懒得设计的“极简白板”，却悄然在 GitHub 上收获超 4 万星标，被 Kubernetes、React 官方文档纳入推荐工具链。它不提供花哨的 UI 组件库，也不集成 Jira 或 Slack，但它解决了更本质的问题——如何让协作回归内容本身。

这背后的技术哲学值得深挖。我们可以从一次典型的架构评审说起：三位工程师同时接入一个加密白板，一人用颤抖的手绘线条勾勒出微服务拓扑，另一人输入自然语言指令“加一个 Redis 缓存集群”，AI 插件随即生成带标注的节点组；网络突然中断三分钟，恢复后所有变更自动合并，无人察觉异常。整个过程没有弹窗提示，没有加载动画，甚至没人注意到他们在使用的是一款“开源项目”。

手绘风格不只是美学选择

Excalidraw 最直观的特点是那仿佛小学生课堂笔记般的粗糙线条。但这并非简单的视觉滤镜，而是一套完整的客户端渲染策略。其核心在于rough.js库的应用——通过 Perlin 噪声算法对每条直线施加随机偏移，模拟人类肌肉微颤导致的笔迹抖动。

const renderLine = (x1, y1, x2, y2) => { const path = []; const segments = 10; for (let i = 0; i < segments; i++) { const t = i / segments; const noise = perlinNoise(t * 5) * roughness; // roughness 默认 1.5 path.push([ lerp(x1, x2, t) + noise, lerp(y1, y2, t) + noise * 0.3 ]); } return drawPathSmoothly(path); };

这种计算完全在前端完成，服务器只接收原始坐标数据。这意味着即使部署在低配 VPS 上，也能支撑高并发绘图请求。更重要的是，这种“去完美主义”的设计降低了心理门槛——没有人会因为画得不够规整而犹豫下笔，反而激发了更自由的思维表达。

相比之下，Miro 的矢量渲染追求工业级精度，每一根线都要对齐网格、自动吸附、支持多级撤销。这适合制作交付物级别的图表，但在快速头脑风暴阶段，恰恰是这些“智能辅助”成了干扰项。Excalidraw 的设计理念很明确：前期草图越潦草，后期创意越丰沛。

端到端加密：把密钥藏在链接里

很多团队放弃商业白板的根本原因不是功能不足，而是信任缺失。当你绘制公司核心系统的数据库分片架构时，真的愿意让它经过第三方服务器吗？Miro 的隐私政策明确指出：“免费账户的数据可能用于产品改进。” 而 Excalidraw 的解决方案堪称巧妙：

共享链接长这样：

https://excalidraw.com/#room=abc123xyz,AES:256-GCM:abcdef...key...

其中AES:256-GCM:...部分就是解密密钥，由访问密码通过 PBKDF2 派生而来。关键点在于——服务端根本不存储密钥。所有白板数据以密文形式存入数据库或内存，即使攻击者获取完整数据备份，也无法还原内容。

这一机制依赖于现代浏览器的 Web Crypto API，在beforeSend阶段完成加密：

socket.on('send-update', (data) => { const encrypted = window.crypto.subtle.encrypt( { name: 'AES-GCM', iv }, encryptionKey, JSON.stringify(data) ); relayToOthers(encrypted); // 中继的是密文 });

这不仅是安全增强，更是一种权限模型革新。传统做法是“先登录，再授权”，而 Excalidraw 是“持钥即通行”。你可以将链接发给外部顾问，到期后只需关闭房间即可废止访问权，无需操作用户管理系统。对于临时协作场景，这种无状态设计极大简化了流程。

实时协作的轻量级实现

很多人以为实时协同必须依赖复杂的状态同步协议，但 Excalidraw 证明了轻量级 OT（Operational Transformation）足以应对绝大多数场景。它的数据模型极其简单：

{ "type": "excalidraw", "version": 2, "source": "excalidraw.com", "elements": [ { "id": "A1", "type": "rectangle", "x": 100, "y": 200, "width": 150, "height": 80, "strokeColor": "#000", "version": 12 }, { "id": "B2", "type": "arrow", "points": [[0,0], [50,-30]], "startBinding": { "elementId": "A1" }, "version": 5 } ] }

每个元素独立版本控制，更新时仅发送增量 diff。WebSocket 消息体通常小于 200 字节，即便在移动网络下也能保持流畅。更聪明的是，它采用了“最后写入优先 + 客户端预测”的组合策略：

• 当两个用户同时修改同一元素时，以时间戳较新者为准
• 本地操作立即渲染，不必等待服务端确认（乐观更新）
• 冲突发生时通过 UI 高亮提示，而非阻塞性弹窗

这种方式牺牲了严格的因果一致性，换来了极致的响应速度。实测数据显示，在 300ms RTT 的网络条件下，平均操作延迟低于 150ms，远优于多数商业产品。

反观 Miro 使用的是基于 CRDT 的全量状态同步，能保证强一致性，但也带来了更高的内存占用和初始化延迟。对于需要精确版本控制的正式文档或许必要，但对于一场正在进行的技术讨论，快比准更重要。

可嵌入性：从工具到基础设施

真正让 Excalidraw 脱颖而出的，是它的组件化能力。它不是一个孤立应用，而是一个可编程的绘图引擎。通过 npm 包@excalidraw/excalidraw，你可以把它塞进任何 React 项目：

import { Excalidraw } from "@excalidraw/excalidraw"; function EmbeddedWhiteboard({ onSave }) { const [scene, setScene] = useState(); return ( <div style={{ height: '600px', border: '1px solid #ccc' }}> <Excalidraw initialData={scene} onChange={(elements) => setScene({ elements })} onPointerUpdate={({ pointer }) => { // 实时广播鼠标位置，实现协作者光标追踪 socket.emit('cursor-move', pointer); }} isCollaborating={true} UIOptions={{ deviceButtons: false, editorButton: false }} /> </div> ); }

某金融科技公司在其内部知识库中集成了 Excalidraw，允许员工直接在 Wiki 页面内绘制交易流程图，并将.excalidraw文件随 Markdown 一同提交至 Git。由于本质上是文本 JSON，Git 可以正常 diff 和 merge，彻底打通了“设计—评审—归档”闭环。

而 Miro 虽然也提供 Embed 功能，但仅限只读展示，且无法自定义交互逻辑。生态封闭的结果就是，你永远只能在 Miro 里做事，而不能让其他系统拥有 Miro 的能力。

自托管不只是为了省钱

企业选择自建 Excalidraw 服务，往往不是出于成本考量（毕竟 Miro 团队版人均每月不到一杯咖啡钱），而是为了掌控数据流向。一套典型的企业部署架构如下：

[Client] ↓ HTTPS [Nginx + Auth Gateway] ↓ (JWT validated) [Excalidraw Frontend (Static)] ↓ WSS [excalidraw-room Service] ↙ ↘ [Redis] [PostgreSQL Audit Log]

关键组件excalidraw-room是一个轻量 Node.js 服务，基于 WebSocket 实现房间管理。启动命令简洁到令人感动：

docker run -d \ -p 443:443 \ -e CERT_DOMAIN=whiteboard.company.com \ -e JWT_SECRET=$COMPANY_SSO_SECRET \ excalidraw/excalidraw-room

配合 Nginx 前置身份验证，即可实现与企业 OAuth2 系统对接。所有操作日志写入 PostgreSQL，满足等保三级审计要求。相比 Miro 提供的标准化 SaaS 服务，这种模式虽然增加了运维负担，但换来的是真正的数据主权。

更有意思的是社区创新。有人开发了Mermaid-to-Excalidraw插件，允许在白板中键入：

graph LR A[Client] --> B[API Gateway] B --> C[Auth Service] B --> D[Order Service]

回车后自动生成对应架构图。这类扩展无需修改主干代码，通过插件系统动态加载，形成了“核心稳定、生态活跃”的良性循环。

AI 集成的克制之美

当所有工具都在狂卷 AI 生成功能时，Excalidraw 的做法显得格外冷静。它的 AI 支持不是内置特性，而是一个实验性插件接口：

// ai-plugin.ts export const generateFromPrompt = async (prompt: string) => { const response = await fetch('/api/ai-proxy', { method: 'POST', body: JSON.stringify({ prompt }) }); return response.json(); // { elements: [...], appState: {...} } };

重点在于这个/api/ai-proxy——它可以指向 OpenAI，也可以指向公司内网部署的 LLM 网关。这意味着敏感提示词永远不会离开企业边界。某自动驾驶公司就利用该机制，训练了一个专用模型来解析“感知-决策-控制”相关术语，生成符合行业惯例的系统框图。

相比之下，Miro 的 AI 功能深度绑定其云服务，用户无法选择模型供应商或部署方式。在 AI 伦理日益受关注的当下，这种“黑箱式智能”正逐渐引发警惕。

场景决定胜负

回到最初的问题：Excalidraw 能否挑战 Miro 的地位？答案是——它根本不想成为 Miro。

这两款工具服务于不同的协作阶段：

Excalidraw 的胜利不在于功能更多，而在于做减法做到极致。它不提供甘特图、投票贴纸、视频通话窗口，因为它清楚自己的定位：一个专注“可视化思考”的数字画布。

未来已现端倪。随着 AI 编程助手普及，开发者越来越倾向于“代码即设计”——把架构图当作可执行的配置文件来对待。.excalidraw文件本身就是结构化数据，天然适合纳入 CI/CD 流水线。想象一下，PR 提交时自动比对前后架构差异，或通过自然语言指令批量重构模块布局，这才是下一代协作工具的模样。

Excalidraw 或许不会取代 Miro，但它正在重新定义起点：当所有重量级平台都在向上堆叠功能时，有人选择向下扎根，回归协作的本质——让人与人的思想连接更加直接、透明、不受工具束缚。而这，或许正是开源精神最动人的实践之一。