Skip to content
A visual graph editor based on G6 and React
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
.vscode chore: add `editor.codeActionsOnSave` property Jan 9, 2020
examples chore: enable source map for examples Jan 15, 2020
scripts chore: enable source map for examples Jan 15, 2020
src
.eslintignore chore: optimize the examples Jan 9, 2020
.eslintrc.js feat: upgrade to G6 3.x Jan 9, 2020
.gitignore chore: optimize the examples Jan 9, 2020
.prettierignore
.prettierrc.js feat: upgrade to G6 3.x Jan 9, 2020
.travis.yml
CHANGELOG.md
CNAME chore(CNAME): Update CNAME Aug 30, 2018
LICENSE
README.en-US.md chore: update the changelog of the project Jan 9, 2020
README.md
_config.yml
babel.config.js chore: add the configuration of babel Jan 9, 2020
package.json
tsconfig.cjs.json feat: upgrade to G6 3.x Jan 9, 2020
tsconfig.json chore: upgrade to G6 3.1.5 Jan 9, 2020

README.md

English | 简体中文

GGEditor

基于 G6React 的可视化图编辑器

GitHub npm npm

安装

npm

npm install gg-editor --save

umd

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

使用

流程图

Edit GGEditor - 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 style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

脑图

Edit 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 style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

文档

示例

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

# 切换目录
$ cd gg-editor

# 安装依赖
$ npm install

# 运行示例
$ npm start
类型 示例 源码
图表 flow source
图表 mind source
组件 component-command source
组件 component-item-panel source
组件 component-detail-panel source
插件 plugin-editable-label source
插件 plugin-item-popover source
插件 plugin-context-menu source
You can’t perform that action at this time.