# ai-smart-draw

**Repository Path**: corffee/ai-smart-draw

## Basic Information

- **Project Name**: ai-smart-draw
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-09
- **Last Updated**: 2026-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 智能绘图

[English](README_en.md) | 中文

一个基于 Next.js 构建的智能绘图应用程序，利用 AI 的强大功能创建和操作各种类型的图表，包括 Draw.io (diagrams.net)、Mermaid、PlantUML、Excalidraw，以及通过自然语言命令支持 20 多种其他图表格式。

🔗 **在线演示**:
- https://ai-smart-draw.vercel.app/

![de5e647f-a83a-4b28-bd56-b449f587e472.png](public/de5e647f-a83a-4b28-bd56-b449f587e472.png)
![01669c29-60a7-4777-af14-0982d6c6daa8.png](public/01669c29-60a7-4777-af14-0982d6c6daa8.png)
![409fd263-800f-4183-8df9-71691307633c.png](public/409fd263-800f-4183-8df9-71691307633c.png)
![6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png](public/6dd5b5c1-1e25-4d33-a45f-d10eb0fbb804.png)
![7736141c-e820-450d-8260-5f5b0c846388.png](public/7736141c-e820-450d-8260-5f5b0c846388.png)
![e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png](public/e59f7980-ac2f-4c57-b9a7-8b7c75feed58.png)

## 🌟 主要功能

- **AI 驱动的图表创建**: 将自然语言描述转换为专业图表
- **多格式支持**: 支持 Draw.io XML、Mermaid、PlantUML、Excalidraw，以及通过 Kroki 支持 20 多种其他格式
- **智能编辑**: 通过对话式 AI 提示修改现有图表
- **实时预览**: 在与 AI 交互时查看更改
- **版本历史**: 跟踪和恢复图表的先前版本
- **可折叠聊天面板**: 展开或折叠聊天界面以最大化工作区
- **灵活渲染**: 具有回退机制的多种渲染选项
- **模型配置**: 直接从浏览器自定义 AI 模型

## 🎯 支持的图表类型

### Draw.io (diagrams.net)
使用 AI 驱动的 XML 生成和修改功能创建和编辑专业流程图、过程图和复杂可视化图表。

### Mermaid
在专用工作区中生成流程图、序列图、甘特图等，并提供实时 SVG 预览。

### PlantUML
内置渲染代理，支持 plantuml.com、kroki.io 或自定义端点创建 UML 图表。

### Excalidraw
结合 AI 辅助的徒手风格绘图，用于有机图表创建。

### Graphviz
使用 DOT 语言语法创建图形图表。Graphviz 通过 kroki.io 服务提供支持，该服务提供强大的图形可视化功能。

### Kroki (20 多种格式)
使用 kroki.io 服务在各种格式中生成图表，通过单一界面支持：

- **PlantUML**: UML 图表、活动图、序列图等
- **Mermaid**: 流程图、序列图、甘特图等
- **BPMN**: 业务流程建模符号，用于工作流图
- **Graphviz**: 图形可视化和网络图
- **BlockDiag**: 方框图
- **C4-PlantUML**: 软件架构图
- **Ditaa**: ASCII 艺术到图像转换
- **Erd**: 实体关系图
- **Vega/Vega-Lite**: 数据可视化
- **以及其他 15 多种格式**

## 🛠 工作原理

AI 智能绘图利用现代 Web 技术在自然语言和图表表示之间架起桥梁：

- **Next.js 应用路由器**: 具有服务器端渲染的快速、现代 React 框架
- **AI SDK 集成**: 与 OpenAI 兼容 API 的无缝通信
- **上下文感知提示**: 为每种图表类型设计的智能提示工程
- **实时流式传输**: 具有流式响应的即时反馈
- **格式特定工具**: 为每种图表格式设计的专用工具（[display_mermaid]、[display_plantuml] 等）

应用程序将您的自然语言请求转换为结构化图表代码，然后实时渲染。

