JavaScript Diagramming library which concentrate on flow layout canvas
[](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.md)
## ✨ Features
* Simple & Powerful & Rich DEMO
* Manage the canvas in all aspects, developers only need to focus more on customized needs
* Use DOM/REACT/VUE to customize elements: flexibility and excellent expandability
## 🚀DEMO
### LOCAL DEMO
```
git clone git@github.com:alibaba/butterfly.git
npm install
cd example
npm install
npm start
```
### ONLINE DEMO
[Official website](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis)
## 📦 Install
```
npm install butterfly-dag
```
## 🔨 Quick Start
### Import Method
```
// Full version, including jQuery and lodash internally
import {Canvas, Group, Node, Edge} from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
// If your project uses jQuery and lodash, in order to reduce the size of the project, we suggest:
import {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';
```
### Create Canvas
```
import {Canvas} from 'butterfly-dag';
let canvas = new Canvas({
root: dom, //canvas root dom (require)
zoomable: true, //enable zoom canvas (option)
moveable: true, //enable move canvas (option)
draggable: true, //enable drag nodes (options)
});
canvas.draw({
groups: [], // group data
nodes: [], // nodes data
edges: [] // edges data
})
```
## 🔗 API Document
* * *__!!! 3.x API documentation, please go to__*[here](https://github.com/alibaba/butterfly/blob/master/README.en-US.md);
* [Canvas](./docs/en-US/canvas.md)
* [Group](./docs/en-US/group.md)
* [Node](./docs/en-US/node.md)
* [Edge](./docs/en-US/edge.md)
* [Endpoint](./docs/en-US/endpoint.md)
* [Minimap](./docs/en-US/minimap.md#endpoint-api)
* [Tooltips & Menu](./docs/en-US/tooltip.md)
* [Layout](./docs/en-US/layout.md)
* Plugins
* [arrow](./docs/en-US/plugins-arrows.md)
* [pannel](./docs/en-US/plugins-pannel.md)
* React & Vue Support
* [React butterfly](./docs/en-US/react.md)
* [Vue2 butterfly](./docs/en-US/vue.md)
## 🎨Excellent Cases
## ⌨️Business-specific React Extension Components
* [Data/Table-Field mapping](https://github.com/aliyun/react-data-mapping/blob/master/README.en-US.md)
* [Blood Map](https://github.com/aliyun/react-lineage-dag): Suitable for table blood dag, table field blood dag, business chain blood dag and other blood dag
* [Visual Modeling](https://github.com/aliyun/react-visual-modeling/blob/master/README.en-US.md): Suitable for UML, database modeling, data warehouse construction
* Scheduling Diagram(doing)
* [Monitoring](https://github.com/aliyun/react-monitor-dag/blob/master/README.en-US.md): Suitable for the status display of task flow, data flow and other business
* Butterfly-Editor(doing)
## 🤝 How to contribute
We welcome all contributors, please read the [Contribution Guide](./docs/en-US/CONTRIBUTING.md) before becoming a Contributor.
If you already know, come to [Issues](https://github.com/alibaba/butterfly/issues) or [Pull requests](https://github.com/alibaba/butterfly/pulls) to become contributors, and let's grow and be better and better together.