Vue graph diagram editor is the purpose of this component is to make it possible to use any component within each node of the diagram.

diagram js examples, javascript diagram library, javascript flowchart library open source, javascript diagram library free, vue diagram library, vue diagram component

Vue Diagram Editor Features:

• Scale slot for node
• Ripple (pulsating) knot
• Any number of cases on each page
• Customizable knot color
• Customizable node pulse color

How to make use of it:

Install and download:

# NPM
$ npm i vue-diagram-editor

1. Import the Diagram Editor component.

import VueDiagramEditor from 'vue-diagram-editor';
import 'vue-diagram-editor/dist/vue-diagram-editor.css';

2. Add the Diagram Editor to your application template.

<template>
  <VueDiagramEditor
    ref="diagram"
    :node-color="nodeColor"
    :node-pulsable="nodePulsable"
  >
    <pre slot="node" slot-scope="{node}">{{ format(node) }}</pre>
  </VueDiagramEditor>
</template>

3. Register the component and add your nodes to the diagram.

export default {
  name: 'simple-example',
  components: {
    VueDiagramEditor
  },
  data: () => ({
    nodes: {
      'node-1': {
        id: 'node-1',
        title: 'My node 1',
        size: {
          width: 200,
          height: 220
        },
        portsOut: {
          default: ''
        }
      },
      'node-2': {
        id: 'node-2',
        title: 'My node 2',
        size: {
          width: 200,
          height: 220
        },
        coordinates: {
          x: 280,
          y: 100
        },
        portsIn: {
          default: 'in port'
        }
      },
    },
    links: {
      'link-1': {
        id: 'link-1',
        start_id: 'node-1',
        start_port: 'default',
        end_id: 'node-2',
        end_port: 'default'
      }
    }
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.diagram.setModel({
        nodes: this.nodes,
        links: this.links
      });
    },
    format(node) {
      return JSON.stringify(node, null, 2);
    },
    nodeColor(node) {
      if (node.coordinates.x > 200) {
        return '#0f0';
      }
      if (node.coordinates.y > 200) {
        return '#f00';
      }
      return '#00f';
    },
    nodePulsable(node) {
      return node.coordinates.y > 200;
    }
  }
};

4. Component props available.

height: {
  type: Number,
  default: 500
},
gridSnap: {
  type: Number,
  default: 1
},
zoomEnabled: {
  type: Boolean,
  default: true
},
nodeColor: {
  type: Function,
  default: () => "#66cc00"
},
nodePulseColor: {
  type: Function,
  default: () => '#f00'
},
nodePulsable: {
  type: Function,
  default: () => false
},
nodeDeletable: {
  type: Function,
  default: () => true
},
beforeDeleteNode: {
  type: Function,
  default: () => true
},
beforeDeleteLink: {
  type: Function,
  default: () => true
},
portDisabled: {
  type: Function,
  default: () => false
},
portAvailable: {
  type: Function,
  default: () => true
},
pan: {
  type: Boolean,
  default: true
},
preventMouseEventsDefault: {
  type: Boolean,
  default: true
},

5. Connecting props.

link: {type: Link, required: true},
nodeStart: {type: Node, required: true},
nodeEnd: {type: Node, required: true},
selected: {type: Boolean, default: false}

6. Node props.

node: {type: Node, required: true},
color: {type: Function, required: true},
pulseColor: {type: Function, required: true},
pulsable: {type: Function, required: true},
portDisabled: {type: Function, required: true},
portAvailable: {type: Function, required: true},
deletable: {type: Function, required: true},
activePort: {type: Object, default: null},
hoveredPort: {type: Object, default: null},
selected: {type: Boolean, default: false},
dragging: {type: Boolean, default: false},

7. Props title node.

x: {
  type: Number,
  required: true
},
y: {
  type: Number,
  required: true
},
width: {
  type: Number,
  required: true
},
title: {
  type: String,
  required: true
},
deletable: {
  type: Boolean,
  default: true
},
dragging: {
  type: Boolean,
  default: false
}

8. Diagram of root props.

width: {type: Number, default: 0},
height: {type: Number, required: true},
gridSnap: {type: Number, required: true},
zoomEnabled: {type: Boolean, required: true},
nodeColor: {type: Function, required: true},
nodePulseColor: {type: Function, required: true},
nodePulsable: {type: Function, required: true},
nodeDeletable: {type: Function, required: true},
beforeDeleteNode: {type: Function, required: true},
beforeDeleteLink: {type: Function, required: true},
portDisabled: {type: Function, required: true},
portAvailable: {type: Function, required: true},
pan: {type: Boolean, required: true},
preventMouseEventsDefault: {type: Boolean, default: true},

API

Node

Link

Props

Events

Vue Diagram Flowchart Editor Plugin/Github, vue block diagram, javascript graph editor

See Demo And Download

Official Website(max-kut): Click Here

This superior jQuery/javascript plugin is developed by max-kut. For extra advanced usage, please go to the official website.