Excalidraw + AI 黑科技绘图？开源白板实现智能草图生成-程序员充电站

Excalidraw + AI：当手绘白板遇上智能生成

在一次远程产品评审会上，团队卡在了架构图的绘制上。有人提议用 Figma，但加载缓慢、操作复杂；有人想手画拍照上传，又显得不够正式。就在僵持之际，一位工程师输入一句：“画个前后端分离的系统，前端 React，后端 Node.js，数据库 MongoDB”，几秒后，一张结构清晰的手绘风格草图自动生成——这正是Excalidraw + AI的真实应用场景。

这类“以文生图”的智能绘图能力，正悄然改变着技术团队的设计流程。它不是替代专业工具，而是填补了一个关键空白：在构思初期，如何快速将模糊想法转化为可讨论的视觉表达？

极简背后的工程智慧

Excalidraw 看似简单，实则处处体现设计取舍。它的核心并非追求功能全面，而是专注于“让每个人都能轻松表达”。

项目基于 TypeScript 和 React 构建，图形渲染依赖 HTML5 Canvas 与 Rough.js 库。后者是实现其标志性“手绘风”的关键技术。通过算法对标准几何路径施加轻微扰动，模拟人类作画时的自然抖动，既保留可读性，又降低心理门槛——毕竟没人会因为线条不直而自我怀疑。

每个图形元素在内部以 JSON 对象形式存在：

interface ExcalidrawElement { id: string; type: "rectangle" | "diamond" | "arrow" | "text"; x: number; y: number; width: number; height: number; strokeColor: string; backgroundColor: string; roughness: number; // 控制抖动强度 seed: number; // 确保重载时形态一致 }

其中seed字段尤为巧妙：它固定随机源，使得同一图形每次打开都呈现相同的“手绘”效果，避免视觉跳跃，增强认知连续性。

更值得称道的是其架构开放性。数据模型完全透明，支持导出为.excalidraw（即 JSON）或 PNG/SVG。这种设计为后续集成 AI 提供了天然接口——只要输出符合 schema 的 JSON，就能被直接加载。

协作方面，Excalidraw 采用 WebSocket 实现实时同步。变更以增量方式广播，结合乐观更新机制，即便网络延迟也能保持流畅体验。而这一切，默认无需登录，数据存于本地 localStorage，真正做到了“开箱即用”。

让文字自己长成图表

如果说 Excalidraw 解决了“怎么画”的问题，那么 AI 集成则试图回答：“画什么？”这一转变，标志着从“工具”到“助手”的跃迁。

目前主流实现路径并非官方内置，而是由社区驱动扩展，如 Obsidian 插件或独立部署的 AI 助手服务。其本质是一个NL2Diagram（Natural Language to Diagram）系统，工作流程如下：

用户触发命令（如/ai），输入描述；
请求发送至后端处理服务；
大语言模型解析语义，提取实体与关系；
模型生成符合 Excalidraw 格式的 JSON 数据；
前端接收并动态导入，完成渲染。

整个过程的关键在于提示词工程（Prompt Engineering）。LLM 并不会天生懂得 Excalidraw 的数据结构，必须通过精心设计的 system prompt 引导其输出规范结果。

EXCALIDRAW_SCHEMA_PROMPT = """ 你是一个 Excalidraw 图表生成器。请根据用户描述，输出一个符合 Excalidraw 数据结构的 JSON 数组。 每个对象必须包含：id, type, x, y, width, height, label（文本内容），以及 connections（源id→目标id）。 使用简单布局，组件横向排列，间距合理。 """

这个 prompt 看似简单，实则包含了四项关键约束：
- 输出格式（JSON 数组）
- 必填字段清单
- 布局建议
- 关系表示方式

少了任何一项，模型都可能自由发挥，导致前端无法解析。

实际调用代码也需谨慎处理异常：

def generate_diagram(prompt: str) -> dict: response = openai.ChatCompletion.create( model="gpt-4-turbo", messages=[ {"role": "system", "content": EXCALIDRAW_SCHEMA_PROMPT}, {"role": "user", "content": prompt} ], temperature=0.3, max_tokens=1000 ) try: elements = json.loads(response.choices[0].message['content']) return { "type": "excalidraw", "version": 2, "source": "ai", "elements": elements } except json.JSONDecodeError: raise ValueError("AI 返回内容无法解析为有效 JSON")

温度值设为 0.3 是为了在创造性与稳定性之间取得平衡——太高可能导致格式漂移，太低则缺乏灵活性。

前端接入同样简洁：

const aiGeneratedData = await fetch("/api/generate-diagram").then(res => res.json()); const scene = importFromJSON(aiGeneratedData); excalidrawAPI.updateScene(scene);

importFromJSON是 Excalidraw 提供的标准 API，原本用于文件导入，如今成为连接 AI 与界面的桥梁。

但这套机制仍有几个常见陷阱需要注意：

注意事项	工程对策
坐标冲突	AI 生成的元素常堆叠在一起。可在返回前加入简易力导向布局算法自动排布
格式错误	使用 JSON Schema 进行校验，失败时 fallback 到原始文本建议
隐私风险	敏感场景应对接私有化 LLM（如 Llama 3、ChatGLM），避免数据外泄
响应延迟	添加加载状态提示，并允许用户中断请求

落地场景：不只是画图那么简单

典型的 AI + Excalidraw 系统架构通常分为三层：

+------------------+ +--------------------+ +---------------------+ | Excalidraw UI |<----->| Backend Gateway |<----->| LLM API (e.g. GPT) | +------------------+ HTTP +--------------------+ HTTPS +---------------------+ ↑ ↑ | | +------------------+ +----------------------+ | Browser / Obsidian | | Private LLM / Proxy | +------------------+ +----------------------+

前端可以是独立网页，也可嵌入笔记工具（如 Obsidian）。网关层负责鉴权、缓存和请求聚合。AI 层则可根据安全要求选择公有云或本地模型。

一个典型使用流程如下：