All Projects → alibaba → Butterfly

alibaba / Butterfly

Licence: mit
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
Less
1899 projects
Vue
7211 projects
HTML
75241 projects

Projects that are alternatives of or similar to Butterfly

X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+14.64%)
Mutual labels:  dag, svg, diagram, flowchart, diagramming
Jsplumb
Visual connectivity for webapps
Stars: ✭ 6,758 (+188.43%)
Mutual labels:  svg, diagram, flowchart
dragonfly-dag
完全支持Vue3和Vitejs的DAG流程图组件
Stars: ✭ 54 (-97.7%)
Mutual labels:  diagram, flowchart, dag
bpmn
BPMN diagrams in R
Stars: ✭ 16 (-99.32%)
Mutual labels:  diagram, bpmn, flowchart
Flowchart.js
Draws simple SVG flow chart diagrams from textual representation of the diagram
Stars: ✭ 7,711 (+229.11%)
Mutual labels:  svg, diagram, flowchart
Heimer
Heimer is a simple cross-platform mind map, diagram, and note-taking tool written in Qt.
Stars: ✭ 380 (-83.78%)
Mutual labels:  mindmap, diagram, flowchart
Js Code To Svg Flowchart
js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.
Stars: ✭ 6,290 (+168.46%)
Mutual labels:  svg, flowchart
Logicflow
A front-end framework for process visualization.
Stars: ✭ 973 (-58.47%)
Mutual labels:  svg, flowchart
Hierarchy
Layout algorithms for visualizing hierarchical data.
Stars: ✭ 110 (-95.31%)
Mutual labels:  tree, mindmap
React Flow Chart
A flexible, stateless, declarative flow chart library for react.
Stars: ✭ 1,051 (-55.14%)
Mutual labels:  diagram, flowchart
Gojs
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Stars: ✭ 5,739 (+144.94%)
Mutual labels:  diagram, flowchart
G6
♾ A Graph Visualization Framework in JavaScript
Stars: ✭ 8,490 (+262.36%)
Mutual labels:  tree, diagram
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-97.65%)
Mutual labels:  svg, diagram
Bpmn Js Examples
Some examples how to use bpmn-js
Stars: ✭ 981 (-58.13%)
Mutual labels:  bpmn, svg
Ngx Graph
Graph visualization library for angular
Stars: ✭ 704 (-69.95%)
Mutual labels:  dag, svg
Gatsby Embedder Excalidraw
🤴 Custom transformer to embed Excalidraw diagrams
Stars: ✭ 45 (-98.08%)
Mutual labels:  svg, diagram
Flowmaker
flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:
Stars: ✭ 108 (-95.39%)
Mutual labels:  svg, flowchart
Vzl
💠 DOT Language Live Editor (GraphViz)
Stars: ✭ 83 (-96.46%)
Mutual labels:  diagram, flowchart
Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-96.33%)
Mutual labels:  svg, diagram
Wavedrom
🌊 Digital timing diagram rendering engine
Stars: ✭ 1,668 (-28.81%)
Mutual labels:  svg, diagram

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

Build Status CircleCI npm package NPM downloads Dependencies DevDependencies

English | 简体中文

特性

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

🚀DEMO

本地DEMO

git clone [email protected]: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成为贡献者吧,让我们和小蝴蝶一起成长,一起变得更好、更棒!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].