flowmix-flow可视化流程引擎, 开源!最近也一直在迭代多模态可视化搭建产品flowmix系列, 其中在做可视化

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

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

最近也一直在迭代多模态可视化搭建产品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>
        );
      })}
    </>
  );
}