liujuntao123/smart-excalidraw-next

Smart Excalidraw – AI 驱动的图表生成器

这是什么 – 一个 Web 应用，让你用自然语言描述图表，并立即获得一个完全可编辑的 Excalidraw 画布。它使用大语言模型 (LLM) 来理解请求、选择正确的图表类型，并通过“智能箭头”算法放置元素，避免杂乱的线条交叉。

主要功能

• 自然语言转图表 – 输入如 “draw a user-login flow” 或 “show a micro-service architecture with gateway, auth, and business services”，AI 就会生成整个图表。
• 20+ 内置图表样式 – 流程图、架构图、时序图、ER 图、思维导图、网络拓扑等。模型也能自动判断最适合的样式。
• Excalidraw 原生输出 – 结果为 Excalidraw JSON，可直接在画布上编辑、设置样式或扩展。
• 智能连接路由 – 专有算法会自动计算箭头的最佳锚点，保持布局整洁。
• 两种提供 LLM 的方式
  1. 服务端 LLM – 管理员可设置 访问密码 并配置共享的 Anthropic 或 OpenAI Key。用户只需输入密码即可。
  2. 个人 LLM – 用户可输入自己的 OpenAI 或 Anthropic API Key 并选择模型（README 建议使用 Claude sonnet-4.5）。
• 隐私优先 – API Key 和密码仅存储在浏览器中（或服务端的 .env 文件）；不会发送至任何第三方后端。

如何尝试

1. 打开托管演示 https://ai-draw-nexus.aizhi.site (或本地运行)。
2. 点击 “配置 LLM” 加入您的 API Key，或若服务器管理员已提供，请使用 “访问密码” 按钮。
3. 在输入框中输入描述，观察图表出现。
4. 在 Excalidraw 画布上编辑结果 – 移动元素、更改颜色、添加注释。

自行运行

# clone
git clone <repo-url>
cd smart-excalidraw-next

# install (pnpm recommended)
pnpm install

# start dev server
pnpm dev   # then open http://localhost:3000

若要使用共享 LLM 模式，请将 .env.example 复制为 .env 并填写：

• ACCESS_PASSWORD
• SERVER_LLM_TYPE (openai 或 anthropic)
• SERVER_LLM_BASE_URL
• SERVER_LLM_API_KEY
• SERVER_LLM_MODEL

技术栈 – Next.js 16, React 19, Excalidraw, Tailwind CSS 4, 用于提示框的 Monaco editor。

授权 – MIT。

适用对象 – 产品设计师、工程师、教育工作者，或任何需要快速、干净图表而无需学习绘图工具的人。AI 处理布局，让用户专注于内容。