Diagram (Flowchart) Editor With Vue

A customizable, zoomable, pannable diagram (flowchart) editor that makes it possible to use any component within each node of the diagram.

How to use it:

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 app 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 own 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. Available component props.

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. Link 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. Node title props.

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 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},

Preview:

Changelog:

v1.2.1 (05/11/2021)

• Bugfix: new methods proxies

v1.2.0 (04/28/2021)

• add props and methods

v1.1.2 (04/01/2021)

• fix making new link

Download Details:

Author: max-kut

Live Demo: https://vue-diagram-editor.js.org/#getting-started

Download Link: https://github.com/max-kut/vue-diagram-editor/archive/main.zip

Official Website: https://github.com/max-kut/vue-diagram-editor

Install & Download:

# NPM
$ npm i vue-diagram-editor