GGEditor

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

Github星跟踪图

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

主要指标

概览
名称与所有者alibaba/GGEditor
主编程语言TypeScript
编程语言JavaScript (语言数: 2)
平台Web browsers
许可证MIT License
所有者活动
创建于2018-08-24 05:50:30
推送于2020-09-10 10:08:53
最后一次提交2020-07-10 18:33:23
发布数35
最新版本名称3.1.3 (发布于 )
第一版名称1.1.1 (发布于 )
用户参与
星数3.4k
关注者数75
派生数572
提交数405
已启用问题?
问题数0
打开的问题数0
拉请求数102
打开的拉请求数7
关闭的拉请求数15
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?