flowmix/flow 可视化工作流编辑器, 开源!

上期和大家分享了我精心打磨的CRM系统------LuckyFlow:

很多粉丝想让我开源一款工作流项目,头脑一热,就把我一年前花了3个月做的可视化工作流设计器,开源了。

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

flowmix/flow 致力于提供一套开箱即用流程可视化搭建底座 , 来支撑各种复杂工作流场景的设计. 同时汲取了市面上主流工作流引擎的设计经验, 并对性能做了极致的优化, 目前 flowmix/flow 的搭建性能和所见即所得的UI更新流畅度非常丝滑. 后续会持续迭代更多功能, 并进一步提升性能上限.

接下来我就和大家介绍一下 flowmix/flow的最新更新和使用场景. 更多内容可以在下方公众号获取.

ps:大家可以基于我的开源方案,使用AI Coding,实现各种复杂的工作流产品~

核心功能介绍

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

1. 支持节点动画配置

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

2. 支持参考线吸附

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

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

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

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

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

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

当画布中的元素很多时, 我们需要快速定位到具体的节点, 这个时候图层管理就非常重要了. 所以我也实现了图层管理面板, 并且支持节点反选图层. 图层面板可以多选组件, 选中的组件会在画布中出现选中状态. 后续会对图层面板实现更多的功能.

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

场景案例分享

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

1. 产品/技术架构图

2. 组织结构图

3. 思维导图

4. 多画布设计

5. 任务管理 + 流程看板

当然还有很多场景大家可以一起探索, 目前产品免费使用, 欢迎大家体验反馈~

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

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

7. 支持自定义节点连接线

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

后续还会按照我的规划持续优化和迭代它, 来实现真正的业务自动化方案.

另一款AI文档产品

也许关注我的朋友已经看过我之前做的另一款产品------JitWord

, 它是另一款搭建类产品, 类似于飞书和Notion, 可以使用它轻松构建企业下一代知识库产品.

如果大家感兴趣, 也可以在线体验交流反馈一下.

相关推荐
VidDown4 小时前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
VidDown7 小时前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦10 小时前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown10 小时前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐10 小时前
VSCode里如何比较2个branch
ide·vscode·编辑器
bloglin9999912 小时前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
zyplayer-doc1 天前
企业知识库安全与权限管理完全指南:从加密到审计的六层防护
人工智能·安全·pdf·编辑器·创业创新
古德new1 天前
鸿蒙PC迁移:Photoflare Qt 图片编辑器鸿蒙PC适配全记录
qt·编辑器·harmonyos
春日见1 天前
vscode的AI编程插件推荐:
大数据·ide·vscode·算法·机器学习·编辑器·ai编程
jieshenai1 天前
VScode sys.path,并使CTRL+左键可访问源码
ide·vscode·编辑器