Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.