1 Star 0 Fork 72

ForeverAct / gg-editor

forked from 高力 / gg-editor 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.74 KB
一键复制 编辑 原始数据 按行查看 历史
高力 提交于 2020-01-09 20:58 . chore: update the changelog of the project

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
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/ForeverAct/gg-editor.git
git@gitee.com:ForeverAct/gg-editor.git
ForeverAct
gg-editor
gg-editor
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891