# ai-draw

**Repository Path**: null7916/ai-draw

## Basic Information

- **Project Name**: ai-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**: 2025-11-01
- **Last Updated**: 2025-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next AI Draw.io

一个将AI功能与draw.io图表集成的Next.js网页应用。这个应用允许您通过自然语言命令和AI辅助可视化来创建、修改和增强图表。

![Next AI Draw.io](https://github.com/user-attachments/assets/9f14b5fd-bc7f-4151-b4be-e38d17b77621)

演示站点：[https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.app/)

## 功能特性

-   **基于LLM的图表创建**：利用大型语言模型通过自然语言命令直接创建和操作draw.io图表
-   **基于图像的图表复制**：上传现有图表或图像，AI会自动复制并增强它们
-   **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表先前版本
-   **交互式聊天界面**：与AI实时交流以优化您的图表
-   **智能编辑**：使用简单的文本提示修改现有图表
-   **精准XML编辑**：AI现在可以对图表的特定部分进行精确编辑，而无需每次重新生成整个XML，使更新更快更高效
-   **改进的XML处理**：自动格式化单行XML以提高兼容性和可靠性

## 工作原理

该应用使用以下技术：

-   **Next.js**：用于前端框架和路由
-   **@ai-sdk/react**：用于聊天界面和AI交互
-   **react-drawio**：用于图表表示和操作

图表以XML形式表示，可以在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。

## 开始使用

### 安装

1. 克隆仓库：

```bash
git clone 
cd next-ai-draw-io
```

2. 安装依赖：

```bash
npm install
# 或
yarn install
```

3. 在根目录创建`.env.local`文件，包含以下变量：

```
OPENAI_API_KEY=your_openai_api_key_here
# 添加其他所需的环境变量
```

4. 运行开发服务器：

```bash
npm run dev
```

5. 在浏览器中打开[http://localhost:3000](http://localhost:3000)查看应用。

## 部署

部署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%2FDayuanJiang%2Fnext-ai-draw-io)

## 项目结构

```
app/                  # Next.js应用路由和页面
  extract_xml.ts      # XML处理工具
components/           # React组件
  chat-input.tsx      # AI交互的用户输入组件
  chatPanel.tsx       # 带有图表控制的聊天界面
  ui/                 # UI组件（按钮、卡片等）
lib/                  # 实用函数和辅助工具
  utils.ts            # 通用工具，包括XML转换
public/               # 静态资产，包括示例图像
```

## 待办事项

-   [x] 允许LLM修改XML而不是每次从头生成。
-   [x] 改善形状流式更新的流畅性。

## 许可证

本项目采用MIT许可证。

## 支持与联系

如需支持或咨询，请在GitHub仓库上打开issue或联系维护者：

-   电子邮件：me[at]jiang.jp

---