README.md

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

    Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

    English | 简体中文

    特性

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

    🚀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拓展组件

    • 调度编排图(doing)
    • 监控图: 适用于任务流,数据流等业务的状态展示
    • Butterfly-Editor(doing)

    🤝如何贡献

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

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

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/alibaba/butterfly

    发行版本

    当前项目没有发行版本

    贡献者 45

    全部贡献者

    开发语言

    • JavaScript 81.0 %
    • CSS 7.4 %
    • Less 6.7 %
    • Vue 4.8 %
    • HTML 0.2 %