Description:
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 },
5. Link props.
link: {type: Link, required: true}, nodeStart: {type: Node, required: true}, nodeEnd: {type: Node, required: true}, selected: {type: Boolean, default: false}
Preview:
Changelog:
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