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