我做的小工具 AI Excalidraw 开源啦！

✨前言

Hi，我是松柏！

之前写过一篇 AI+Excalidraw，用自然语言画手绘风格技术图 的文章，当时基于 Excalidraw 做了一个通过 AI 自动绘制手绘风格图的工具，收到了不少小伙伴的私信，希望能开源出来学习。

所以，今天它来了！AI Excalidraw 开源啦！🎉

“🔗 GitHub 地址：https://github.com/co-pine/ai-excalidraw

效果演示

先看下效果，用几句话描述想画的图，AI 会流式生成并实时渲染到画布上：

移动端也做了适配：

🎨 功能特性

自然语言绘图

这是核心功能，只需要用自然语言描述想画的图，AI 就会自动生成对应的 Excalidraw 元素。

比如输入：

• "画一个简单的流程图：开始 → 处理 → 结束"
• "画一个前后端分离的架构图"
• "画一个用户登录的时序图"

AI 就会帮你把图画出来，手绘风格，还是挺有特色的。

流式响应实时渲染

这个是我比较喜欢的一个特性。边生成边渲染，每解析到一个完整的图形元素就立即画到画布上，体验非常丝滑。

多会话管理

支持创建多个独立的聊天会话，方便管理不同主题的绘图任务。每个会话的对话历史都会保存，切换会话时不会丢失。

响应式设计

桌面端是左右布局，左侧是 AI 对话面板，右侧是 Excalidraw 画布：

移动端是上下布局，上面画布，下面输入框，专门做了适配：

灵活配置 AI API

支持 OpenAI 兼容的任意 API，不绑定特定服务商。内置支持：

首次启动会自动弹出配置对话框：

本地存储

画布内容和聊天记录都保存在浏览器的 localStorage 中，刷新页面不会丢失，也不会上传到服务器，数据安全有保障。

🚀 快速开始

环境要求

• Bun >= 1.0（推荐）
• 或 Node.js >= 18

安装运行

# 克隆项目
git clone https://github.com/co-pine/ai-excalidraw.git
cd ai-excalidraw

# 安装依赖
bun install

# 启动开发服务器
bun run dev

然后访问 http://localhost:5173 就可以使用了。

配置 AI API

首次启动会自动弹出设置对话框，需要配置三个参数：

配置会保存在浏览器 localStorage 中，刷新页面后无需重新配置。

构建部署

# 构建生产版本
bun run build

构建产物位于 dist/ 目录，可以部署到任意静态服务器。

🏗️ 技术架构

技术栈

目录结构

ai-excalidraw/
├── src/
│   ├── components/
│   │   ├── excalidraw/          # Excalidraw 相关组件
│   │   │   ├── index.tsx        # 主编辑器组件
│   │   │   ├── wrapper.tsx      # Excalidraw 画布封装
│   │   │   ├── chat-panel.tsx   # 桌面端 AI 聊天面板
│   │   │   ├── mobile-input.tsx # 移动端输入组件
│   │   │   ├── element-parser.ts # AI 输出解析器
│   │   │   └── use-chat-history.ts # 聊天历史 Hook
│   │   ├── ui/                  # 通用 UI 组件
│   │   └── settings-dialog.tsx  # API 配置对话框
│   ├── lib/
│   │   ├── ai.ts                # AI API 调用封装
│   │   ├── prompt.ts            # 绘图系统提示词
│   │   └── utils.ts             # 工具函数
│   └── ...
└── ...

核心模块简介

1）AI 调用封装 (lib/ai.ts)

封装了 OpenAI 兼容的流式 API 调用，支持 SSE 格式响应的解析：

export async function streamChat(
  userMessage: string,
  onChunk: (content: string) => void,
  onError?: (error: Error) => void,
  config?: AIConfig
): Promise<void> {
  // 流式调用 AI API，每收到一个 chunk 就回调
}

2）流式 JSON 解析器 (element-parser.ts)

从 AI 返回的流式文本中提取完整的 JSON 对象，处理嵌套和字符串内的花括号：

export function parseExcalidrawElements(
  text: string,
  processedLength: number = 0
): ParseResult {
  // 追踪花括号深度，处理嵌套 JSON
  // 正确处理字符串内的花括号
  // 记录已处理位置，避免重复解析
}

3）绘图提示词 (lib/prompt.ts)

引导 AI 生成符合 Excalidraw 规范的 JSON：

• 输出格式要求
• 文字宽高计算规则
• 箭头 points 相对坐标写法
• 形状内文字双向绑定规范
• 常用颜色参考

🎯结语

以上就是 AI Excalidraw 的完整介绍了，MIT 开源协议，欢迎大家：

• ⭐ 给个 Star 支持一下
• 🐛 提 Issue 反馈问题
• 🔧 提 PR 贡献代码

“🔗 GitHub 地址：https://github.com/co-pine/ai-excalidraw 在线体验：https://www.lzkz.top/tool/excalidraw

如果这个项目对你有帮助的话，欢迎关注点赞一起交流进步呀！下期再见，拜拜👋🏻。