Excalidraw开源白板结合AI实现智能对齐与排版

Excalidraw开源白板结合AI实现智能对齐与排版

在技术团队频繁进行架构讨论、产品原型设计和远程头脑风暴的今天，一个常见的痛点浮现出来：如何快速把脑海中的想法变成清晰可读的图表？很多人打开传统绘图工具，却陷入拖拽形状、手动对齐、反复调整间距的繁琐操作中。更别提多人协作时，每个人画风不一、布局混乱，最终出来的图不仅耗时久，还难以传达核心逻辑。

正是在这种背景下，Excalidraw 凭借其手绘风格和极简交互脱颖而出。它不像 Visio 或 Lucidchart 那样规整刻板，反而用略带“潦草”的线条营造出轻松自然的创意氛围——就像真的在纸上涂鸦一样。但真正让它从“好看”走向“好用”的，是近年来与 AI 技术的深度融合。现在你只需说一句：“画个用户登录流程，包含前端、后端和数据库”，系统就能自动生成结构合理、排布清晰的初稿，再一键整理，瞬间提升专业度。

这背后并非魔法，而是一套精心设计的技术组合：前端基于 React 和 TypeScript 构建，图形通过 Canvas 渲染并支持 SVG 导出；状态管理采用不可变数据模型保证一致性；多人协作依赖 WebSocket 实现，使用 OT 或 CRDT 机制解决冲突。更重要的是，它的插件系统开放性强，可以无缝接入大语言模型（LLM），将自然语言转化为可执行的图形指令。

比如下面这段代码，就实现了从文本描述到图形元素的转换：

const createElement = (type: "rectangle" | "arrow" | "text", x: number, y: number, props: any) => { return { type, version: 1, versionNonce: 0, isDeleted: false, id: `id-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, fillStyle: "hachure", strokeWidth: 2, strokeStyle: "solid", roughness: 2, opacity: 100, angle: 0, x, y, strokeColor: "#000", backgroundColor: "transparent", width: props.width || 100, height: props.height || 100, seed: Math.floor(Math.random() * 100000), points: type === "arrow" ? [[0, 0], [props.targetX - x, props.targetY - y]] : undefined, text: type === "text" ? props.text : undefined, fontSize: 20, fontFamily: 1, textAlign: "left", verticalAlign: "top", }; }; async function generateDiagramFromPrompt(prompt: string): Promise<ExcalidrawElement[]> { const response = await fetch("https://api.llm-provider.com/v1/completions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "gpt-4o-mini", prompt: ` 将以下描述转换为 Excalidraw 元素列表（JSON 格式）： "${prompt}" 输出格式：[{type, x, y, width, height, text}, ...] 示例：表示一个从 '用户' 到 '服务器' 的请求流程 `, }), }); const result = await response.json(); let elements: ExcalidrawElement[] = []; try { const parsedElements = JSON.parse(result.choices[0].text.trim()); elements = parsedElements.map((el: any) => createElement(el.type, el.x, el.y, el)); } catch (e) { console.error("Failed to parse AI-generated elements", e); } return elements; }

这个generateDiagramFromPrompt函数就是 AI 助手的核心入口。当用户输入一段自然语言时，它会调用 LLM API 解析语义，并返回符合 Excalidraw 数据结构的 JSON 数组。这些元素随后可以通过excalidrawAPI.addElements()直接注入画布，完成“一句话生成图表”的体验。虽然示例中用了云端 GPT 模型，但在实际部署中也可以选择本地运行的小型模型（如 Llama3 + Ollama），以保障敏感信息不外泄。

然而，光有“生成”还不够。很多时候我们面对的是已经画了一半、位置杂乱的草图。这时候就需要 AI 排版引擎登场了。传统的对齐功能只能按坐标机械排列，而智能排版则能理解内容语义。例如看到“前端”、“后端”、“数据库”这几个标签，就能推断出这是一个典型的三层架构，应该从左到右依次排列。

下面是实现这一能力的一个轻量级算法示例：

function smartAlign(elements: ExcalidrawElement[]): ElementMutation[] { const mutations: ElementMutation[] = []; const textElements = elements.filter((e) => e.type === "text") as TextElement[]; const shapeElements = elements.filter((e) => e.type !== "text"); const categoryMap: Record<string, ExcalidrawElement[]> = { frontend: [], backend: [], database: [], user: [], other: [], }; textElements.forEach((textEl) => { const content = textEl.text.toLowerCase(); if (content.includes("front") || content.includes("ui")) { const matchedShape = findNearbyShape(textEl, shapeElements); if (matchedShape) categoryMap.frontend.push(matchedShape); } else if (content.includes("back")) { const matchedShape = findNearbyShape(textEl, shapeElements); if (matchedShape) categoryMap.backend.push(matchedShape); } else if (content.includes("db") || content.includes("database")) { const matchedShape = findNearbyShape(textEl, shapeElements); if (matchedShape) categoryMap.database.push(matchedShape); } else if (content.includes("user") || content.includes("client")) { const matchedShape = findNearbyShape(textEl, shapeElements); if (matchedShape) categoryMap.user.push(matchedShape); } else { const matchedShape = findNearbyShape(textEl, shapeElements); if (matchedShape) categoryMap.other.push(matchedShape); } }); const orderedGroups = [categoryMap.user, categoryMap.frontend, categoryMap.backend, categoryMap.database]; let currentX = 100; orderedGroups.forEach((group) => { if (group.length === 0) return; const totalHeight = group.reduce((sum, el) => sum + el.height, 0); const startY = (800 - totalHeight) / 2; let offsetY = startY; group.forEach((el) => { mutations.push({ id: el.id, finalPosition: { x: currentX, y: offsetY }, }); offsetY += el.height + 20; }); currentX += 200; }); return mutations; } function findNearbyShape(textEl: TextElement, shapes: ExcalidrawElement[]): ExcalidrawElement | null { let minDist = Infinity; let closest = null; for (const shape of shapes) { const dx = (textEl.x + textEl.width / 2) - (shape.x + shape.width / 2); const dy = (textEl.y + textEl.height / 2) - (shape.y + shape.height / 2); const dist = Math.sqrt(dx * dx + dy * dy); if (dist < minDist && dist < 150) { minDist = dist; closest = shape; } } return closest; }

这个函数没有依赖复杂的深度学习模型，而是通过关键词匹配加空间距离判断，完成了初步的语义分组与布局优化。对于大多数技术图表来说，这种“规则+启发式”的方法既高效又足够准确，特别适合嵌入浏览器插件或离线环境运行。

整个系统的架构通常是分层的：

+------------------+ +---------------------+ | 用户界面 |<----->| Excalidraw Core | | (React App) | | (Canvas + State) | +------------------+ +----------+----------+ | v +----------------------------+ | AI Plugin Service Layer | | - NLP Parser | | - Layout Engine | | - LLM API Gateway | +-------------+--------------+ | v +------------------------------------------+ | 大语言模型服务（本地或云端） | | - GPT-4 / Llama3 / Qwen 等 | +------------------------------------------+

前端负责展示与交互，插件层封装 AI 能力（如“生成图形”、“整理布局”按钮），AI 服务层处理推理逻辑，最底层连接 LLM 提供语义理解能力。所有通信走 HTTPS/WSS，敏感数据可在本地闭环处理。

举个典型工作流：你想设计一个电商系统架构图，点击“AI 生成”按钮，输入“请画一个电商平台架构图，包括用户APP、网关、订单服务、支付服务和MySQL数据库，用箭头表示调用关系。” 插件捕获指令后发送给 LLM，返回 JSON 格式的元素列表，前端解析后渲染到画布上。接着你微调一下，点击“智能整理”，本地排版引擎识别出各组件角色，自动按左→右顺序排列并对齐中心轴。整个过程不到10秒，而传统方式可能要花15分钟以上。

这种效率提升带来的不仅是时间节省，更是协作质量的飞跃。过去开技术评审会，大家盯着一张临时拼凑的草图争论细节；现在会前就能共享一份结构清晰、风格统一的初稿，会议聚焦于逻辑本身而非表达形式。在敏捷开发、产品需求对齐、甚至面试白板题等场景中，这套组合都展现出极强的实用性。

当然，在落地过程中也有几点值得特别注意：

• 隐私优先：涉及公司内部系统的图表建议使用本地模型处理，避免数据上传；
• 渐进增强：AI 应作为辅助工具存在，不能取代人的决策权，保留撤销和手动编辑通道；
• 错误容忍：AI 可能误解意图，需提供反馈机制让用户轻松修正；
• 性能控制：对大型画布启用增量计算，防止卡顿；
• 无障碍支持：兼容键盘操作和屏幕阅读器，确保所有人可用；
• 术语适配：企业可训练专属模型，识别内部专有名词（如“CRM系统”特指某平台），提高准确性。

长远来看，随着小型化 AI 模型的进步和 WebAssembly 在浏览器端的普及，这类智能白板工具正朝着“零门槛、高智能”的方向演进。未来的理想状态是：你在脑中构思一个系统，一边口述一边看着画布自动成形，所想即所得。Excalidraw 加 AI 的路径，正是通向这一愿景的重要一步——它不只是让绘图更快，而是让思想的流动更加自由。