GGEditor 流程图的简单使用

最新推荐文章于 2024-11-28 02:02:20 发布

原创最新推荐文章于 2024-11-28 02:02:20 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

GGEditor 专栏收录该内容

1 篇文章

订阅专栏

本文介绍基于G6和React的GGEditor流程图编辑器的安装与使用方法，并通过一个示例展示了如何创建简单的流程图组件。

GGEditor 流程图的简单使用

一、GGEditor

1、介绍：基于 G6 和 React 的可视化图编辑器

2、网址：https://ggeditor.com/zh-CN

3、安装：npm install gg-editor --save

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

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