# AI-draw

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

## Basic Information

- **Project Name**: AI-draw
- **Description**: No description available
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Excalidraw

使用自然语言描述，让 AI 帮你绘制各种风格的流程图、架构图、示意图。

## 功能特性

- 🎨 **自然语言绘图** - 描述想要的图形，AI 自动生成 Excalidraw 元素
- ⚡ **流式响应** - 实时查看 AI 生成过程，边生成边渲染
- 💬 **多会话管理** - 支持创建多个独立聊天会话
- 📱 **响应式设计** - 适配桌面和移动设备
- 🔧 **灵活配置** - 支持 OpenAI 兼容的任意 API（OpenAI、智谱、阿里百炼等）
- 💾 **本地存储** - 画布内容和聊天记录自动保存到浏览器
- 📚 **案例库** - 预置多种绘图案例，一键选择快速生成
- 🎭 **多种风格** - 支持手绘、简约、技术、卡通、复古、现代、水彩、素描等多种风格
- 🌐 **多仓库支持** - 同时支持 GitHub 和 Gitee 仓库同步

## 快速开始

### 环境要求

- [Bun](https://bun.sh/) >= 1.0（推荐）或 Node.js >= 18

### 安装

```bash
# 克隆项目
git clone https://gitee.com/zptcsoft/ai-draw.git
cd ai-draw

# 安装依赖（使用 Bun）
bun install

# 或者使用 npm
npm install

# 或者使用 yarn
yarn install
```

### 启动开发服务器

```bash
# 使用 Bun
bun run dev

# 或者使用 npm
npm run dev

# 或者使用 yarn
yarn dev
```

访问 http://localhost:5173（如果端口被占用，会自动使用其他端口）

### 构建生产版本

```bash
# 使用 Bun
bun run build

# 或者使用 npm
npm run build

# 或者使用 yarn
yarn build
```

构建产物位于 `dist/` 目录。

## 配置 AI API

首次启动会自动弹出设置对话框，你需要配置：

| 配置项 | 说明 | 示例 |
|--------|------|------|
| API Key | 你的 API 密钥 | sk-xxx |
| Base URL | OpenAI 兼容的 API 地址 | https://api.openai.com/v1 |
| Model | 模型名称 | gpt-4o |

### 支持的 API 服务

任何兼容 OpenAI Chat Completions API 的服务均可使用：

- **OpenAI**: `https://api.openai.com/v1`
- **智谱 AI**: `https://open.bigmodel.cn/api/paas/v4`
- **阿里百炼**: `https://dashscope.aliyuncs.com/compatible-mode/v1`
- **其他**: 任意 OpenAI 兼容的 API

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

## 使用指南

### 1. 使用聊天绘制

1. 在左侧聊天面板中描述你想要绘制的图形
2. 选择合适的绘图风格（可选）
3. 点击发送按钮或按 Enter 键
4. 等待 AI 生成并渲染到画布上

### 2. 使用案例库

1. 在左侧面板中切换到「案例库」标签
2. 选择一个分类（流程图、架构图、示意图等）
3. 点击「使用此案例」按钮
4. AI 会自动使用案例的提示词生成图形

### 3. 切换绘图风格

1. 在聊天输入框上方点击「当前风格」按钮
2. 从下拉菜单中选择你想要的风格
3. 发送新的绘图请求，AI 会使用新风格生成图形

### 4. 绘图风格介绍

| 风格名称 | 特点 |
|----------|------|
| 手绘风格 | 线条粗糙，有手绘感，使用明亮的颜色 |
| 简约风格 | 线条简洁，颜色单一，注重留白 |
| 技术风格 | 线条精确，专业感强，使用冷色调 |
| 卡通风格 | 形象可爱，色彩鲜艳，圆角设计 |
| 复古风格 | 怀旧感强，色调温暖，带有复古纹理 |
| 现代风格 | 简洁明快，科技感强，使用单一明亮色彩和清晰的线条 |
| 水彩风格 | 色彩柔和，有透明感，边缘模糊 |
| 素描风格 | 黑白为主，注重线条和阴影，有铅笔质感 |

## 技术栈

- **框架**: React 19 + TypeScript
- **构建工具**: Vite
- **样式**: Tailwind CSS v4
- **绘图库**: [Excalidraw](https://excalidraw.com/)
- **UI 组件**: Radix UI
- **图标**: Lucide React
- **包管理**: Bun / npm / yarn

## 目录结构

```
ai-draw/
├── src/
│   ├── components/
│   │   ├── excalidraw/          # Excalidraw 相关组件
│   │   │   ├── index.tsx        # 主编辑器组件，整合画布和聊天面板
│   │   │   ├── wrapper.tsx      # Excalidraw 画布封装
│   │   │   ├── chat-panel.tsx   # 桌面端 AI 聊天面板
│   │   │   ├── case-library.tsx # 案例库组件
│   │   │   ├── mobile-input.tsx # 移动端 AI 输入组件
│   │   │   ├── element-parser.ts # AI 输出解析器，提取 JSON 元素
│   │   │   └── use-chat-history.ts # 聊天历史管理 Hook
│   │   ├── ui/                  # 通用 UI 组件
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   └── textarea.tsx
│   │   └── settings-dialog.tsx  # API 配置对话框
│   ├── lib/
│   │   ├── ai.ts                # AI API 调用封装（流式请求）
│   │   ├── prompt.ts            # Excalidraw 绘图系统提示词
│   │   ├── cases.ts             # 案例库数据
│   │   ├── styles.ts            # 绘图风格配置
│   │   └── utils.ts             # 工具函数
│   ├── App.tsx                  # 应用入口组件
│   ├── main.tsx                 # React 挂载入口
│   └── index.css                # 全局样式
├── public/                      # 静态资源
├── index.html                   # HTML 模板
├── vite.config.ts               # Vite 配置
├── tailwind.config.js           # Tailwind 配置
├── tsconfig.json                # TypeScript 配置
├── tsconfig.app.json            # TypeScript 应用配置
├── tsconfig.node.json           # TypeScript Node 配置
├── package.json                 # 项目配置和依赖
├── eslint.config.js             # ESLint 配置
└── bun.lock                     # Bun 依赖锁文件
```

## 使用示例

### 1. 流程图示例

- "画一个简单的流程图：开始 → 处理 → 结束"
- "绘制一个用户注册流程图，包含输入信息、验证邮箱、设置密码、完成注册等步骤"
- "画一个订单处理流程图，包含下单、支付、发货、确认收货、评价等步骤"

### 2. 架构图示例

- "画一个前后端分离的架构图"
- "绘制一个三层架构图，包含表示层、业务逻辑层和数据访问层"
- "画一个微服务架构图，包含API网关、用户服务、订单服务、支付服务和数据库"

### 3. 示意图示例

- "画一个 JavaScript 事件循环示意图"
- "绘制 TCP/IP 协议栈的四层模型"
- "画一个 HTTP 请求响应流程图"

### 4. 其他类型示例

- "绘制一个关于前端开发的思维导图"
- "画一个公司组织结构图"
- "绘制一个用户登录的时序图"
- "画一个家庭网络拓扑图"

## 仓库同步

项目同时托管在 GitHub 和 Gitee 上：

- GitHub: https://github.com/co-pine/ai-excalidraw.git
- Gitee: https://gitee.com/zptcsoft/ai-draw.git

## 贡献指南

欢迎提交 Issue 和 Pull Request！

### 开发流程

1. Fork 仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交变更 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 问题反馈

如果遇到任何问题，欢迎通过以下方式反馈：

- 在 GitHub 或 Gitee 上提交 Issue
- 发送邮件到项目维护者邮箱

## 许可证

[MIT](LICENSE)

## 支持作者

如果这个项目对你有帮助，欢迎 Star 支持！