演示地址：http://flowmix.turntip.cn/flow
体验地址：https://jitword.com
开源地址：https://github.com/MrXujiang/flowmix-flow
文档地址：https://ai.flowmix.cn/
下面和大家简单介绍一下这款工作流引擎。
flowmix/flow 致力于提供一套开箱即用的流程可视化搭建底座, 来支撑各种复杂工作流场景的设计.
同时汲取了市面上主流工作流引擎的设计经验, 并对性能做了极致的优化, 目前 flowmix/flow 的搭建性能和所见即所得的UI更新流畅度非常丝滑. 大家可以基于这套方案，结合AI技术轻松实现 AI Agent 工作流设计平台.
| 分类 | 库/技术 | 版本 | 说明 |
|---|---|---|---|
| 核心框架 | Umi | 4.x | 企业级前端应用框架，基于 React 18，内置路由、构建、部署等完整解决方案，支持约定式路由和配置式路由 |
| React | 18 | 前端 UI 框架，使用函数式组件 + Hooks，支持 Suspense 懒加载优化 | |
| TypeScript | 5.x | 类型安全的 JavaScript 超集，提供完整的类型检查，提升代码可维护性和开发体验 | |
| UI 组件 | Ant Design | 5.x | 企业级 UI 组件库，提供 Button、Drawer、Popover、Tooltip 等组件，内置主题定制能力 |
| @ant-design/icons | - | Ant Design 配套图标库 | |
| 流程图核心 | @xyflow/react | 12.x | React 流程图库，提供节点、边、画布等核心能力，支持拖拽、缩放、平移，高性能渲染引擎 |
| @dagrejs/dagre | 1.x | 有向图自动布局算法库，支持流程图自动排版，优化节点位置计算 | |
| 拖拽交互 | react-dnd | 16.x | React 拖拽库，基于 HTML5 拖拽 API 封装，支持拖拽排序、拖拽创建 |
| react-dnd-html5-backend | 16.x | react-dnd 的 HTML5 拖拽后端实现 | |
| react-draggable | 4.x | 元素拖拽组件，支持元素自由拖拽和位置调整 | |
| 状态管理 | Zustand | 4.x | 轻量级状态管理库，具有简洁的 API 设计，支持时间旅行（撤销/重做），无需 Provider 包裹 |
| 可视化与图表 | @visactor/vchart | 1.x | 可视化图表库，支持多种图表类型，高性能渲染 |
| 工具库 | nanoid | 5.x | 唯一 ID 生成器，小巧、安全、快速，用于节点和边的 ID 生成 |
| axios | 1.x | HTTP 客户端，用于 API 请求，支持请求/响应拦截 | |
| classnames | 2.x | CSS 类名管理工具，方便条件类名组合 | |
| immutability-helper | 3.x | 不可变数据操作工具，简化复杂数据结构的更新 | |
| react-use | 17.x | React Hooks 工具集，提供常用 Hooks | |
| UI 工具组件 | react-sticky-box | 2.x | 粘性定位组件 |
| refline.js | 0.11.x | 参考线组件，提供辅助对齐功能 | |
| 导出功能 | dom-to-image | 2.x | 将 DOM 转换为图片的库，支持导出流程图为图片 |
| file-saver | 2.x | 文件下载库，支持保存文件到本地 |
FlowMix Flow - 流程设计与可视化平台
✨ 核心功能介绍
最近更新了几个非常有价值的功能，这里和大家一一分享一下：
1.支持节点动画配置
目前整套设计架构支持了多种类型的属性编辑，比如样式、数据、动画等。动画目前支持海量的动画素材，可以轻松给节点配置不同的动画效果，并设置动画的时长、次数等参数。
2.支持参考线吸附
流程设计器的每个节点都支持参考线吸附功能，让用户能够更精准地设计工作流。后续还将持续优化设计辅助功能，让拖拽体验达到业内领先水平。
3.节点自动创建和自动连线
目前已实现单击节点后，可以在节点后面自动创建新节点，同时对整个工作流进行自动连线。后期计划实现点击"+"号时，支持选择不同类型的节点进行创建。
4.边的自动创建和节点自动化布局
在边上点击也会出现"+"号，支持在两个节点之间创建新节点，其他节点位置会自动计算并重新布局。这是通过自主研发的布局算法实现的，后续还将优化支持更复杂的布局场景。
5.可操作的图层管理面板
当画布中的元素很多时，快速定位具体节点变得非常重要。为此实现了图层管理面板，并支持节点反选图层功能。图层面板支持多选组件，选中的组件会在画布中高亮显示。后续将为图层面板添加更多实用功能。
🌐 访问地址
- 在线体验: http://flowmix.turntip.cn/flow
- 开源代码: https://github.com/MrXujiang/flowmix-flow
📊 场景案例分享
FlowMix/Flow 最初的设计目标是实现自动化 AI Agent 生成，但在研发过程中发现它的应用场景远不止于此。为了让用户更快地感受 FlowMix 的能力，我们先推出了流程编辑器（FlowMix/Flow），并基于此设计了几个典型应用场景：
1.产品/技术架构图
适用于绘制清晰的产品架构图、技术组件关系图等。
2.组织结构图
支持绘制企业组织架构、团队分工图表等。
3.思维导图
满足知识梳理、头脑风暴等思维导图绘制需求。
4.多画布设计
支持多个画布同时编辑，适合复杂项目管理和大型系统设计。
5.任务管理 + 流程看板
结合任务管理和流程看板功能，适用于项目管理、工作流跟踪等场景。
高性能设计, 支撑上千复杂节点编辑, 异步分片渲染
flowmix/flow 的节点内容不是一次性渲染到画布上, 而是一次只渲染可见区域的内容, 保证了大量节点也能轻松加载, 同时对于搭建系统的状态管理, 为了支撑大数据量的渲染和状态更新, 我对 antd form 组件的更新性能做了进一步优化, 并且采用zustand 作为状态管理库.(号称react状态管理性能之王)
支持自定义节点连接线
流程图的连接线是一个很重要的环节, 这里我对连接线也提供了一定的搭建配置能力, 如下图所示:
