English | 简体中文

A visual graph editor based on G6 and React.

Installation

npm

npm install gg-editor --save

umd

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

Usage

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 data={data} />
</GGEditor>;

Mind

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 data={data} />
</GGEditor>;

Documentation

• API documents

Examples

# Clone the repository
$ git clone https://github.com/alibaba/GGEditor.git

# Change directory
$ cd gg-editor

# Install dependencies
$ npm install

# Run examples
$ npm start

| Type | Example | Source | | :-------- | :--------------------- | :---------------------------------------- | | graph | flow | source | | graph | mind | source | | component | component-command | source | | component | component-item-panel | source | | component | component-detail-panel | source | | plugin | plugin-editable-label | source | | plugin | plugin-item-popover | source | | plugin | plugin-context-menu | source | | register | register-node | source | | register | register-dom-node | source |