flowmix/flow,一款高度可配的可视化流程编辑器

科技趣谈有前端 2024-08-29 02:29:11

嗨, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:

H5-Dooring(页面可视化搭建平台)V6.Dooring(可视化大屏搭建平台)橙子试卷(表单搭建引擎)Nocode/WEP 文档知识引擎

最近一直在研究多模态可视化搭建产品, 经历数月的技术探索和产品思考, 我设计了flowmix 多模态产品系列. 接下来和大家分享一下最近刚上线的一个产品——flowmix/flow.

flowmix/flow 目前大家看到的是1.0版本, 它致力于提供一套流程可视化搭建底座, 来支撑各种工作流场景的可视化设计.

由于之前的技术架构经验和千万级用户产品的极致打磨, 让我对性能格外关注, 所以经历了反复推演和优化, 目前 flowmix/flow 的搭建性能和所见即所得的UI更新流畅度非常丝滑. 后续还会持续迭代和优化.

demo地址:http://flowmix.turntip.cn/flow

接下来我就和大家介绍一下这款项目.

一套流程编辑器, 支撑多种图表设计场景

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

1. 产品/技术架构图

2. 组织结构图

3. 思维导图

4. 多画布设计

5. 任务管理 + 流程看板

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

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

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

支持自定义节点连接线

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

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

另一款栾生产品

也许关注我频道的朋友已经看过我之前做的另一款产品——flowmix/docx, 它是另一款搭建类产品, 类似于飞书和Notion, 可以使用它轻松构建企业下一代知识库产品.

后续规划:

支持在线电子表格嵌入支持Vchart图表嵌入支持vue版文档编辑器添加AIGC功能模块提供完善的开发文档支持文档导出为HTML

好啦, 接下来两周我要好好研发了, 9月见~

如果你有好的想法和建议, 也欢迎随时留言区交流讨论~

0 阅读:0

科技趣谈有前端

简介:感谢大家的关注