GGEditor 流程图的简单使用
一、GGEditor
1、介绍:基于 G6 和 React 的可视化图编辑器
2、网址:https://ggeditor.com/zh-CN
3、安装:npm install gg-editor --save
4、umd :<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>
二、Flow的简单使用
import GGEditor, { Flow } from 'gg-editor';
const data = {
nodes: [
{
id: '0',
label: 'Node',
x: 55,
y: 55,
},
{
id: '1',
label: 'Node',
x: 55,
y: 255,
},
],
edges: [
{
label: 'Label',
source: '0',
target: '1',
},
],
};
<GGEditor>
<Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;