flowmix-flow可视化流程引擎, 开源!

小马不会过河

于 2024-10-10 20:00:24 发布

阅读量772

点赞数 23

文章标签：人工智能深度学习机器学习数据库算法

本文链接：https://blog.csdn.net/m0_59163425/article/details/142830951

版权

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

最近也一直在迭代多模态可视化搭建产品flowmix系列, 其中在做可视化流程引擎 flowmix/flow 的时候, 开源了一套工作流编辑器, 它可以轻松创建可视化工作流, 并且可以基于这套开源方案, 轻松定制企业自己的工作流引擎.

我们还可以使用它实现类似dify等可视化工作流.

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

线上demo: http://flowmix.turntip.cn/flow-v0

国内镜像: https://gitee.com/lowcode-china/flowmix-flow

接下来和大家分享一下我开源这套工作流引擎的一些功能亮点和技术实现. 后续也会在 flowmix视界 公号中分享更多可视化产品进展:

flowmix-flow工作流引擎特点

流程排序
节点拖拽
自动创建/编辑节点
节点连线
拖拽参考线/吸附
画布模式
节点数据存储
画布缩略图
导出流程JSON

节点创建与编辑

我们可以轻松地添加节点, 并通过双击节点来快速编辑节点, 同时编辑模式还能二次扩展.

边的自定义连线

我们可以轻松对不同节点进行自定义连线, 并且点击节点的“+”号之后, 可以自动创建连线节点, 来轻松创建工作流.

节点拖拽参考线

节点拖拽时会显示参考线, 来提高搭建体验, 这块我采用了 refline 来实现参考线吸附, 并且封装了一个组件, 这里和大家分享一下具体的实现:

import { RefLine } from "./index";  
import { Rect, Point } from "./types";  
  
interface Props {  
  current: Rect;  
  nodes: Rect[];  
  points?: Point[];  
  scale?: number;  
  offsetX?: number;  
  offsetY?: number;  
}  
export default function Line({   
  nodes,   
  points = [],   
  current,   
  scale = 1,  
  offsetX = 0,  
  offsetY = 0,   
}: Props) {  
  if (!current) return null;  
  
  const refline = new RefLine({  
    rects: nodes,  
    points,  
    current  
  });  
  
  // 获取水平、垂直参考线  
  const lines = refline.getAllRefLines();  
  
  return (  
    <>  
      {lines.map((line, i) => {  
        return line.type === "vertical" ? (  
          <div  
            key={i}  
            className="line"  
            style={{  
              position: "absolute",  
              left: line.left * scale + offsetX,  
              top: line.top * scale + offsetY,  
              width: 1,  
              height: line.size * scale,  
              borderLeft: "1px dashed blue"  
            }}  
          ></div>  
        ) : (  
          <div  
            key={i}  
            className="line"  
            style={{  
              position: "absolute",  
              left: line.left * scale + offsetX,  
              top: line.top * scale + offsetY,  
              height: 1,  
              width: line.size * scale,  
              borderTop: "1px dashed blue"  
            }}  
          ></div>  
        );  
      })}  
    </>  
  );  
}

节点多选

双向图层面板

我们选择节点之后, 图层面板会对应的激活, 同时支持多选激活. 当我们选择图层面板的节点之后, 画布中的节点也会对应的激活, 来提高操作效率.

数据管理机制

数据状态管理我采用了轻量且高性能的zustand, 这款状态管理库目前已有47k star, 很多知名项目都在使用它, 建议大家可以学习一下.

flowmix/flow 也采用了它实现整个工作流的状态管理, 大家感兴趣可以线上体验一下.

如何使用和本地启动

由于项目在 github 上开源, 大家可以 clone 到本地, 然后运行如下命令在本地启动体验:

安装依赖

pnpm install

本地运行

pnpm dev

打包构建

pnpm build

这款开源项目可以集成到企业内部系统, 轻松实现媲美大厂的工作流, 后续我也会开发Pro版本, 让它覆盖更多应用场景和领域.

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

线上demo: http://flowmix.turntip.cn/flow-v0

国内镜像: https://gitee.com/lowcode-china/flowmix-flow

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述