GGEditor 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
GGEditor 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
GGEditor 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

GGEditor

language GitHub license npm version npm downloads

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

演示

流程图

Flow

思维导图

Mind

安装

npm

npm install --save gg-editor

umd


run demo

$ git clone https://github.com/gaoli/GGEditor.git
$ cd gg-editor
$ npm install
$ npm start

快速开始

流程图

import GGEditor, { Flow } from 'gg-editor';

const data = {
  nodes: [{
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '起止节点',
    x: 55,
    y: 55,
    id: 'ea1184e8',
    index: 0,
  }, {
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '结束节点',
    x: 55,
    y: 255,
    id: '481fbb1a',
    index: 2,
  }],
  edges: [{
    source: 'ea1184e8',
    sourceAnchor: 2,
    target: '481fbb1a',
    targetAnchor: 0,
    id: '7989ac70',
    index: 1,
  }],
};

思维导图

import GGEditor, { Mind } from 'gg-editor';

const data = {
  roots: [{
    label: '中心主题',
    children: [{
      label: '分支主题 1',
    }, {
      label: '分支主题 2',
    }, {
      label: '分支主题 3',
    }],
  }],
};

文档

钉钉交流

钉钉交流

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (10)

加载中
另一个基于typescript + canvas的开源绘画微服务架构图、流程图等工具,可以了解下: https://www.oschina.net/p/topology
2019/09/09 14:16
回复
举报
不支持ie?不支持 edge ?
2019/01/23 12:30
回复
举报
mark一波
2018/09/19 21:14
回复
举报
打分: 力荐
mark
2018/09/15 11:08
回复
举报
有vue的版本么
2018/09/12 20:50
回复
举报
如果有MindManager的功能。。。
2018/09/10 21:39
回复
举报
第一个gif我已经基于G6做了一个版本了, 源码也略窥一二, 感觉没有echarts写的好
2018/09/10 13:16
回复
举报
感觉是个好东东 mark
2018/09/10 10:25
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
厉害
2018/09/09 11:27
回复
举报
更多评论
暂无内容
发表了博客
2020/02/26 14:16

ggEditor给节点增加提示框

参考官方文档: https://www.yuque.com/antv/g6/plugin.tool.tooltip 在react-ggEditor使用方法: import React from 'react'; import { Col } from 'antd'; import { Flow } from 'gg-editor'; import { withPropsAPI } from 'gg-editor'; import CustomNode from '../EditorCustomNode'; import CustomDocNode from '../EditorCustomNode/CustomDocNode'; import '@antv/g6/build/plugin.tool.tooltip'; import G6 from '@an...

0
0
发表了博客
2019/07/30 09:34

gg-editor使用(流程图)

  基于 G6 和 React 的可视化图编辑器 http://ggeditor.com/ GGEditor - Flow的简单使用 import GGEditor, { Flow } from 'gg-editor'; const data = { nodes: [{ type: 'node', size: '70*70', shape: 'flow-circle', color: '#FA8C16', label: '起止节点', x: 55, y: 55, id: 'ea1184e8', index: 0, }, { type: 'node', size: '70*70', shape: 'flow...

0
0
发表了博客
2019/06/20 10:49

在 React 项目中引入 GG-Editor 编辑可视化流程

蚂蚁金服数据可视化团队曾经开源了一款 G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Editor) 不过相关的文档还是太少,实际的使用依然是一个不断摸索的过程... 常见问题: https://github.com/gaoli/GGEditor/issues/130 一、引用 GG-Editor 直接通过 npm 或 yarn 安装依赖 npm install --save gg-editor 由于对 GG-Editor 不熟悉,所以我将...

0
1
发表于开发技能专区
2020/08/29 23:11

2018 年度国产开源软件新秀榜单

来源于开源中国整理分享 开源中国社区在 2018 年新收录了近 2000 款开源软件,种类林林总总。根据开源软件的关注度和活跃度,以及它们在功能上的独特构思,最终产生了这份 2018 年度国产开源软件新秀榜。现在,让我们一同从这些开源软件中,回顾去年的国产开源软件新秀 TOP 30。 区别于之前的常规年度榜单,「国产新秀榜」是新设立的一个年度排行榜,旨在让更多优秀但知名度稍低的开源软件能被广大开发者熟知。而所谓新秀,不仅...

0
0
发表于大前端专区
02/02 08:30

做了N+1个企业项目之后, 我总结了这些React必备插件

为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状态容器,提供可预测化的状态管理 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Redux Thunk Redux的异步处理中间件 Redux Saga Redux中间件,用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) Dva 一个基于 redux 和 redux-saga 的数据流方案 2. UI组件库 Ant ...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
10 评论
166 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部