strawberry

KO | EN

gitlite — search

#python #typescript #llm #golang #go #rust #deep-learning #windows #kubernetes #awesome-list #pytorch #security #mcp #ios

(★ 10)

拓扑图流程图工作流

strawberry Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Strawberry AI 流程图生成系统

> 基于原 Strawberry 流程图编辑器的 AI 增强版本
> 通过自然语言描述，一键生成专业流程图

---

## 项目简介

Strawberry AI 是在原 Strawberry 流程图编辑器基础上进行的 AI 驱动改造，实现了从自然语言描述自动生成流程图的能力。用户只需用文字描述流程，AI 即可自动生成结构化、布局合理的流程图，极大提升了流程图绘制效率。

### 核心价值

- **10倍效率提升**：从手动拖拽到自然语言生成，节省90%的时间
- **零学习成本**：无需学习复杂的绘图工具，会说话就会画图
- **灵活可控**：AI生成 + 手动微调的混合模式，兼顾效率与精确
- **多模型支持**：支持OpenAI、Claude、通义千问、豆包等主流大模型
- **增强导出**：支持PNG、PDF、JSON、Markdown等多种格式

---

## 功能特性

### AI自动生成

- **自然语言输入**：用文字描述流程，无需手动拖拽
- **智能理解**：AI理解流程逻辑，自动识别分支、循环、并行
- **自动布局**：基于层次布局算法，生成美观的流程图
- **多模型切换**：随时切换不同的AI模型

### 大模型支持

| 模型 | 提供商 | 特点 |
|------|--------|------|
| **GPT-4** | OpenAI | 理解准确，响应快速 |
| **Claude 3.5** | Anthropic | 逻辑清晰，上下文理解强 |
| **通义千问** | 阿里云 | 国内访问快，中文优化 |
| **豆包** | 字节跳动 | 成本低，性能稳定 |
| **自定义** | 任意 | 支持企业内部模型 |

### 原有功能保留

- 手动拖拽绘图
- 40+种预置图形
- 节点编辑和属性设置
- 连接线管理
- 撤销/重做（支持100,007步）
- 小地图导航
- 对齐工具
- XML格式保存

### 增强导出

- **PNG**：高清位图，适合插入文档
- **PDF**：矢量文档，适合打印分享
- **JSON**：完整数据，支持程序化处理
- **XML**：原有格式，向下兼容
- **Markdown**：文本描述，便于文档化

---

## 快速开始

### 1. 打开应用

在浏览器中打开 `index.html`

### 2. 配置API（首次使用）

点击左侧 AI 面板的 **"配置"** 按钮，填入API配置：

**OpenAI示例：**
```
API Key: sk-proj-xxxxxxxxxxxxx
Base URL: https://api.openai.com/v1
Model: gpt-4o
```

### 3. 生成流程图

在输入框中描述流程：
```
创建一个用户登录流程：
1. 用户访问登录页
2. 输入用户名和密码
3. 点击登录按钮
4. 系统验证凭证
5. 如果验证成功，跳转到主页
6. 如果验证失败，显示错误并返回登录页
```

选择AI模型，点击 **"生成流程图"**

### 4. 调整和导出

- 手动调整节点位置
- 修改文字内容
- 导出为PNG/PDF/JSON等格式

---

## 项目结构

```
strawberry/
├── index.html                      # 主应用入口
├── AI_USAGE_GUIDE.md               # 详细使用指南
├── css/
│   ├── flowPath.css                # 原有样式
│   └── ai-panel.css                # AI面板样式（新增）
├── js/
│   ├── ai/                         # AI模块（新增）
│   │   ├── PromptTemplates.js      # 提示词模板
│   │   ├── ModelAdapter.js         # 适配器基类
│   │   ├── ConfigManager.js        # 配置管理
│   │   ├── AIFlowGenerator.js      # 核心生成器
│   │   └── adapters/               # 各模型适配器
│   │       ├── OpenAIAdapter.js
│   │       ├── ClaudeAdapter.js
│   │       ├── QwenAdapter.js
│   │       ├── DoubaoAdapter.js
│   │       └── CustomAdapter.js
│   ├── layout/                     # 布局算法（新增）
│   │   └── AutoLayout.js           # 自动布局
│   ├── export/                     # 导出功能（新增）
│   │   └── EnhancedExport.js       # 增强导出
│   ├── BaseTool.js                 # 原有核心工具
│   ├── ModeTool.js                 # 节点管理
│   ├── LineTool.js                 # 连接线管理
│   ├── Global.js                   # 全局对象（已修改）
│   ├── Utils.js                    # 工具函数（已修改）
│   └── ...                         # 其他原有文件
├── images/                         # 图形资源库
└── themes/                         # EasyUI主题
```

---

## 技术架构

### 系统架构

