Awesome Open Source
Awesome Open Source
Sponsorship

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

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

English | 简体中文

✨ 特性

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

快速本地DEMO

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

📦 安装

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';

生成画布

const Canvas = require('butterfly-dag').Canvas;
let canvas = new Canvas({
  root: dom,              //canvas的根节点(必传)
  zoomable: true,         //可缩放(可传)
  moveable: true,         //可平移(可传)
  draggable: true,        //节点可拖动(可传)
});
canvas.draw({
  groups: [],  //分组信息
  nodes: [],  //节点信息
  edges: []  // 连线信息
})

🔗 API文档

🤝贡献

小蝴蝶是一个完全开源的项目,我们欢迎大家为修复错误和改进做出贡献。有关如何开始的信息,请阅读我们的贡献指南.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (66,040
svg (495
tree (168
flow (131
diagram (83
edge (50
mindmap (35
bpmn (35
flowchart (34
dag (27
connectivity (14

Find Open Source By Browsing 7,000 Topics Across 59 Categories