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