```
┌─────────────────────────────────────────────────┐
│                  用户界面层                       │
│  ┌──────────────┐      ┌──────────────────┐    │
│  │  AI输入面板  │      │  原有绘图工具     │    │
│  └──────────────┘      └──────────────────┘    │
└─────────────┬────────────────────┬──────────────┘
              ▼                    ▼
┌──────────────────────────────────────────────────┐
│               业务逻辑层（新增）                   │
│  ┌─────────────────────────────────────┐        │
│  │  AIFlowGenerator - AI流程图生成器   │        │
│  │  ModelAdapter - 大模型适配层         │        │
│  │  AutoLayout - 自动布局算法           │        │
│  └─────────────────────────────────────┘        │
└─────────────┬────────────────────────────────────┘
              ▼
┌──────────────────────────────────────────────────┐
│               原有核心层（保留）                    │
│  ModeTool | LineTool | BaseTool | BeanXml       │
└──────────────────────────────────────────────────┘
```

### 工作流程

```
1. 用户输入自然语言描述
   ↓
2. AIFlowGenerator调用大模型API
   ↓
3. 大模型返回结构化JSON数据
   {nodes: [...], edges: [...]}
   ↓
4. AutoLayout计算节点坐标
   ↓
5. 调用ModeTool创建节点
   ↓
6. 调用LineTool创建连接线
   ↓
7. 渲染到画布
   ↓
8. 用户可手动调整
```

---

## 改造详情

### 新增文件

**AI核心模块**（约3,600行代码）：
- `js/ai/PromptTemplates.js` - 提示词模板系统
- `js/ai/ModelAdapter.js` - 大模型适配器基类
- `js/ai/ConfigManager.js` - 配置管理器
- `js/ai/AIFlowGenerator.js` - 核心生成器
- `js/ai/adapters/OpenAIAdapter.js` - OpenAI适配器
- `js/ai/adapters/ClaudeAdapter.js` - Claude适配器
- `js/ai/adapters/QwenAdapter.js` - 通义千问适配器
- `js/ai/adapters/DoubaoAdapter.js` - 豆包适配器
- `js/ai/adapters/CustomAdapter.js` - 自定义模型适配器

**布局算法**（约400行代码）：
- `js/layout/AutoLayout.js` - 层次布局算法

**增强导出**（约500行代码）：
- `js/export/EnhancedExport.js` - PNG/PDF/JSON/Markdown导出

**样式文件**：
- `css/ai-panel.css` - AI面板样式

**文档**：
- `AI_USAGE_GUIDE.md` - 详细使用指南
- `README.md` - 项目说明（本文件）

### 修改文件

- `index.html` - 添加AI面板UI、脚本引用、初始化调用
- `js/Global.js` - 添加AI相关全局对象
- `js/Utils.js` - 集成AI功能入口方法

### 未修改文件

保持原样，确保兼容性：
- `js/BaseTool.js` - 核心绘制逻辑
- `js/ModeTool.js` - 节点管理
- `js/LineTool.js` - 连接线管理
- `js/BeanXml.js` - XML序列化
- 其他所有原有文件

---

## 依赖库

### 原有依赖
- jQuery 1.6
- EasyUI

### 新增依赖（通过CDN加载）
- html2canvas 1.4.1 - PNG导出
- jsPDF 2.5.1 - PDF导出

---

## 浏览器兼容性

### 推荐浏览器
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

### 原有功能兼容
- IE 9+（使用VML渲染）

### AI功能要求
- 支持Fetch API
- 支持Promise
- 支持localStorage
- 不支持IE浏览器

---

## 使用示例

### 示例1：用户注册流程

**描述：**
```
用户注册流程：
1. 用户填写注册表单
2. 提交注册信息
3. 验证邮箱格式
4. 验证密码强度
5. 检查用户名是否已存在
6. 如果用户名已存在，提示重新输入
7. 如果用户名可用，创建账户
8. 发送验证邮件
9. 用户点击邮件链接
10. 激活账户
11. 注册完成
```

**生成结果：**
- 11个节点（1个start、1个end、7个process、2个decision）
- 自动识别2个判断分支
- 层次布局，清晰易读

### 示例2：订单处理

**描述：**
```
电商订单处理流程：
开始 → 接收订单 → 检查库存
如果库存充足：
  → 锁定库存 → 生成支付单 → 等待支付
  → 检查支付结果
  → 如果支付成功：减少库存 → 创建物流单 → 发货 → 完成
  → 如果支付失败：释放库存 → 取消订单 → 结束
如果库存不足：
  → 通知客户 → 订单关闭 → 结束
```

**生成结果：**
- 多分支结构
- 正确处理嵌套判断
- 多个结束节点

---

## API成本参考

### 单次生成成本

