开发者社区> 开发者小助手> 正文

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

简介: 基于JavaScript/React/Vue2的流程图组件
+关注继续查看

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


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

image.png

DEMO

本地DEMO

git clone git@github.com:alibaba/butterfly.git
npm install
cd example
npm install
npm start

线上DEMO

小蝴蝶官网

安装

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

API文档

  • React & Vue支持

垂直业务React拓展组件

如何贡献

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 Arthas 排查开源 Excel 组件问题
有了实际的使用之后,不免会想到,Arthas 是如何做到在程序运行时,动态监测我们的代码的呢?带着这样的问题,我们一起来看下 Java Agent 技术实现原理。
13111 0
thymeleaf 传递数据到js变量
thymeleaf 传递数据到js变量 如何把控制器传来的model中的值传递给js变量呢? 需要以下两个: var message = [[${message}]] 1.
2907 0
Node.js爬取豆瓣数据
一直自以为自己vue还可以,一直自以为webpack还可以,今天在慕课逛node的时候,才发现,自己还差的很远。众所周知,vue-cli基于webpack,而webpack基于node,对node不了解,谈什么了解webpack。
1665 0
WDCP安装可选组件的快捷命令
memcache的安装 wget -c http://down.wdlinux.cn/in/memcached_ins.sh chmod 755 memcached_ins.sh ./memcached_ins.
822 0
SQL Server 2012实施与管理实战指南(笔记)——Ch4数据库连接组件
4.数据库连接组件 访问数据库有多种不同的技术,包括ADO,ODBC,OLEDB,ADO.NET等这些都有一些共性。首先要建立连接(Connection),然后通过命令(Command)对数据库进行访问,最后把结果集放到dataset或者recordset上。
949 0
1478
文章
340
问答
来源圈子
更多
阿里巴巴相信开源的世界里人人贡献代码,人人获得收益,共同创造一个互帮互利的社区,促进技术进步和发展。
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载