Awesome Open Source
Awesome Open Source

一个基于JS的数据驱动的节点式编排组件库

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

English | 简体中文

✨ 特性

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

🚀快速本地DEMO

git clone [email protected]:alibaba/butterfly.git
npm install
cd example
npm install
npm start

📦 安装

npm install butterfly-dag

🔨 快速上手

引入方式

// 完全版,内部包含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';

生成画布

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

🔗 API文档

⌨️垂直业务React拓展组件

  • 血缘图(开源中)
  • 可视化建模图: 适用于UML,数据库建模,数据仓库建设等业务
  • 调度编排图(doing)
  • 监控图: 适用于任务流,数据流等业务的状态展示
  • Butterfly-Editor(doing)

🤝如何贡献

我们欢迎所有的贡献者,在成为贡献者之前,请先阅读贡献指南

如果您已经了解,快来IssusPull requests成为贡献者吧,让我们和小蝴蝶一起成长,一起变得更好、更棒!


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,065
react (5,164
vue (4,036
svg (527
tree (176
flow (143
diagram (91
edge (59
flowchart (42
mindmap (41
bpmn (38
dag (30
connectivity (15

Find Open Source By Browsing 7,000 Topics Across 59 Categories