butterfly

> 前端框架

开源

Butterfly,一个专注于流程布局领域的 JavaScript/React/Vue2 绘图库。 (基于 JavaScript/React/Vue2 的流程图组件)

4.6K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

Butterfly,一个专注于流程布局领域的 JavaScript/React/Vue2 绘图库。 (基于 JavaScript/React/Vue2 的流程图组件)

一个基于JS的数据驱动的节点式编排组件库

English | 简体中文

✨ 特性

丰富DEMO，开箱即用
全方位管理画布，开发者只需要更专注定制化的需求
利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀

DEMO

本地DEMO

bash

git clone [email protected]:alibaba/butterfly.git
npm install
cd example
npm install
npm start

线上DEMO

小蝴蝶官网

安装

bash

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: []  // 连线信息
})