https://github.com/alibaba/GGEditor

A visual graph editor based on G6 and React
https://github.com/alibaba/GGEditor

editor graphics mind react tree

Last synced: about 1 month ago
JSON representation

A visual graph editor based on G6 and React

• Host: GitHub
• URL: https://github.com/alibaba/GGEditor
• Owner: alibaba
• License: mit
• Created: 2018-08-24T05:50:30.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-09-10T10:08:53.000Z (over 4 years ago)
• Last Synced: 2024-11-01T01:47:21.788Z (about 1 month ago)
• Topics: editor, graphics, mind, react, tree
• Language: TypeScript
• Homepage: https://ggeditor.com
• Size: 13.2 MB
• Stars: 3,414
• Watchers: 76
• Forks: 573
• Open Issues: 281
• Metadata Files:
  • Readme: README.en-US.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-editor - GGEditor - A visual graph editor based on G6 and React. (Design editor)
• awesome-github-star - GGEditor
• awesome-starred - alibaba/GGEditor - A visual graph editor based on G6 and React (react)

README

        
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

```