加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
README.md

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

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

English | 简体中文

特性

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

🚀快速本地DEMO

git clone git@github.com: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文档

️垂直业务React拓展组件

  • 表字段血缘/业务血缘(开源中): 适用于表级血缘,表字段级血缘,业务链路血缘等业务
  • 调度编排图(doing)
  • 监控图: 适用于任务流,数据流等业务的状态展示
  • Butterfly-Editor(doing)

🤝如何贡献

我们欢迎所有的贡献者,在成为贡献者之前,请先阅读贡献指南

如果您已经了解,快来IssusPull requests成为贡献者吧,让我们和小蝴蝶一起成长,一起变得更好、更棒!

项目简介

🚀 Github 镜像仓库 🚀

源项目地址

https://github.com/alibaba/butterfly

发行版本

当前项目没有发行版本

贡献者 35

全部贡献者

开发语言

  • JavaScript 89.3 %
  • Less 7.2 %
  • CSS 2.6 %
  • Vue 0.8 %
  • HTML 0.1 %