English | 简体中文

GGEditor

A visual graph editor based on G6 and React.

Demo

Flow

Mind

Koni

Installation

npm

npm install --save gg-editor

umd

<scriptsrc="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

importGGEditor,{Flow}from'gg-editor';constdata={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><Flowstyle={{width: 500,height: 500}}data={data}/></GGEditor>

Mind

importGGEditor,{Mind}from'gg-editor';constdata={roots: [{label: '中心主题',children: [{label: '分支主题 1',},{label: '分支主题 2',},{label: '分支主题 3',}],}],};<GGEditor><Mindstyle={{width: 500,height: 500}}data={data}/></GGEditor>

Documentation

• API

DingTalk Group