Node-based Visual Graph Components In Vue – vnodes

vnodes is a set of components that help you draw interactive, SVG-based visual graphs and diagrams using SVG and Vue.js.

How to use it:

1. Import vnodes components.

import { Screen, Node, Edge, Group, Label, Port, Markers, graph } from 'vnodes'
export default {
  components: {
     Screen,
     Node,
     Edge,
     // ...
  }
  // ...
}

2. Create a basic node-based graph.

<template>
  <screen ref="screen">
    <edge v-for="edge in graph.edges" :data="edge" :nodes="graph.nodes" :key="edge.id">
    </edge>
    <node v-for="node in graph.nodes" :data="node" :key="node.id">
      HTML Here
    </node>
  </screen>
</template>

export default {
  components: {
     Screen,
     Node,
     Edge
     // ...
  }
  data () {
    return {
      graph: new graph()
    }
  }
  created () {
    this.graph.createNode('a')
    this.graph.createNode('b')
    this.graph.createEdge('a', 'b')
    this.graph.graphNodes()
  }
}

3. Available props.

// Edge Props
data: { // graph edge referece
  type: Object,
  required: true // { from: String|Object, to: String|Object }
},
nodes: { // graph nodes reference
  type: Array,
},

// Group Props
nodes: {
  type: Array,
  default: []
},
margin: {
  type: Number,
  default: 20
},
padding: { // additional area covered by group besides nodes minxy, maxxy
  type: Object,
  default: () => ({ left: 10, right: 10, top: 10, bottom: 10 })
},
disableDrag: false,

// Label Props
edge: {
  type: Object,
  required: true // { id, pathd } required
},
perc: {
  type: Number,
  default: 50
},
offset: {
  type: Object,
  default: () => ({x: 0, y: 0})
},
align: {
  type: String,
  default: 'center'
},
rotate: {
  type: Boolean,
  default: false
},
useDrag: {
  type: Boolean,
  default: false
},
connector: {
  type: Boolean,
  default: false,
},

// Markers Props
// array of marker objects { id:String, type:String, scale:Number, style:String }
markers: Array,
// Node Props
data: {},
margin: {
  type: Number,
  default: 10, // margin allows border and out of bounds contents to display
},
useDrag: {
  type: Boolean,
  default: true // set to false to override mouse drag behavior
},
fit: {
  type: Boolean,
  default: true // set false to prevent fitting contents
},

// Port props
startOffset: Object, // { x, y }
edgesFrom: {
  type: Array,
  default: () => []
},
edgesTo: {
  type: Array,
  default: () => []
},

// Screen Props
markers: {
  type: Array, // { id:String, type: 'arrow|circle|square|diamond', scale: Number, style: String }
  default: () => []
},
options: {
  type: Object,
  default: () => ({})
}

Preview:

Changelog:

v1.1.15 (09/01/2022)

• orthogonal edges

v1.1.14 (08/29/2022)

• bugfix

v1.1.13 (08/19/2022)

• fix node drag for vue3.x

v1.1.11 (08/18/2022)

• bugfix

v1.1.10 (08/03/2022)

• update flextree

Download Details:

Author: gr1m1um

Live Demo: https://gr1m1um.github.io/vnodes/

Download Link: https://github.com/txlabs/vnodes/archive/refs/heads/master.zip

Official Website: https://github.com/gr1m1um/vnodes

Install & Download:

# NPM
$ npm i vnodes --save