一个基于JS的数据驱动的节点式编排组件库
[](https://dev.azure.com/noonnightstorm/butterfly/_build/latest?definitionId=1&branchName=master)
[](https://circleci.com/gh/alibaba/butterfly)
[](https://www.npmjs.org/package/butterfly-dag)
[](http://npmjs.com/butterfly-dag)
[](https://david-dm.org/alibaba/butterfly)
[](https://david-dm.org/alibaba/butterfly?type=dev)
[English](./README.en-US.md) | 简体中文
## ✨ 特性
* 丰富DEMO，开箱即用
* 全方位管理画布，开发者只需要更专注定制化的需求
* 利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀
## 🚀DEMO
### 本地DEMO
```
git clone git@github.com:alibaba/butterfly.git
npm install
cd example
npm install
npm start
```
### 线上DEMO
[小蝴蝶官网](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis)
## 📦 安装
```
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文档
* *__!!! 3.x的API文档，请移步到__*[这里](https://github.com/alibaba/butterfly/blob/master/README.md);
* [画布(Canvas)](./docs/zh-CN/canvas.md)
* [节点组(Group)](./docs/zh-CN/group.md)
* [节点(Node)](./docs/zh-CN/node.md)
* [线(Edge)](./docs/zh-CN/edge.md)
* [锚点(Endpoint)](./docs/zh-CN/endpoint.md)
* [缩略图(Minimap)](./docs/zh-CN/minimap.md#endpoint-api)
* [提示 & 菜单(tooltips & menu)](./docs/zh-CN/tooltip.md)
* [布局(Layout)](./docs/zh-CN/layout.md)
* 插件
* [箭头(arrow)](./docs/zh-CN/plugins-arrows.md)
* [左侧画板(pannel)](./docs/zh-CN/plugins-pannel.md)
* React & Vue支持
* [React butterfly组件支持](./docs/zh-CN/react.md)
* [Vue2 butterfly组件支持](./docs/zh-CN/vue.md)
## 🎨优秀案例
## ⌨️垂直业务React拓展组件
* [数据/字段映射组件](https://github.com/aliyun/react-data-mapping): 适用于做数据字段映射，表字段映射，表格连线等业务
* [表字段血缘/业务血缘](https://github.com/aliyun/react-lineage-dag): 适用于表级血缘,表字段级血缘,业务链路血缘等业务
* [可视化建模图](https://github.com/aliyun/react-visual-modeling): 适用于UML，数据库建模，数据仓库建设等业务
* 调度编排图(doing)
* [监控图](https://github.com/aliyun/react-monitor-dag): 适用于任务流，数据流等业务的状态展示
* Butterfly-Editor(doing)
## 🤝如何贡献
我们欢迎所有的贡献者，在成为贡献者之前，请先阅读[贡献指南](./docs/zh-CN/CONTRIBUTING.md)。
如果您已经了解，快来[Issus](https://github.com/alibaba/butterfly/issues)或[Pull requests](https://github.com/alibaba/butterfly/pulls)成为贡献者吧，让我们和小蝴蝶一起成长，一起变得更好、更棒！