butterfly-dag

<!-- <img width="900" src="http://img.alicdn.com/tfs/TB1TlngGFYqK1RjSZLeXXbXppXa-844-474.png"> -->

JavaScript Diagramming library which concentrate on flow layout canvas

English | 简体中文

✨ 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

📦 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 tohere;
• Canvas
• Group
• Node
• Edge
• Endpoint
• Minimap
• Tooltips & Menu
• Layout
• Plugins

arrow pannel

• React & Vue Support

React butterfly Vue2 butterfly

🎨Excellent Cases

⌨️Business-specific React Extension Components

• Data/Table-Field mapping

• Blood Map: Suitable for table blood dag, table field blood dag, business chain blood dag and other blood dag

• Visual Modeling: Suitable for UML, database modeling, data warehouse construction

• Scheduling Diagram(doing)
• Monitoring: 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 before becoming a Contributor.
If you already know, come to Issues or Pull requests to become contributors, and let's grow and be better and better together.