2026 年 2 月，曾打造过上亿用户规模产品的架构师徐小夕，正式开源了一款颠覆性的可视化工作流编辑器 ——FlowMix。这款基于 React-Flow 构建的 AI + 多模态流程设计引擎，以原子化组件、极致性能和高度可配置为核心优势，支持离线部署与自由拖拽，让普通人无需复杂编程，3 分钟就能搭建出企业级业务流程。从产品架构图到 AI Agent 工作流，从思维导图到任务看板，FlowMix 的开源不仅填补了轻量级可视化工作流的市场空白，更降低了 AI 与业务流程结合的落地门槛。
一、核心定位：开箱即用的流程可视化搭建底座
FlowMix 的核心目标是提供一套 “拿来就用” 的技术底座，支撑各类复杂工作流场景设计。不同于大厂开源方案的厚重复杂，它聚焦 “轻量高效”，汲取主流工作流引擎设计经验后，对性能进行极致优化，搭建过程丝滑流畅，所见即所得的 UI 更新体验堪称业内顶尖。
其核心特性尤为突出：
-
低门槛易操作：全程可视化拖拽设计，无需专业编程知识，小白也能快速上手；
-
高扩展性：支持原子化组件配置，可按需扩展功能，适配从简单流程图到复杂 AI 工作流的各类需求；
-
性能强悍：采用异步分片渲染技术，仅渲染可见区域内容，支撑上千复杂节点编辑无压力；
-
灵活部署：支持离线部署，满足企业私有化部署需求，数据安全更有保障；
-
AI 原生支持：可无缝集成 AI 能力，轻松搭建 AI Agent 工作流平台，让流程具备智能决策与自动化执行能力。
目前，FlowMix 已在 GitHub 获得 161 星标、35 次分叉，演示地址与开源地址全面开放，成为开发者搭建业务流程的热门选择。
二、技术架构：轻量化设计，兼顾性能与扩展性
FlowMix 采用分层架构设计，技术栈选型贴合企业级应用需求，既保证了性能稳定性，又降低了二次开发门槛，具体架构与核心技术栈如下：
1. 四层技术架构
-
用户界面层：包含首页、编辑器、预览页三大核心页面，提供直观的操作入口；
-
组件层：封装 Header、Panel、Canvas、Flow、Config 等基础组件，支持参考线（RefLine）辅助对齐，提升搭建精准度；
-
状态管理层：基于 Zustand 4.x 实现轻量级状态管理，支持节点数据、边数据、视口状态的实时同步，以及历史记录的撤销 / 重做（时间旅行功能），无需 Provider 包裹，性能更优；
-
数据服务层：提供完整的 API 接口，涵盖页面列表获取、详情查询、更新、添加、删除等核心操作，支持与后端系统无缝对接。
2. 核心技术栈
-
前端框架：Umi 4.x（企业级前端框架，内置路由、构建、部署方案）+ React 18（函数式组件 + Hook，Suspense 懒加载优化）；
-
类型安全：TypeScript 5.x，提供完整类型检查，提升代码可维护性；
-
UI 组件：Ant Design 5.x + @ant-design/icons，支持主题定制，组件丰富且易用；
-
流程图核心：@xyflow/react 12.x（高性能流程图库，支持拖拽、缩放、平移）+ @dagrejs/dagre 1.x（有向图自动布局算法）；
-
交互体验：react-dnd 16.x（拖拽库）+ react-draggable 4.x（元素拖拽组件），实现流畅拖拽交互；
-
可视化与工具：@visactor/vchart 1.x（图表库）、nanoid 5.x（ID 生成器）、axios 1.x（HTTP 客户端）等，覆盖各类功能需求；
-
导出功能：dom-to-image 2.x（流程图转图片）+ file-saver 2.x（文件下载），支持流程成果本地保存。
三、五大核心功能：让流程搭建更高效、更灵活
FlowMix 在用户体验与功能实用性上做了深度优化，近期更新的五大核心功能，彻底解决了传统工作流编辑器操作复杂、精度不足、扩展性差等痛点：
1. 节点动画配置：让流程可视化更生动
支持为节点配置跳动、闪烁、脉冲、果冻、摇摆等海量动画效果，可自定义动画持续时间、延迟时间与播放次数（大于 500 次自动循环），还能对样式、数据进行精细化编辑，让流程演示更具表现力，适用于方案汇报、培训演示等场景。
2. 参考线吸附：精准对齐，搭建更规范
每个节点都支持参考线吸附功能，拖拽节点时自动显示辅助对齐线，帮助用户快速实现节点精准布局，避免手动调整的繁琐，让流程图表更整洁规范，后续还将优化更多设计辅助功能，冲击业内顶尖拖拽体验。
3. 节点自动创建与连线：高效搭建无压力
单击节点即可在其后自动创建新节点，并完成自动连线，无需手动添加连接关系；后续将支持点击 “+” 号选择节点类型创建，进一步提升搭建效率，尤其适合复杂流程的快速梳理。
4. 边的自动创建与节点自动化布局
在两个节点的连接边上点击 “+” 号，可直接插入新节点，其他节点位置会通过内置布局算法自动计算调整，无需手动拖拽排版，轻松应对流程结构变更，适配更复杂的业务场景。
5. 图层管理面板：海量节点精准管控
当画布中节点数量较多时，可通过图层管理面板快速定位目标节点，支持节点与图层反选、多组件批量选中，选中的组件会在画布中高亮显示，解决了复杂流程中节点查找困难的问题，后续还将迭代更多图层操作功能。
四、多元应用场景：从基础图表到 AI 工作流全覆盖
FlowMix 的灵活性使其适配多种场景，无论是基础的图表绘制，还是复杂的业务自动化流程，都能轻松应对，典型应用场景包括：
1. 产品 / 技术架构图
快速绘制产品功能架构、技术栈架构等图表，节点与连线可自由配置，支持导出图片或本地保存，适用于方案设计、团队协作沟通等场景。
2. 组织结构图
可视化展示企业部门层级、团队架构，支持拖拽调整层级关系，适配企业组织架构调整、跨部门协作梳理等需求，直观清晰且易于修改。
3. 思维导图
支持发散式思维导图绘制，节点可无限延伸，支持动画配置与样式定制，适用于头脑风暴、项目规划、知识梳理等场景，让创意落地更高效。
4. 多画布设计
支持多画布切换编辑，可在不同画布中搭建子流程，再通过关联节点实现跨画布联动，适配复杂业务流程的分模块设计，提升流程管理的清晰度。
5. 任务管理 + 流程看板
搭建可视化任务看板，支持任务创建、分配、状态流转等功能，节点可关联任务详情与负责人，适用于项目管理、日常工作跟踪等场景，实现任务流程透明化。
6. AI Agent 工作流（核心场景）
作为 FlowMix 的设计初衷，其可无缝集成 AI 能力，搭建自动化 AI Agent 工作流。例如：电商订单处理流程（订单生成→AI 质检图片→合格则触发发货→不合格转人工审核）、发票处理流程（上传发票→AI 识别信息→校验入账→异常通知），无需手动编写复杂逻辑，通过拖拽组件即可完成 AI 与业务流程的深度融合。
五、生态延伸：从工作流到 AI 协同文档
除了 FlowMix 工作流编辑器，开发者徐小夕还推出了另一款搭建类产品 ——JitWord AI 协同文档，类似于 WPS Word 与 Notion 的结合体，支持实时协作、AI 写作、私有化部署，可轻松构建企业下一代知识库产品。
JitWord 核心优势在于极致的实时协作体验，解决了传统文档协作中版本混乱、沟通低效、信息孤岛等问题，与 FlowMix 形成生态互补：FlowMix 负责业务流程自动化搭建，JitWord 负责流程相关文档的协同管理，共同支撑企业数字化转型。
六、开源福利与后续规划
目前，FlowMix 已免费开源，用户可通过官方演示地址（http://flowmix.turntip.cn/flow）在线体验，或从 GitHub 开源地址（https://github.com/MrXujiang/flowmix-flow）获取源码进行二次开发。开发者可基于这套方案，结合 AI Coding 实现各类复杂工作流产品，无需重复造轮子。
后续，FlowMix 将持续优化迭代，重点提升复杂场景布局能力、扩展更多 AI 原生组件、完善企业级功能（如权限管理、流程监控），最终实现真正的业务自动化方案。此外，徐小夕推出的《架构师精选》专栏，还将分享 20 + 高价值源码项目（含可视化低代码、AI 技术实践等）与大厂架构师职场经验，助力开发者快速成长。
FlowMix 的开源，不仅为开发者提供了一套轻量化、高性能的工作流搭建底座，更降低了 AI 与业务流程结合的门槛。无论是中小企业快速落地自动化流程，还是开发者搭建定制化工作流产品，FlowMix 都给出了高效、低成本的解决方案，推动 AI 技术在业务场景中的规模化落地。