English | [简体中文](README.md)

GGEditor

A visual graph editor based on [G6](https://github.com/antvis/g6) and [React](https://github.com/facebook/react). [![GitHub](https://img.shields.io/github/license/alibaba/GGEditor)](/LICENSE) [![npm](https://img.shields.io/npm/v/gg-editor)](https://www.npmjs.com/package/gg-editor) [![npm](https://img.shields.io/npm/dm/gg-editor)](https://www.npmjs.com/package/gg-editor)

## Installation ### npm ```bash npm install gg-editor --save ``` ### umd ```html ``` ## Usage ### Flow [![Edit GGEditor - Flow](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ggeditor-flow-hq64m?fontsize=14&hidenavigation=1&theme=dark) ```jsx 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', }, ], }; ; ``` ### Mind [![Edit GGEditor - Mind](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ggeditor-mind-2262q?fontsize=14&hidenavigation=1&theme=dark) ```jsx import GGEditor, { Mind } from 'gg-editor'; const data = { label: 'Central Topic', children: [ { label: 'Main Topic 1', }, { label: 'Main Topic 2', }, { label: 'Main Topic 3', }, ], }; ; ``` ## Examples ```bash # Clone the repository $ git clone https://github.com/alibaba/GGEditor.git # Change directory $ cd gg-editor # Install dependencies $ npm install # Run examples $ npm start ```

	Stars	Issues	Version	Updated	Created
cytoscape	9,770	19	3.29.0	3 days ago	12 years ago
d3.js	149	5	0.0.2-security	7 years ago	7 years ago
gg-editor	3,405	281	3.1.3	4 years ago	6 years ago
react-flow-renderer	21,049	163	10.3.17	2 years ago	4 years ago

cytoscape vs d3.js vs gg-editor vs react-flow-renderer

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past