# flowMaking

**Repository Path**: wangshengliang/flow-making

## Basic Information

- **Project Name**: flowMaking
- **Description**: 基于vue3+js+elementPlus+antX-V6开发的流程图demo
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-04
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 流程图制作工具 (Flow Making Tool)

一个功能强大的可视化流程图制作工具，基于 Vue 3 + Vite 开发，使用 AntV X6 图形库实现专业的流程图编辑功能。

## 功能特性

- 🎨 **直观的可视化编辑界面** - 拖拽式操作，所见即所得
- 📦 **丰富的节点类型** - 支持开始节点、结束节点、处理节点、条件节点等多种节点类型
- 🔗 **灵活的连接方式** - 支持普通连接、条件连接、并行连接等多种连接类型
- ⚡ **高效的操作体验** - 拖拽、缩放、平移等操作流畅自然
- 🎯 **详细的节点属性编辑** - 支持编辑节点文本、样式、属性等
- 📋 **完整的撤销/重做功能** - 支持多级撤销和重做操作
- 💾 **多种导出格式** - 支持导出为 JSON、PNG 等格式
- 🎪 **响应式设计** - 适配不同屏幕尺寸，在各种设备上都能正常使用
- 🔧 **自动布局** - 支持流程图的自动布局，使图表更加美观
- 🔍 **智能连线** - 自动避开障碍物，生成最优连线路径

## 系统截图

### 整体界面

![alt text](./image.png)

### 节点类型

![alt text](./imageNode.png)    

### 编辑功能

![alt text](./imageEdit.png)

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite 7+
- **图形库**: AntV X6 3.0+
- **UI组件库**: Element Plus 2.11+
- **路由管理**: Vue Router 4.6+
- **样式处理**: SCSS

## 安装与运行

### 环境要求

- Node.js 18.x 或更高版本
- npm 9.x 或更高版本
- Git

### 安装依赖

```bash
npm install
```

### 开发模式运行

```bash
npm run dev
```

访问 http://localhost:5173 查看应用

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 项目结构

```
flow-making/
├── src/
│   ├── api/                  # API 相关文件
│   │   ├── antV-x6/          # AntV X6 相关 API
│   │   │   ├── CellShapeManager.js  # 节点形状管理
│   │   │   ├── InitGraph.js         # 画布初始化
│   │   │   ├── FlowChartLayout.js   # 流程图布局
│   │   │   ├── FlowChartValidate.js # 流程图验证
│   │   │   ├── FlowLinkValidate/    # 连线验证
│   │   │   ├── FlowNodeValidate/    # 节点验证
│   │   │   └── Util.js              # 工具函数
│   │   └── json.js           # JSON 数据处理
│   ├── assets/               # 静态资源
│   ├── components/           # 组件
│   │   ├── FlowModal.vue     # 模态框组件
│   │   ├── FlowOperationBar.vue  # 操作栏组件
│   │   ├── FlowRightPanel.vue     # 右侧面板组件
│   │   └── FlowToolbar.vue        # 工具栏组件
│   ├── router/               # 路由配置
│   │   └── route.js          # 路由定义
│   ├── views/                # 页面视图
│   │   └── flowMaking.vue    # 主视图
│   ├── App.vue               # 根组件
│   ├── main.js               # 入口文件
│   └── style.css             # 全局样式
├── index.html                # HTML 模板
├── package.json              # 项目配置
├── vite.config.js            # Vite 配置
└── README.md                 # 项目说明
```

## 使用指南

### 基础操作

1. **添加节点**: 从左侧工具栏拖拽节点到画布
2. **连接节点**: 点击源节点的输出端口，拖拽到目标节点的输入端口
3. **编辑节点**: 点击节点，在右侧面板编辑节点属性
4. **删除节点**: 选中节点后按 `Delete` 键或点击删除按钮
5. **移动画布**: 按住空白处拖拽或使用鼠标滚轮平移
6. **缩放画布**: 使用鼠标滚轮缩放或使用缩放控件
7. **撤销/重做**: 使用操作栏的撤销/重做按钮
8. **保存/导出**: 使用操作栏的保存或导出功能

### 高级功能

1. **自动布局**: 点击操作栏的自动布局按钮，系统会自动调整节点位置
2. **节点嵌入**: 支持将节点嵌入到块节点中，实现更复杂的流程结构
3. **条件分支**: 使用条件节点创建复杂的分支流程
4. **并行流程**: 使用并行块创建并行执行的流程

## 核心功能说明

### 节点类型

- **开始节点**: 流程的起点，只能有一个
- **结束节点**: 流程的终点，可多个
- **处理节点**: 表示一个处理步骤
- **条件节点**: 用于创建分支流程
- **子流程节点**: 表示一个子流程

### 块节点

- **串行块**: 内部节点串行执行
- **并行块**: 内部节点并行执行
- **条件块**: 用于复杂的条件分支

### 连接类型

- **普通连接**: 标准的流程连接
- **条件连接**: 带条件的流程连接
- **并行连接**: 并行流程的连接

## 开发说明

### 组件说明

- `FlowToolbar.vue`: 提供节点类型选择和常用操作
- `FlowOperationBar.vue`: 提供撤销/重做、保存、导出等功能
- `FlowRightPanel.vue`: 提供节点属性编辑功能
- `FlowModal.vue`: 用于显示各种模态框
- `flowMaking.vue`: 主视图，整合所有组件

### API说明

- `json.js`: 处理流程图数据的JSON示例
- `antV-x6/CellShapeManager.js`: 定义和注册自定义节点形状
- `antV-x6/InitGraph.js`: 初始化画布配置和事件处理
- `antV-x6/FlowChartLayout.js`: 实现流程图的自动布局算法
- `antV-x6/FlowChartValidate.js`: 验证流程图的合法性
- `antV-x6/Util.js`: 提供各种工具函数

### 扩展开发

1. **添加自定义节点**: 在 `CellShapeManager.js` 中注册新的节点类型
2. **添加自定义连线**: 在 `getEdgeShapes` 方法中添加新的连线类型
3. **修改布局算法**: 修改 `FlowChartLayout.js` 中的布局逻辑
4. **添加新功能**: 在对应组件中实现新功能

## 浏览器支持

- Chrome (推荐，版本 90+)
- Firefox (版本 88+)
- Safari (版本 14+)
- Edge (版本 90+)

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！

### 贡献指南

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

## 常见问题

### Q: 如何添加自定义节点？

A: 在 `src/api/antV-x6/CellShapeManager.js` 文件中，通过 `getNodeShapes` 方法注册新的节点类型。

### Q: 如何修改连线样式？

A: 在 `src/api/antV-x6/CellShapeManager.js` 文件中，通过 `getEdgeShapes` 方法修改连线样式。

### Q: 如何导出流程图？

A: 使用操作栏的导出按钮，可以导出为 JSON 或 PNG 格式。

### Q: 如何使用自动布局？

A: 点击操作栏的自动布局按钮，系统会自动调整节点位置，使流程图更加美观。

## 联系方式

如有问题或建议，请联系项目维护者。

- **项目地址**: [https://github.com/yourusername/flow-making](https://github.com/yourusername/flow-making)
- **邮箱**: your.email@example.com

## 更新日志

### v1.0.0 (2026-01-23)

- ✨ 首次发布
- 🎉 实现基本流程图编辑功能
- 📦 支持多种节点类型和连接方式
- 💾 支持导出和保存功能
- 🎨 实现自动布局功能

---

**感谢使用流程图制作工具！** 🎉