English | 简体中文
A visual graph editor based on G6 and React.
npm install --save gg-editor<script src="https://unpkg.com/gg-editor@${version}/dist/bundle.js"></script>$ git clone https://github.com/gaoli/GGEditor.git
$ cd gg-editor
$ npm install
$ npm startimport 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>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>