Butterfly Dag節(jié)點(diǎn)式流程圖編排組件庫(kù)
Butterfly 是一個(gè)基于 JS 的數(shù)據(jù)驅(qū)動(dòng)的節(jié)點(diǎn)式編排組件庫(kù)，可以使用流程圖編排項(xiàng)目所需的組件。
特性
- 豐富DEMO，開(kāi)箱即用
- 全方位管理畫(huà)布，開(kāi)發(fā)者只需要更專(zhuān)注定制化的需求
- 強(qiáng)定制性：利用 DOM/REACT/VUE 來(lái)定制元素；靈活性，可塑性，拓展性?xún)?yōu)秀
快速上手
引入方式
// 完全版，內(nèi)部包含jquery和lodash
import {Canvas, Group, Node, Edge} from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
// 如果您引用的項(xiàng)目使用了jquery和lodash，為了縮小項(xiàng)目的體積，我們建議：
import {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';
生成畫(huà)布
import {Canvas} from 'butterfly-dag';
let canvas = new Canvas({
root: dom, //canvas的根節(jié)點(diǎn)(必傳)
zoomable: true, //可縮放(可傳)
moveable: true, //可平移(可傳)
draggable: true, //節(jié)點(diǎn)可拖動(dòng)(可傳)
});
canvas.draw({
groups: [], //分組信息
nodes: [], //節(jié)點(diǎn)信息
edges: [] // 連線(xiàn)信息
})
API文檔
- !!! 3.x的API文檔，請(qǐng)移步到這里;
- 畫(huà)布(Canvas)
- 節(jié)點(diǎn)組(Group)
- 節(jié)點(diǎn)(Node)
- 線(xiàn)(Edge)
- 錨點(diǎn)(Endpoint)
- 縮略圖(Minimap)
- 提示 & 菜單(tooltips & menu)
- 布局(Layout)
- 插件
- React & Vue支持
優(yōu)秀案例
??垂直業(yè)務(wù)React拓展組件
- 數(shù)據(jù)/字段映射組件: 適用于做數(shù)據(jù)字段映射，表字段映射，表格連線(xiàn)等業(yè)務(wù)
- 表字段血緣/業(yè)務(wù)血緣: 適用于表級(jí)血緣,表字段級(jí)血緣,業(yè)務(wù)鏈路血緣等業(yè)務(wù)
- 可視化建模圖: 適用于UML，數(shù)據(jù)庫(kù)建模，數(shù)據(jù)倉(cāng)庫(kù)建設(shè)等業(yè)務(wù)
- 調(diào)度編排圖(doing)
- 監(jiān)控圖: 適用于任務(wù)流，數(shù)據(jù)流等業(yè)務(wù)的狀態(tài)展示
- Butterfly-Editor(doing)
評(píng)論
圖片
表情