一个基于JS的数据驱动的节点式编排组件库
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文档
🤝 贡献
小蝴蝶是一个完全开源的项目,我们欢迎大家为修复错误和改进做出贡献。有关如何开始的信息,请阅读我们的贡献指南.