## 🚀 入门指南

### 先决条件
- Node.js 18+
- npm 或 yarn

### 安装

1. 克隆仓库：
```bash
git clone https://github.com/shenpeiheng/ai-smart-draw.git
cd ai-smart-draw
```

2. 安装依赖：
```bash
npm install
# 或
yarn install
```

3. 在根目录创建 `.env.local` 文件。您可以使用 `env.example` 作为模板：
```bash
cp env.example .env.local
```

然后使用您的 OpenAI 凭据更新 `.env.local`。

### OpenAI 配置

- `OPENAI_API_KEY` (必需): 来自您 OpenAI 账户的密钥
- `OPENAI_MODEL` (可选): 默认为 `gpt-4o-mini`，如果您喜欢其他已发布的变体可以覆盖
- `OPENAI_BASE_URL` (可选): 默认为 `https://api.openai.com/v1`；如果您自托管代理或网关，请设置此项

示例片段：
```bash
OPENAI_API_KEY="sk-your-key"
# OPENAI_MODEL="gpt-4o-mini"
# OPENAI_BASE_URL="https://api.openai.com/v1"
```

#### 可选：从浏览器配置

- 点击任何工作区标题中的 **模型设置** 按钮，覆盖当前浏览器的 API 密钥、基础 URL 或模型。值存储在 `localStorage` 中，仅在您提交聊天请求时发送到服务器
- 留空任何字段以回退到上述服务器端环境变量
- 使用 **拉取列表** 按钮调用 `/api/models` 助手，将当前凭据转发到 `GET /models` 并列出可选择的模型 ID

4. 运行开发服务器：
```bash
npm run dev
```

5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用程序
    - `/` -> Draw.io (XML 工作流、图表历史、文件上传)
    - `/mermaid` -> Mermaid (由您配置的 OpenAI 兼容模型驱动的实时预览 + 定义卡)
    - `/plantuml` -> PlantUML (具有远程预览的基于文本的图表)
    - `/excalidraw` -> Excalidraw (由相同模型驱动的自由形式画布)
    - `/kroki` -> Kroki (由 kroki.io 驱动的多格式图表)
    - `/graphviz` -> Graphviz (由 kroki.io 驱动的图形可视化图表)

## 🌐 用户界面功能

### 可折叠聊天面板
- 切换聊天面板以最大化您的工作区
- 折叠时，浮动按钮可快速访问以恢复聊天面板
- 流畅的动画提供无缝用户体验

### 响应式设计
- 针对桌面和笔记本电脑使用进行了优化
- 移动友好的界面和适当的消息

### 统一导航
- 在不同图表类型之间轻松切换
- 所有图表工作区的一致界面

## 🚀 部署

部署 Next.js 应用的最简单方法是使用 Next.js 创建者提供的 [Vercel 平台](https://vercel.com/new)。

查看 [Next.js 部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。

或者您可以使用此按钮进行部署。
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fshenpeiheng%2Fai-smart-draw)

## 📁 项目结构

```
app/                  # Next.js 应用路由和页面
  api/                # 不同图表类型的 API 路由
  [diagram-type]/     # 每种图表类型的独立页面
components/           # React 组件
  ui/                 # 可重用的 UI 组件
  [feature]/          # 特定功能的组件
contexts/             # React 上下文提供者
lib/                  # 实用函数和助手
public/               # 静态资源，包括示例图片
```

## ✅ 待办事项

- [x] 允许 LLM 修改 XML 而不是每次都从头生成
- [x] 提高形状流式更新的流畅性
- [x] 添加可折叠聊天面板以更好地利用工作区

## 📄 许可证

该项目基于 MIT 许可证。

## ⭐ 星标历史

[![Star History Chart](https://api.star-history.com/svg?repos=shenpeiheng/ai-smart-draw&type=date&legend=top-left)](https://www.star-history.com/#shenpeiheng/ai-smart-draw&type=date&legend=top-left)