Excalidraw被纳入多个开源推荐榜单，实力获认可-开发者社区

Excalidraw：当手绘风白板遇上AI与实时协作

在一场远程技术评审会议中，产品经理刚提出“我们需要一个缓存层”，工程师便在共享画布上输入一行指令：“添加 Redis 节点，位于应用服务器和数据库之间”。几秒钟后，一个结构清晰的组件框自动出现在架构图中央——无需切换工具、没有沟通断层，所有人同步看到更新。这不是科幻场景，而是使用Excalidraw的日常。

这款开源虚拟白板正悄然改变团队的协作方式。它不像传统绘图软件那样追求规整精确，反而刻意模仿人类手绘的“不完美”线条；它不依赖中心化服务，却能实现多端近乎零延迟的协同编辑；更关键的是，它开始理解自然语言，让 AI 帮你把想法直接变成图表。

最近，Excalidraw 频繁出现在 GitHub Trending、Awesome Open Source 等权威开源榜单中，热度持续攀升。这背后不仅是审美偏好的变化，更是对一种新型知识协作范式的认可：轻量、开放、智能且尊重隐私。

手绘风格从何而来？不只是视觉滤镜

很多人初见 Excalidraw，第一反应是“这像我随手画的草图”。但这种“潦草感”并非简单的美术风格选择，而是一套精心设计的技术实现。

大多数工具若要模拟手绘效果，可能会用预设笔刷纹理或 SVG 滤镜。但 Excalidraw 走了一条更底层的路径：直接扰动图形的几何路径本身。当你画一条直线时，系统并不会真的绘制那条数学意义上的直线，而是通过算法对原始坐标点进行微小偏移，生成一条略有抖动的曲线。

核心逻辑可以用几行代码概括：

function generateSketchPoints(points: Array<[number, number]>, roughness = 1.5) { return points.map(([x, y]) => { const offsetX = (Math.random() - 0.5) * roughness * 2; const offsetY = (Math.random() - 0.5) * roughness * 2; return [x + offsetX, y + offsetY] as [number, number]; }); }

这段看似简单的随机扰动，实则藏着工程上的权衡。roughness参数默认设为1.5，这个数值经过大量用户测试：太小看不出差异，太大则影响可读性。更重要的是，每次重绘必须保持一致性——否则同一图形每次打开都长得不一样，协作就无从谈起。

为此，Excalidraw 引入了“确定性随机种子”机制。每个图形元素绑定一个 seed，在初始化时固定，确保即使多次渲染，抖动轨迹始终如一。这就像给每一次“手绘”打上指纹，既保留个性，又保证稳定。

除了视觉层面，这种基于 Canvas 的混合渲染架构（部分使用 SVG 导出）也让性能表现更优。状态管理采用 Zustand 而非 Redux，避免了模板代码的臃肿，使得上千个元素的大型画布依然响应流畅。

多人同时编辑不冲突？CRDT 的魔法

想象一下，两个人在同一时间修改同一个矩形的位置，传统系统通常会弹出“文件已被锁定”的提示，或者一方的更改被覆盖。但在 Excalidraw 中，这种情况几乎不会发生——即便网络延迟较高，最终所有客户端也会自动达成一致。

秘密在于其底层使用的Yjs库，一个基于 CRDT（Conflict-Free Replicated Data Type）理论的分布式数据同步引擎。CRDT 的核心思想是：允许各节点独立修改本地副本，所有操作天然具备合并能力，最终状态必然收敛一致。

具体到实现上，Excalidraw 将整个画布状态抽象为一个 Yjs 文档：

import * as Y from "yjs"; import { WebrtcProvider } from "y-webrtc"; const doc = new Y.Doc(); const yElements = doc.getMap("elements"); // 存储所有图形元素 // 实时同步通道 const provider = new WebrtcProvider("excalidraw-room-1", doc); yElements.observe(() => { const elements = Y.decode(yElements.toJSON()); updateExcalidrawScene(elements); });

每当用户新增一个箭头或移动文本框，变更就被封装成 Yjs 的共享类型操作（如set、delete），并通过 WebRTC 直连广播给其他成员。接收方的 Yjs 实例自动融合这些增量更新，并触发 UI 重绘。

这套机制的优势非常明显：
-去中心化：无需主服务器协调，适合私有部署；
-低带宽消耗：仅传输变更差分，而非全量状态；
-抗网络波动：临时掉线不影响后续合并，重连后自动补同步。

对于企业级场景，还可以结合信令服务器和 TURN 中继解决 NAT 穿透问题，甚至加入端到端加密（如 libsodium），确保敏感架构图不会被第三方截获。

让 AI 帮你画图：从“描述”到“可视化”的跃迁

如果说手绘风格降低了表达门槛，实时协作为团队提供了共同语境，那么 AI 功能才是真正将生产力推向新高度的关键。

现在，你可以不再手动拖拽三个方框来构建 MVC 架构图。只需在命令面板输入：

“画一个微服务架构，包含用户网关、订单服务、支付服务和 MySQL 数据库，用箭头表示调用关系”

系统便会调用后端 AI 服务，解析语义并输出符合 Excalidraw schema 的 JSON 结构：

[ { "type": "rectangle", "x": 100, "y": 200, "width": 120, "height": 60, "label": "API Gateway" }, { "type": "arrow", "start": { "elementId": "gateway" }, "end": { "elementId": "order-service" } } ]

这个过程的关键在于结构化提示词工程。为了让大模型输出稳定可用的数据格式，系统设置了严格的 system prompt：

你是一个 Excalidraw 图表生成器，请根据以下描述输出标准 JSON 格式的图形元素列表... 只返回 JSON 数组，不要额外解释。

配合温度参数（temperature=0.3）控制生成随机性，极大提升了输出的可靠性。更重要的是，这一流程支持完全本地化部署——通过对接 Ollama 运行 Llama3 等开源模型，企业可以在内网环境中实现 AI 辅助绘图，彻底规避数据外泄风险。

当然，AI 生成的结果往往只是“初稿”。自动布局可能不够美观，标签命名也可能需要调整。但它的价值不在于完美替代人工，而在于把原本耗时 20 分钟的工作压缩到 30 秒内完成，让你快速进入“迭代优化”阶段。

它解决了哪些真实痛点？

我们不妨回到实际工作流中看它是如何发挥作用的。

在一个典型的远程协作系统中，Excalidraw 的架构分为三层：

+---------------------+ | 客户端层 | | - Web App (React) | | - 手绘渲染引擎 | | - AI 插件入口 | +----------+----------+ | +----------v----------+ | 通信层 | | - WebSocket / | | WebRTC (Yjs) | +----------+----------+ | +----------v----------+ | 数据层 | | - Yjs CRDT 文档 | | - 可选：后端存储 | | - 可选：AI 微服务 | +---------------------+

正是这样的设计，让它能够应对多种复杂场景：