GGEditor 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
GGEditor 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 国产
提 交 者 高力
适用人群 未知
收录时间 2018-09-06

软件简介

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
回复
举报
腻害
2018/09/10 09:27
回复
举报
厉害
2018/09/09 11:27
回复
举报
更多评论
暂无内容
发表了博客
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 '...

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, ...

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

0
1
发表于AI & 大数据专区
08/29 23:11

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

来源于开源中国整理分享 开源中国社区在 2018 年新收录了近 2000 款开源软件,种类林林总总。根据开源软件的关注度和活跃度,以及它们在功能上的独特构思,最终产生了这份 2018 年度国产开源软件新秀榜。现在,让...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
10 评论
159 收藏
分享
返回顶部
顶部