GGEditor

基于 G6 和 React 的可视化图编辑器

GitHub npm npm

安装

npm

npm install gg-editor --save

umd

<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>

使用

流程图

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>;

脑图

import GGEditor, { Mind } from 'gg-editor';
const data = {
 label: 'Central Topic',
 children: [
 {
 label: 'Main Topic 1',
 },
 {
 label: 'Main Topic 2',
 },
 {
 label: 'Main Topic 3',
 },
 ],
};
<GGEditor>
 <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

示例

# 克隆仓库
$ git clone https://github.com/alibaba/GGEditor.git
# 切换目录
$ cd gg-editor
# 安装依赖
$ npm install
# 运行示例
$ npm start