| 模型 | 约成本 | 说明 |
|------|-------|------|
| OpenAI GPT-4o | $0.02-0.05 | 中等复杂度流程图 |
| Claude 3.5 Sonnet | $0.01-0.03 | 性价比高 |
| 通义千问 | ¥0.01-0.03 | 国内用户推荐 |
| 豆包 | ¥0.005-0.02 | 成本最低 |

### 成本优化建议

1. **选择合适模型**：简单流程使用国产模型
2. **描述精简**：避免冗余描述
3. **缓存结果**：相似流程可保存模板复用
4. **分步生成**：复杂流程分多次生成

---

## 安全性说明

### API Key安全

- API Key存储在浏览器localStorage
- 仅本地存储，不会上传到服务器
- 建议不要在公共电脑上保存配置
- 可随时清除或重置配置

### 隐私保护

- 所有数据处理在客户端完成
- 仅与选定的AI服务提供商通信
- 不收集任何用户数据
- 开源代码，可自行审查

---

## 开发指南

### 扩展自定义模型

如需接入企业内部大模型，参考 `CustomAdapter.js`：

```javascript
var MyAdapter = (function() {
    function MyAdapter(config) {
        ModelAdapter.call(this, config);
    }

MyAdapter.prototype = Object.create(ModelAdapter.prototype);

MyAdapter.prototype.generateFlowchart = function(description) {
        // 实现你的API调用逻辑
        // 返回 {nodes: [], edges: []} 格式
    };

return MyAdapter;
})();
```

### 自定义布局算法

可在 `AutoLayout.js` 中添加新的布局方法：
- `forceDirectedLayout()` - 力导向布局
- `gridLayout()` - 网格布局
- 自定义算法...

### 自定义提示词

修改 `PromptTemplates.js` 中的 `SYSTEM_PROMPT` 和 `EXAMPLES` 来优化生成效果。

---

## 故障排查

### 常见问题

**Q: 生成失败，提示API Key无效？**
A: 检查配置中的API Key是否正确，是否有足够的额度。

**Q: 生成的流程图不符合预期？**
A: 优化流程描述，提供更详细的步骤说明，或手动调整生成结果。

**Q: 导出PNG/PDF失败？**
A: 检查是否有网络问题导致第三方库加载失败，可查看浏览器控制台。

**Q: 如何使用国内大模型？**
A: 选择"通义千问"或"豆包"，配置相应的API Key即可。

### 调试方法

1. 打开浏览器开发者工具（F12）
2. 查看Console标签的错误信息
3. 查看Network标签的API请求详情
4. 检查localStorage中的配置

---

## 性能优化

### 生成速度

- 简单流程（5个节点）：2-3秒
- 中等流程（10-15个节点）：3-5秒
- 复杂流程（20+个节点）：5-10秒

### 优化建议

1. **描述精简**：避免过于冗长的描述
2. **分步生成**：大流程分多次生成后合并
3. **选择快速模型**：如通义千问、豆包
4. **本地缓存**：常用流程保存为JSON模板

---

## 更新历史

### v2.0 (2026-03-27) - AI增强版

**重大更新：**
- 全新AI自动生成功能
- 支持5种大模型
- 智能自动布局
- 增强导出功能

**代码统计：**
- 新增代码：约4,500行
- 修改代码：约200行
- 新增文件：15个
- 修改文件：3个

### v1.0 - 原始版本

- 手动流程图编辑器
- 基础绘图功能
- XML保存/加载

---

## 路线图

### 已完成 ✅
- [x] AI自动生成流程图
- [x] 多大模型支持
- [x] 自动布局算法
- [x] 增强导出功能
- [x] 配置管理

### 计划中 🚧
- [ ] 流式生成（实时显示生成过程）
- [ ] AI优化建议（分析现有流程图）
- [ ] 模板库（保存常用流程模板）
- [ ] 协同编辑（多人实时协作）
- [ ] 版本控制（Git集成）
- [ ] 国际化（多语言支持）

---

## 贡献指南

欢迎贡献代码和建议！

### 开发环境

1. Clone项目
2. 在浏览器中直接打开 `index.html`
3. 无需编译或构建步骤

### 提交规范

- 遵循现有代码风格
- 添加必要的注释
- 测试新功能是否与原有功能兼容

---

## 许可证

Apache License 2.0

原项目和AI增强模块均遵循此许可证。

---

## 致谢

- **原项目**：Strawberry流程图编辑器
- **AI模型**：OpenAI、Anthropic、阿里云、字节跳动
- **开源库**：jQuery、EasyUI、html2canvas、jsPDF

---

## 联系方式

- **项目地址**：/Users/xiaojiwei/IdeaProjects/strawberry
- **问题反馈**：通过GitHub Issues提交
- **使用指南**：查看 AI_USAGE_GUIDE.md

---

**Happy Coding! 🎉**

strawberry

strawberry Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

strawberry

strawberry Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README