Home

Awesome

<p align="center"> <a href="http://noonnightstorm.github.io"> <!-- <img width="900" src="http://img.alicdn.com/tfs/TB1TlngGFYqK1RjSZLeXXbXppXa-844-474.png"> --> </a> </p> <h3 align="center">一个基于JS的数据驱动的节点式编排组件库</h3> <div align="center">

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

</div>

English | 简体中文

✨ 特性

<p align="center"> <img width="900" src="https://img.alicdn.com/imgextra/i3/O1CN018CrqXz1KRK7Euhj6X_!!6000000001160-2-tps-1155-1081.png"> </p>

🚀DEMO

本地DEMO

git clone git@github.com:alibaba/butterfly.git
npm install
cd example
npm install
npm start

线上DEMO

小蝴蝶官网

📦 安装

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';

生成画布

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

🔗 API文档

🎨优秀案例

<p align="center"> <img width="900" src="https://img.alicdn.com/imgextra/i4/O1CN01d7WHVs1vkEDzWRRlW_!!6000000006210-2-tps-2400-8172.png"> </p>

⌨️垂直业务React拓展组件

<p align="center"> <img width="49%" src="https://img.alicdn.com/imgextra/i4/O1CN012ecl7n25IsnZeXw1d_!!6000000007504-1-tps-595-411.gif"> <img width="49%" src="https://img.alicdn.com/imgextra/i2/O1CN017Gcu0Y1mbgIHcgqwr_!!6000000004973-1-tps-595-411.gif"> </p> <p align="center"> <img width="49%" src="https://img.alicdn.com/imgextra/i2/O1CN011xYzxM1ZenzfVE0Xq_!!6000000003220-1-tps-595-411.gif"> <img width="49%" src="https://img.alicdn.com/imgextra/i4/O1CN01Nt9rpo25y6NlRMUtR_!!6000000007594-1-tps-595-411.gif"> </p>

🤝如何贡献

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

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