ysp-gg-editor
v1.1.0
Published
基于G6/GGEditor 的流程图
Downloads
11
Maintainers
Readme
English | 简体中文
GGEditor
A visual graph editor based on G6 and React.
Demo
Installation
npm
npm install --save gg-editor
umd
<script src="https://unpkg.com/gg-editor@${version}/dist/bundle.js"></script>
run demo
$ git clone https://github.com/gaoli/GGEditor.git
$ cd gg-editor
$ npm install
$ npm start
Usage
Flow
import GGEditor, { Flow } from 'gg-editor';
const data = {
nodes: [{
type: 'node',
size: '70*70',
shape: 'flow-circle',
color: '#FA8C16',
label: '起止节点',
x: 55,
y: 55,
id: 'ea1184e8',
index: 0,
}, {
type: 'node',
size: '70*70',
shape: 'flow-circle',
color: '#FA8C16',
label: '结束节点',
x: 55,
y: 255,
id: '481fbb1a',
index: 2,
}],
edges: [{
source: 'ea1184e8',
sourceAnchor: 2,
target: '481fbb1a',
targetAnchor: 0,
id: '7989ac70',
index: 1,
}],
};
<GGEditor>
<Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>
Mind
import GGEditor, { Mind } from 'gg-editor';
const data = {
roots: [{
label: '中心主题',
children: [{
label: '分支主题 1',
}, {
label: '分支主题 2',
}, {
label: '分支主题 3',
}],
}],
};
<GGEditor>
<Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>