# gg-editor

> A visual graph editor based on G6 and React

Latest version **3.1.3** (published 2020-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install gg-editor
pnpm add gg-editor
yarn add gg-editor
bun add gg-editor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2020-07-10 |
| First published | 2018-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3409 |
| Author | 高力 |
| Maintainers | gaoli |
| Keywords | react, graph, editor, flow, mind |

## Links

- npm: https://www.npmjs.com/package/gg-editor
- Repository: https://github.com/alibaba/GGEditor
- Homepage: https://github.com/alibaba/GGEditor#readme
- Issues: https://github.com/alibaba/GGEditor/issues
- npm.io page: https://npm.io/package/gg-editor

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@antv/g6](https://npm.io/package/@antv/g6.md) 3.5.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.3 (latest) — 2020-07-10
- 3.0.0-beta.4 (beta) — 2019-12-04
- 3.1.2 — 2020-06-11
- 3.1.1 — 2020-04-22
- 3.1.0 — 2020-04-07
- 3.0.6 — 2020-03-24
- 3.0.5 — 2020-02-11
- 3.0.4 — 2020-02-11
- 3.0.3 — 2020-02-06
- 3.0.2 — 2020-02-04
- 3.0.1 — 2020-01-15
- 3.0.0 — 2020-01-09
- 3.0.0-beta.3 — 2019-10-08
- 3.0.0-beta.2 — 2019-09-26
- 3.0.0-beta.1 — 2019-09-19
- … 32 more at https://npm.io/package/gg-editor/versions

## README

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

<h1 align="center">GGEditor</h1>

<div align="center">

基于 [G6](https://github.com/antvis/g6) 和 [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)

</div>

## 安装

### npm

```bash
npm install gg-editor --save
```

### umd

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

## 使用

### 流程图

[![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',
    },
  ],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;
```

### 脑图

[![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',
    },
  ],
};

<GGEditor>
  <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;
```

## 示例

```bash
# 克隆仓库
$ git clone https://github.com/alibaba/GGEditor.git

# 切换目录
$ cd gg-editor

# 安装依赖
$ npm install

# 运行示例
$ npm start
```

---
_Source: https://npm.io/package/gg-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._