Butterfly Dag节点式流程图编排组件库

联合创作 · 2023-09-28 01:05

Butterfly 是一个基于 JS 的数据驱动的节点式编排组件库,可以使用流程图编排项目所需的组件。

特性

  • 丰富DEMO,开箱即用
  • 全方位管理画布,开发者只需要更专注定制化的需求
  • 强定制性:利用 DOM/REACT/VUE 来定制元素;灵活性,可塑性,拓展性优秀

快速上手

引入方式

// 完全版,内部包含jquery和lodash
import {Canvas, Group, Node, Edge} from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';

// 如果您引用的项目使用了jquery和lodash,为了缩小项目的体积,我们建议:
import {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';

生成画布

import {Canvas} from 'butterfly-dag';
let canvas = new Canvas({
  root: dom,              //canvas的根节点(必传)
  zoomable: true,         //可缩放(可传)
  moveable: true,         //可平移(可传)
  draggable: true,        //节点可拖动(可传)
});
canvas.draw({
  groups: [],  //分组信息
  nodes: [],  //节点信息
  edges: []  // 连线信息
})

API文档

优秀案例

 

⌨️垂直业务React拓展组件

 

 

  • 调度编排图(doing)
  • 监控图: 适用于任务流,数据流等业务的状态展示

  • Butterfly-Editor(doing)
浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报