GGEditor

基于 G6 和 React 的可视化图形编辑器。「A visual graph editor based on G6 and React」

Github stars Tracking Chart

English | 简体中文

基于 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

Main metrics

Overview
Name With Owneralibaba/GGEditor
Primary LanguageTypeScript
Program languageJavaScript (Language Count: 2)
PlatformWeb browsers
License:MIT License
所有者活动
Created At2018-08-24 05:50:30
Pushed At2020-09-10 10:08:53
Last Commit At2020-07-10 18:33:23
Release Count35
Last Release Name3.1.3 (Posted on )
First Release Name1.1.1 (Posted on )
用户参与
Stargazers Count3.4k
Watchers Count75
Fork Count572
Commits Count405
Has Issues Enabled
Issues Count0
Issue Open Count0
Pull Requests Count102
Pull Requests Open Count7
Pull Requests Close Count15
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private