演示地址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 工作流设计平台.分类库/技术版本说明核心框架Umi4.x企业级前端应用框架基于 React 18内置路由、构建、部署等完整解决方案支持约定式路由和配置式路由React18前端 UI 框架使用函数式组件 Hooks支持 Suspense 懒加载优化TypeScript5.x类型安全的 JavaScript 超集提供完整的类型检查提升代码可维护性和开发体验UI 组件Ant Design5.x企业级 UI 组件库提供 Button、Drawer、Popover、Tooltip 等组件内置主题定制能力ant-design/icons-Ant Design 配套图标库流程图核心xyflow/react12.xReact 流程图库提供节点、边、画布等核心能力支持拖拽、缩放、平移高性能渲染引擎dagrejs/dagre1.x有向图自动布局算法库支持流程图自动排版优化节点位置计算拖拽交互react-dnd16.xReact 拖拽库基于 HTML5 拖拽 API 封装支持拖拽排序、拖拽创建react-dnd-html5-backend16.xreact-dnd 的 HTML5 拖拽后端实现react-draggable4.x元素拖拽组件支持元素自由拖拽和位置调整状态管理Zustand4.x轻量级状态管理库具有简洁的 API 设计支持时间旅行撤销/重做无需 Provider 包裹可视化与图表visactor/vchart1.x可视化图表库支持多种图表类型高性能渲染工具库nanoid5.x唯一 ID 生成器小巧、安全、快速用于节点和边的 ID 生成axios1.xHTTP 客户端用于 API 请求支持请求/响应拦截classnames2.xCSS 类名管理工具方便条件类名组合immutability-helper3.x不可变数据操作工具简化复杂数据结构的更新react-use17.xReact Hooks 工具集提供常用 HooksUI 工具组件react-sticky-box2.x粘性定位组件refline.js0.11.x参考线组件提供辅助对齐功能导出功能dom-to-image2.x将 DOM 转换为图片的库支持导出流程图为图片file-saver2.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状态管理性能之王)支持自定义节点连接线流程图的连接线是一个很重要的环节, 这里我对连接线也提供了一定的搭建配置能力, 如下图所示: