# CodeFlow-AI

**Repository Path**: lifangxing1314/code-flow-ai

## Basic Information

- **Project Name**: CodeFlow-AI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CodeFlow AI

<div align="center">

**基于 AI 的代码流程图生成工具**

让代码逻辑可视化更简单

[![Vue](https://img.shields.io/badge/Vue-3.5.24-42b883?logo=vue.js&logoColor=white)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Element Plus](https://img.shields.io/badge/Element_Plus-2.13.0-409eff?logo=element&logoColor=white)](https://element-plus.org/)
[![Vite](https://img.shields.io/badge/Vite-7.2.4-646cff?logo=vite&logoColor=white)](https://vitejs.dev/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

[在线体验](https://gitee.com/lifangxing1314/code-flow-ai) · [快速开始](#快速开始) · [功能特性](#功能特性) · [使用文档](#使用文档)

</div>

---

## 项目简介

CodeFlow AI 是一款无后端依赖的在线代码流程图生成工具，通过纯前端技术实现"代码上传→解析→AI生成流程图→可视化导出"的全闭环流程。帮助开发人员快速理解代码逻辑，降低梳理复杂代码结构的时间成本。

### 核心特性

- **无后端架构**：完全基于前端技术栈，无需部署服务器
- **AI 驱动**：利用 AI 大模型智能分析代码结构
- **精准聚焦**：支持指定方法/字段生成流程图
- **多语言支持**：JavaScript、TypeScript、Python、Java、Go、PHP
- **多格式导出**：SVG、PNG、PDF
- **隐私安全**：代码仅在本地处理，不上传服务器

---

## 功能特性

### 代码输入

| 功能 | 说明 |
|------|------|
| 文件上传 | 支持拖拽/点击上传代码文件 |
| 代码粘贴 | 支持直接粘贴代码文本 |
| 语言识别 | 自动识别代码语言类型 |
| 示例代码 | 内置多种语言的示例代码 |

### 代码解析

- 支持 6 种编程语言：JavaScript、TypeScript、Python、Java、Go、PHP
- 基于 tree-sitter 进行语法解析
- 提取函数、类、方法、字段等代码元素
- 分析方法之间的调用关系

### 流程图生成

| 图表类型 | 说明 |
|---------|------|
| Flowchart | 展示代码执行流程、逻辑分支 |
| Sequence Diagram | 展示对象/方法之间的调用时序 |

### 可视化编辑

- 实时预览生成的流程图
- 手动编辑 Mermaid 语法
- 缩放控制（50%-200%）
- 拖拽移动视图

### 导出功能

- **SVG**：矢量格式，无损缩放
- **PNG**：位图格式，方便分享
- **PDF**：文档格式，适合打印

---

## 技术栈

### 核心框架

| 技术 | 版本 | 用途 |
|-----|------|-----|
| Vue.js | 3.5.24 | 渐进式前端框架 |
| TypeScript | 5.9.3 | 类型安全 |
| Vite | 7.2.4 | 现代化构建工具 |
| Vue Router | 4.6.4 | 路由管理 |
| Pinia | 3.0.4 | 状态管理 |
| Element Plus | 2.13.0 | UI 组件库 |

### 专业功能库

| 库 | 版本 | 用途 |
|---|------|-----|
| Mermaid | 11.12.2 | 流程图渲染引擎 |
| web-tree-sitter | 0.26.3 | 代码解析器（WASM） |
| Axios | 1.13.2 | HTTP 客户端 |
| html2canvas | 1.4.1 | DOM 转图片 |
| jsPDF | 3.0.4 | PDF 生成 |

---

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装

```bash
# 克隆项目
git clone https://gitee.com/lifangxing1314/code-flow-ai.git
cd code-flow-ai

# 安装依赖
npm install
```

### 开发

```bash
# 启动开发服务器
npm run dev

# 访问 http://localhost:5173
```

### 构建

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

---

## 使用文档

### 1. 配置 API

首次使用需要配置 AI API 密钥：

1. 点击右上角「设置」按钮
2. 填写以下信息：
   - **API 密钥**：OpenAI 或兼容平台的 API Key
   - **API 端点**：API 服务地址（如 `https://api.openai.com`）
   - **模型名称**：如 `gpt-3.5-turbo`、`gpt-4` 等
3. 点击「保存设置」

### 2. 生成流程图

**方式一：上传文件**

1. 点击「上传文件」或拖拽文件到上传区
2. 等待代码解析完成
3. 选择目标方法（可选）
4. 选择图表类型
5. 点击「生成流程图」

**方式二：粘贴代码**

1. 点击「粘贴代码」
2. 将代码粘贴到编辑器中
3. 后续步骤同上

**方式三：使用示例**

1. 点击左侧「示例代码」按钮
2. 选择任意示例快速体验

### 3. 导出流程图

生成成功后，可以：

- **编辑**：点击「编辑代码」修改 Mermaid 语法
- **导出**：选择 SVG/PNG/PDF 格式导出

---

## 项目结构

```
code-flow-ai/
├── public/                      # 静态资源
│   └── wasm/                    # Tree-sitter WASM 文件
├── src/
│   ├── assets/                  # 资源文件
│   │   ├── examples/            # 示例代码
│   │   └── styles/              # 全局样式
│   ├── components/              # 公共组件
│   │   ├── CodeEditor.vue       # 代码编辑器
│   │   ├── FileUploader.vue     # 文件上传组件
│   │   ├── ParamConfig.vue      # 参数配置组件
│   │   ├── SettingsDialog/      # API 配置对话框
│   │   ├── HelpDialog/          # 帮助对话框
│   │   └── MermaidViewer.vue    # Mermaid 预览组件
│   ├── services/                # 业务服务
│   │   ├── ai/                  # AI 服务
│   │   ├── parser/              # 代码解析
│   │   └── export.ts            # 导出服务
│   ├── stores/                  # 状态管理
│   ├── views/                   # 页面视图
│   ├── router/                  # 路由配置
│   └── App.vue                  # 根组件
├── cloudflare-worker/           # Cloudflare Workers
├── index.html
├── vite.config.ts
└── package.json
```

---

## 支持的语言

| 语言 | 文件扩展名 | 状态 |
|-----|----------|------|
| JavaScript | `.js` | ✅ 支持 |
| TypeScript | `.ts` | ✅ 支持 |
| Python | `.py` | ✅ 支持 |
| Java | `.java` | ✅ 支持 |
| Go | `.go` | ✅ 支持 |
| PHP | `.php` | ✅ 支持 |

---

## 浏览器兼容性

| 浏览器 | 最低版本 |
|--------|---------|
| Chrome | 90+ |
| Edge | 90+ |
| Firefox | 88+ |
| Safari | 14+ |

---

## 常见问题

### Q: 为什么生成失败？

**A:** 可能的原因：
1. API 密钥配置错误或已过期
2. API 端点地址不正确
3. 网络连接问题

### Q: 代码会被上传到服务器吗？

**A:** 不会。您的代码只会在本地处理，并直接发送到您配置的 AI 服务。

### Q: 支持哪些 AI 平台？

**A:** 支持所有兼容 OpenAI API 协议的平台，如：
- OpenAI 官方
- Azure OpenAI
- 国内各种兼容 OpenAI 协议的服务

---

## 路线图

### v1.1 计划

- [ ] 支持更多编程语言（C/C++、Ruby、Swift）
- [ ] 添加更多流程图类型（ER 图、甘特图）
- [ ] 优化代码解析准确性
- [ ] 暗色模式支持

### v1.2 计划

- [ ] VS Code 插件
- [ ] 批量文件处理
- [ ] 项目级全景视图
- [ ] 自定义主题

---

## 贡献指南

欢迎提交 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

---

## 开源协议

本项目基于 [MIT](LICENSE) 协议开源。

---

## 联系方式

- **项目地址**：https://gitee.com/lifangxing1314/code-flow-ai
- **问题反馈**：[提交 Issue](https://gitee.com/lifangxing1314/code-flow-ai/issues)

---

<div align="center">

**如果这个项目对你有帮助，请给个 Star ⭐**

Made with ❤️ by [lifangxing](https://gitee.com/lifangxing1314)

</div>