JavaScript Diagramming library which concentrate on flow layout canvas

[![Build Status](https://dev.azure.com/noonnightstorm/butterfly/_apis/build/status/alibaba.butterfly?branchName=master)](https://dev.azure.com/noonnightstorm/butterfly/_build/latest?definitionId=1&branchName=master) [![CircleCI](https://img.shields.io/circleci/project/github/alibaba/butterfly/master.svg?style=flat-square)](https://circleci.com/gh/alibaba/butterfly) [![npm package](https://img.shields.io/npm/v/butterfly-dag.svg?style=flat-square)](https://www.npmjs.org/package/butterfly-dag) [![NPM downloads](http://img.shields.io/npm/dm/butterfly-dag.svg?style=flat-square)](http://npmjs.com/butterfly-dag) [![Dependencies](https://img.shields.io/david/alibaba/butterfly.svg?style=flat-square)](https://david-dm.org/alibaba/butterfly) [![DevDependencies](https://img.shields.io/david/dev/alibaba/butterfly.svg?style=flat-square)](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.

	Stars	Issues	Version	Updated	Created
butterfly-dag	4,197	170	5.1.0-beta.38	a month ago	5 years ago
diagram-js			14.5.4	11 days ago	10 years ago
flowchart.js	8,461	105	1.18.0	5 months ago	8 years ago
jsplumb	7,710	0	2.15.6	3 years ago	9 years ago
mxgraph	6,751	0	4.2.2	4 years ago	7 years ago

butterfly-dag vs diagram-js vs flowchart.js vs jsplumb vs mxgraph

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past