butterfly

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

[English](./README.en-US.md) | 简体中文 ## ✨ 特性 * 丰富DEMO，开箱即用 * 全方位管理画布，开发者只需要更专注定制化的需求 * 利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀

## DEMO ### 本地DEMO ``` git clone [email protected]:alibaba/butterfly.git npm install cd example npm install npm start ``` ### 线上DEMO [小蝴蝶官网](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis) ## 安装 ``` 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文档 * *__!!! 3.x的API文档，请移步到__*[这里](https://github.com/alibaba/butterfly/blob/master/README.md); * [画布(Canvas)](./docs/zh-CN/canvas.md) * [节点组(Group)](./docs/zh-CN/group.md) * [节点(Node)](./docs/zh-CN/node.md) * [线(Edge)](./docs/zh-CN/edge.md) * [锚点(Endpoint)](./docs/zh-CN/endpoint.md) * [缩略图(Minimap)](./docs/zh-CN/minimap.md#endpoint-api) * [提示 & 菜单(tooltips & menu)](./docs/zh-CN/tooltip.md) * [布局(Layout)](./docs/zh-CN/layout.md) * 插件 * [箭头(arrow)](./docs/zh-CN/plugins-arrows.md) * [左侧画板(pannel)](./docs/zh-CN/plugins-pannel.md) * [快捷键(hotkey)](./docs/zh-CN/plugins-hotkey.md) * React & Vue支持 * [React butterfly组件支持](./docs/zh-CN/react.md) [不维护，推荐用原生小蝴蝶] * [Vue2 butterfly组件支持](./docs/zh-CN/vue.md) ## 优秀案例

## ⌨️垂直业务React拓展组件 * [数据/字段映射组件](https://github.com/aliyun/react-data-mapping): 适用于做数据字段映射，表字段映射，表格连线等业务

* [表字段血缘/业务血缘](https://github.com/aliyun/react-lineage-dag): 适用于表级血缘,表字段级血缘,业务链路血缘等业务 * [可视化建模图](https://github.com/aliyun/react-visual-modeling): 适用于UML，数据库建模，数据仓库建设等业务 * 调度编排图(doing) * [监控图](https://github.com/aliyun/react-monitor-dag): 适用于任务流，数据流等业务的状态展示 * Butterfly-Editor(doing) ## 如何贡献 我们欢迎所有的贡献者，在成为贡献者之前，请先阅读[贡献指南](./docs/zh-CN/CONTRIBUTING.md)。 如果您已经了解，快来[Issus](https://github.com/alibaba/butterfly/issues)或[Pull requests](https://github.com/alibaba/butterfly/pulls)成为贡献者吧，让我们和小蝴蝶一起成长，一起变得更好、更棒！