把AI塞进可视化工作流:FlowMix工作流开源,3分钟让业务"活"起来

12333社保查询网www.sz12333.net.cn 2026-02-12来源:人力资源和社会保障局

  大家好,我是徐小夕。架构师,曾任职多家上市公司,多年架构经验,打造过上亿用户规模的产品,目前全职创业,主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”

  上期和大家分享了我们精心打磨的协同AI文档 JitWord:

  23年的时候就开始研究工作流,记得还在技术社区写了首个 React-Flow 的中文文档:

  后面结合很多粉丝和开发者的反馈,慢慢迭代,发现它可以做很多事情。

  当然这两年大厂也开源了很多工作流的方案,所以我也打算正式把flowmix/flow 可视化工作流,开源一版, 供大家研究参考。

  开源地址:https://github.com/MrXujiang/flowmix-flow

  下面和大家简单介绍一下这款工作流引擎。

  flowmix/flow 致力于提供一套开箱即用的流程可视化搭建底座, 来支撑各种复杂工作流场景的设计.

  同时汲取了市面上主流工作流引擎的设计经验, 并对性能做了极致的优化, 目前 flowmix/flow 的搭建性能和所见即所得的UI更新流畅度非常丝滑. 大家可以基于这套方案,结合AI技术轻松实现 AI Agent 工作流设计平台.

  接下来我就和大家介绍一下 flowmix/flow 的核心功能和使用场景. 大家也可以在下方公众号获取我们AI产品的更多资讯.

ps:大家可以基于我的开源方案,使用AI Coding,实现各种复杂的工作流产品~技术架构下面和大家分享一下这个项目使用的技术栈,供大家参考:
  • 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 图标库流程图核心
  • @xyflow/react 12.x - React 流程图库
  • 提供节点、边、画布等核心能力
  • 支持拖拽、缩放、平移
  • 高性能渲染引擎
  • @dagrejs/dagre 1.x - 有向图自动布局算法
  • 支持流程图自动排版
  • 优化节点位置计算拖拽交互
  • react-dnd 16.x - React 拖拽库
  • HTML5 拖拽 API 封装
  • 支持拖拽排序、拖拽创建
  • react-dnd-html5-backend 16.x - 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
  • react-sticky-box 2.x - 粘性定位组件
  • refline.js 0.11.x - 参考线组件
  • 提供辅助对齐功能导出功能
  • dom-to-image 2.x - DOM 转图片
  • 支持导出流程图为图片
  • file-saver 2.x - 文件下载
  • 支持保存文件到本地

      核心功能介绍

      最近更新了几个非常有价值的功能, 这里和大家一一分享一下.

    1. 支持节点动画配置

      目前整套设计架构支持了多种类型的属性编辑, 比如样式, 数据, 动画等, 动画目前支持了海量的动画素材, 可以轻松给节点配置不同的动画效果, 并设置动画的时长, 次数等.

    2. 支持参考线吸附

      目前流程设计器的每个节点都支持参考线吸附, 大家可以更精准的设计工作流, 后续还会做更多设计辅助的优化, 让拖拽体验达到业内Top 1级别的水平.

    3. 节点自动创建和自动连线

      我已经实现了单机节点, 可以在节点后面自动创建节点, 同时对整个工作流进行自动连线. 后期会实现点击“+”号, 支持选择不同的节点进行创建.

    4. 边的自动创建和节点自动化布局

      我们可以看到,在边上点击也会出现“+”号, 并且可以在两个节点之间创建新节点, 其他节点位置会自动计算和布局. 这个方案的实现,是我写的一个布局算法, 大家可以持续优化它, 支持更复杂的布局场景.

    5. 可操作的图层管理面板

      当这个是一个非常有用且能提高操作效率的功能,后续我会持续迭代图层面板.

      开源地址:https://github.com/MrXujiang/flowmix-flow

      应用案例深度剖析

      我最初设计 flowmix/flow 目的是让它实现自动化 AI Agent 业务流, 后面发现它可以做的事情很多, 为了让大家更快的感受 flowmix 的能力, 我于是开源了一个流程编辑器, 也就是 flowmix/flow, 基于它我总结了几个典型应用场景, 这里给大家分享一下.

    1. 产品/技术架构图设计2. 组织结构图设计3. 思维导图设计器4. 多画布设计支持5. 任务管理 + 流程看板

      当然还有很多场景大家可以一起探索,欢迎大家学习反馈~

    高性能设计, 支撑上千复杂节点编辑, 异步分片渲染

      flowmix/flow 的节点元素不是一次性渲染到画布上, 而是一次只渲染可见区域的内容, 保证了大量节点也能轻松加载, 同时对于搭建系统的状态管理, 为了支撑大数据量的渲染和状态更新, 我对 antd form组件的更新性能做了进一步优化, 并且采用zustand 作为状态管理库.(号称react状态管理性能之王)

    支持自定义节点连接线

      流程图的连接线是一个很重要的环节, 这里我对连接线也提供了一定的搭建配置能力, 如下图所示:

      大家可以基于我的开源方案, 借助AI来实现真正的业务自动化方案.

    我们最近上线的一款AI协同文档

      如果大家感兴趣, 也可以参考研究一下,我开源了一个sdk,供大家本地使用:

      github:https://github.com/MrXujiang/jitword-sdk

    本文标题:把AI塞进可视化工作流:FlowMix工作流开源,3分钟让业务"活"起来本文网址:https://www.sz12333.net.cn/zhzx/kexue/57652.html 编辑:12333社保查询网
  • 本站是社保查询公益性网站链接,数据来自各地人力资源和社会保障局,具体内容以官网为准。
    定期更新查询链接数据 苏ICP备17010502号-11