Excalidraw支持AR预览未来展望-开发者社区

Excalidraw 与 AR 预览：从手绘草图到空间协作的跃迁

在一场远程架构评审会议中，团队成员围坐在虚拟白板前，讨论着系统拓扑。一人提出：“如果我们能把这张图‘放’到会议室桌面上，像投影一样看着它，是不是更容易看出组件之间的比例关系？”——这个看似简单的设想，正逐渐成为可能。

随着 Web 技术、AI 和增强现实（AR）的交汇演进，传统二维协作工具正在经历一场静默而深刻的变革。Excalidraw 作为开源社区中极具代表性的手绘风格白板工具，早已超越了“画图”的范畴，成为技术团队表达抽象概念的核心媒介。而当它与 AR 结合，我们看到的不再只是界面升级，而是一种全新的空间化协作范式的萌芽。

手绘背后的技术哲学：不只是“看起来随意”

Excalidraw 最初打动开发者的地方，并非功能繁多，而是那种“像人亲手画出来”的质感。这种视觉风格并非装饰性设计，而是一次对数字协作心理门槛的精准干预：机械规整的图形容易让人产生“必须完美”的压力，而略带抖动的手绘线条则释放了创造性表达的空间。

其核心技术依赖于一个名为rough.js的轻量级渲染库。该库不直接绘制标准几何图形，而是将每条直线或曲线拆解为多个微小线段，并在路径上施加可控的随机扰动。例如，一条本应笔直的线，在rough.js的处理下会呈现出轻微弯曲和波动，模拟人类手绘时肌肉微颤的效果。

const rc = rough.svg(svg); const rect = rc.rectangle(10, 10, 100, 50, { stroke: 'black', strokeWidth: 2, fill: 'none', bowing: 2, roughness: 3 }); svg.appendChild(rect);

这里的bowing控制线条的整体弧度变化，roughness则决定局部抖动的强度。这两个参数共同构成了“手绘感”的调参空间。实践中我们发现，roughness值在 2–4 之间最为平衡：过低则失去手工特征，过高可能导致图形识别困难，尤其在箭头连接或小字号文本场景中。

值得注意的是，这种渲染方式完全基于 Canvas 或 SVG，无需额外图像资源，也保证了跨平台一致性。更重要的是，它把“不完美”变成了可复现的技术能力——这正是 Excalidraw 能在头脑风暴、教学演示等非正式场景中脱颖而出的关键。

多人协作如何做到“无感同步”？

实时协作是现代白板工具的生命线。Excalidraw 在这一层面采取了灵活策略：官方版本使用 Firebase 实现状态同步，而社区项目则越来越多地转向Yjs——一种基于 CRDT（无冲突复制数据类型）的协同编辑框架。

CRDT 的优势在于其天然支持离线操作与最终一致性。每个客户端维护本地副本，任何修改都会生成带有上下文信息的操作指令，通过 WebSocket 广播给其他节点。由于数据结构本身具备合并逻辑，即使多个用户同时修改同一元素，系统也能自动消解冲突，无需中央服务器裁定。

import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; const doc = new Y.Doc(); const provider = new WebsocketProvider('wss://demos.yjs.dev', 'excalidraw-demo', doc); const elements = doc.getArray('elements'); elements.observe(event => { redrawCanvas(elements.toArray()); }); elements.push([{ type: 'rectangle', x: 100, y: 100, width: 80, height: 40, id: generateId() }]);

上述代码展示了 Yjs 如何以声明式方式管理共享状态。Y.Array是一个分布式数组，任何push、insert或delete操作都会被自动同步。相比传统的 OT（操作变换）算法，CRDT 更适合复杂对象结构，且能更好地处理网络中断后的恢复。

但在实际部署中，仍需注意性能边界。频繁的小幅更新（如连续拖动元素）可能引发大量消息传递，导致 UI 卡顿。一种常见优化是引入“变更节流”机制：将短时间内多次更新聚合成一次批量提交，既减少通信开销，又不影响用户体验。

此外，权限控制也不容忽视。虽然 Yjs 提供基础的身份标识机制，但企业级应用通常需要结合 JWT 或 OAuth 进行细粒度访问管理，防止未授权用户篡改敏感架构图。

AI 如何让“一句话变成一张图”？

如果说手绘风格降低了表达的心理成本，那么 AI 的加入则大幅压缩了从想法到可视化的物理时间。如今已有多个 Excalidraw 插件支持通过自然语言生成图表，背后驱动力正是大语言模型（LLM）强大的语义理解能力。

设想这样一个场景：用户输入“画一个微服务架构，包含用户服务、订单服务、API 网关和 PostgreSQL 数据库，用箭头表示调用关系”。前端将此请求发送至 AI 网关，后者构造 prompt 并调用 LLM 接口：

def generate_diagram(prompt: str): system_msg = """ You are a diagram generator for Excalidraw. Given a description, output a JSON list of shapes and arrows. Each shape has: type, text, x, y, width, height. Each arrow has: type='arrow', start=[x1,y1], end=[x2,y2]. Use approximate layout positions. """ response = call_llm_api(system_msg, prompt) try: diagram_elements = json.loads(response) return diagram_elements except: return [{"error": "Failed to parse AI output"}]

模型返回的结果是一个结构化 JSON 数组，描述了所有图形元素及其位置关系。前端接收到后，调用ExcalidrawScene.replaceElements()即可完成渲染。

这类系统的挑战不在生成能力本身，而在输出稳定性与安全性。LLM 可能因 prompt 微小变动而产生差异较大的布局，甚至遗漏关键组件。为此，工程实践中常采用以下策略：

Schema 强约束：定义严格的输出模板，配合 JSON Schema 校验；
提示工程优化：固定角色设定（如“你是一个严谨的系统架构师”），引导模型遵循规范；
私有化部署：对于涉及敏感业务逻辑的企业，可在内网部署小型化 LLM（如 Llama 3-8B），避免数据外泄。

更进一步，还可构建“反馈闭环”：用户对 AI 生成结果进行手动调整后，系统记录修正行为并用于后续 prompt 优化，实现个性化学习。

当白板“走出屏幕”：AR 预览的系统构想

真正令人兴奋的未来，在于 Excalidraw 不再局限于显示器之内。借助 AR 设备，我们可以将二维草图投射到真实空间中，实现空间感知下的协作评审。

设想如下架构：

+------------------+ +---------------------+ | AR 设备端 |<--->| WebRTC / WebSocket | | (AR Glasses / | | 实时流传输 | | Mobile AR App) | +---------------------+ +------------------+ | | v | +----------------------+ +-------------->| Excalidraw Core | | - Canvas Rendering | | - Element Management | +----------------------+ | +------------------+ | AI Gateway | | - NLP Parsing | | - Diagram Gen API | +------------------+

其中，AR 设备运行 ARKit（iOS）、ARCore（Android）或 WebXR（跨平台），负责追踪物理环境中的平面（如桌面、墙面），并将 Excalidraw 输出的画面作为纹理贴图锚定其上。用户可通过手势缩放、旋转，甚至用手“拨动”某个服务模块来查看其详情。

整个工作流程如下：

用户在桌面端完成初步设计；
点击“启动 AR 预览”，系统生成当前画布的矢量快照或 WebGL 渲染帧；
通过 WebRTC 将画面推送到已配对的 AR 设备；
AR 端接收后将其绑定至现实空间坐标系；
若启用语音命令（如“添加 Redis 缓存”），请求经 AI 网关处理后反向同步回主画布；
所有终端保持状态一致，包括 AR 中的手势标注。

这种模式解决了几个长期存在的协作痛点：

空间感缺失：二维图纸难以体现组件间的物理比例。而在 AR 中，你可以直观感受到“数据库比前端重得多”，从而重新思考部署策略。
远程参与感弱：传统视频会议中，各方视角不一。AR 支持共享空间坐标系，所有人“看到”的是同一个漂浮在桌面上的架构图。
迭代效率低：AI + AR 形成“说→出图→看→改”的快速循环，极大加速原型验证周期。

当然，这条路径仍有诸多挑战待解：

性能瓶颈：AR 渲染要求 ≥30fps，若每次更新都全量重传画布，极易造成延迟。解决方案包括差分更新、WebGL 层级分离（静态背景 vs 动态元素）、边缘计算辅助渲染等。
交互自然性：目前主流 AR 输入仍依赖手势或语音，缺乏精确操控能力。未来或许可通过触控手套或眼动追踪补充交互维度。
设备碎片化：不同 AR 平台 API 差异较大。WebXR 提供了一定程度的统一接口，但功能覆盖仍有限，需做好降级体验设计。