GGEditor

English | 简体中文

GGEditor

基于 G6 和 React 的可视化图编辑器

安装

npm

npm install gg-editor --save

umd

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

使用

流程图

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>;

脑图

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>;

文档

API 文档

示例

# 克隆仓库
$ 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

高力 / gg-editor

GGEditor

安装

npm

umd

使用

流程图

脑图

文档

示例

简介

发行版

贡献者

近期动态

高力 / gg-editor .gitee-modal { width: 500px !important; }

GGEditor

安装

npm

umd

使用

流程图

脑图

文档

示例

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

高力 / gg-editor