Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ChrisShen93/VGEditor

A visual graph editor based on G6 and Vue, inspired by GGEditor.
https://github.com/ChrisShen93/VGEditor

Last synced: 2 months ago
JSON representation

A visual graph editor based on G6 and Vue, inspired by GGEditor.

Host: GitHub
URL: https://github.com/ChrisShen93/VGEditor
Owner: ChrisShen93
License: mit
Archived: true
Created: 2019-09-12T01:17:59.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2021-09-01T22:40:38.000Z (almost 3 years ago)
Last Synced: 2024-03-24T06:22:23.083Z (3 months ago)
Language: JavaScript
Homepage: https://chrisshen93.github.io/VGEditor
Size: 3.54 MB
Stars: 207
Watchers: 9
Forks: 48
Open Issues: 24
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor (Components & Libraries / UI Components)
awesome-vue - vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor. ` 📝 2 years ago` (UI Components [🔝](#readme))

README

        # VGEditor

A visual graph editor based on G6 and Vue, inspired by [GGEditor](https://github.com/alibaba/GGEditor)

### Online demo

1. [flow](https://chrisshen93.github.io/VGEditor/demo/build/#/flow)

2. [koni](https://chrisshen93.github.io/VGEditor/demo/build/#/koni)

3. [mind](https://chrisshen93.github.io/VGEditor/demo/build/#/mind)

## Installation

### yarn and npm

```shell

yarn add [email protected]

# or

npm install [email protected] -S

```

> If you're using vue-cli v4, you must use [email protected] or later

### Run demo

```shell

git clone https://github.com/ChrisShen93/VGEditor.git

cd VGEditor

yarn

yarn dev

```

## Usage

### Flow

```html

  

    

  

import VGEditor, { Flow } from 'vg-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,

  }],

};

export default {

  data () {

    return { data }

  },

  components: { VGEditor, Flow }

}

```

### Mind

```html

  

    

  

import VGEditor, { Mind } from 'vg-editor'

const data = {

  roots: [{

    label: '中心主题',

    children: [{

      label: '分支主题 1',

    }, {

      label: '分支主题 2',

    }, {

      label: '分支主题 3',

    }],

  }],

};

export default {

  data () {

    return { data }

  },

  components: { VGEditor, Mind }

}

```

### Documentation

[API](https://chrisshen93.github.io/VGEditor/docs/)