Highly Customizable Diagram Flowchart Editor Support for Vue.js

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

PropRequiredDefaultDescription
idnogenerated ulid identifierUnique identifier of node
titleyesTitle of node
coordinatesno{x:10,y:10}Node coordinates object. Must contain this two numerical properties: x and y
sizeno{width:150, height:150}Node size object. Must contain this two numerical properties: width and height
portsInno{}The node’s incoming ports object. Object keys are port names and values are port headers
portsOutno{}The node’s outgoing ports object. Object keys are port names and values are port headers
datano{}Custom data object. May be useful when handling events

Link

PropRequiredType/DefaultDescription
idnoString / generated ulid identifierUnique identifier of link
start_idyesString / –ID of the node from which this link starts
start_portnoString / "default"The name of the outgoing port of the node from which this link begins
end_idyesString / –ID of the node where this link ends
end_portnoString / "default"The name of the incoming port of the node where this link ends

Props

NameType / DefaultDescription
heightType: Number
Default500
Block height with Vue-Diagram-Editor
zoomEnabledType: Boolean
Defaulttrue
Allows to scale the diagram
nodeColorType: Function: String
Defaultnode => "#66cc00"
The function takes object of Node as parameter and must return a string with a hexadecimal color representation. Avoid heavy computation in this function
nodeDeletableType: Function: Boolean
Defaultnode => true
Shows or hides the delete node button
nodePulsableType: Function: Boolean
Defaultnode => false
Enables or disables the ripple of a specific node. Avoid heavy computation in this function
nodePulseColorType: Function: String
Defaultnode => "#f00"
Determines the color of the node’s ripple (in the case when nodePulsable returns true). Avoid heavy computation in this function
beforeDeleteNodeType: Function: Boolean
Defaultnode => true
In the case when the node is deletable, it is executed immediately before deleting. If the function returns false, the node is not deleted. Avoid heavy computation in this function
beforeDeleteLinkType: Function: Boolean
Defaultlink => true
Executed immediately before the link is removed. If the function returns false, the link is not removed. Avoid heavy computation in this function
portDisabledType: Function: Boolean
Default:
({id,type,port}) => false
Determines if the port is blocked for communication. If the port is disabled, you will not be able to create a new link or click on it. Accepts an object with properties:
id – node identifier,
type – port type (in or out),
port – port name
portAvailableType: Function: Boolean
Default:
({id,type,port,activePort}) => true
This function is executed at the moment of hovering to the port when a new link is creating. Accepts an object with properties:
id – node identifier,
type – port type (in or out),
port – port name
activePort – Object with the data of the starting port of the link being created
preventMouseEventsDefaultType: Boolean
Defaulttrue
Stops handling native events see

Events

NameDataDescription
select-nodenodeIdWhen a node is selected, an event with the node identifier is emitted
deleted-nodenodeIdWhen deleting a node, an event with the node identifier is emitted
deleted-linklinkIdWhen deleting a link, an event with the identifier of the deleted link is emitted
updated-nodeNodeUpdated node object
click-port{ "id": "node-id", "type": "in", "port": "port_name" }The event is emitted when a port is clicked. The event sends an object with a node identifier (id), port type (in or out) and port name
created-linkLinkThe event is emitted after creating a new link

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.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…