gg-editor-customer
TypeScript icon, indicating that this package has built-in type declarations

1.3.7 • Public • Published

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

Package Sidebar

Install

npm i gg-editor-customer

Weekly Downloads

1

Version

1.3.7

License

MIT

Unpacked Size

7.29 MB

Total Files

1393

Last publish

Collaborators

  • aceh