Description:
A Vue.js component that helps you generate a draggable, editable flowchart with directional arrows to visualize your workflow in an easy way.
How to use it:
1. Import both Vue and the Vue Flowchart component into your project.
import Vue from 'vue'; import FlowChart from 'flowchart-vue';
2. Register the component.
Vue.use(FlowChart);
3. Add the component to your template.
<flowchart :nodes="nodes" :connections="connections" ref="chart"> </flowchart>
4. Specify the nodes and connections for the flowchart.
export default { name: 'App', data: function() { return { nodes: [ { id: 1, x: 140, y: 270, name: 'Start', type: 'start' // or 'operation' withd: 120, height: 60 }, ], connections: [ { source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }, ], }; }, methods: { // ... } };
5. Default props.
nodes: { type: Array, default: () => [ { id: 1, x: 140, y: 270, name: "Start", type: "start" }, { id: 2, x: 540, y: 270, name: "End", type: "end" }, ], }, connections: { type: Array, default: () => [ { source: { id: 1, position: "right" }, destination: { id: 2, position: "left" }, id: 1, type: "pass", }, ], }, width: { type: [String, Number], default: 800, }, height: { type: [String, Number], default: 600, }, readonly: { type: Boolean, default: false, }, render: { type: Function, default: render, },
6. Event handlers.
@mousemove="handleChartMouseMove" @mouseup="handleChartMouseUp" @dblclick="handleChartDblClick($event)" @mousewheel="handleChartMouseWheel" @mousedown="handleChartMouseDown($event)"
Preview:
Changelog:
v0.17.1 (02/17/2021)
- add @disconnect, @add, @delete
v0.16.1 (02/09/2021)
- add @connect
v0.15.4 (10/31/2020)
- fix: prevent nodes out of svg area
Download Details:
Author: joyceworks
Live Demo: https://joyceworks.github.io/flowchart-vue/
Download Link: https://github.com/joyceworks/flowchart-vue/archive/master.zip
Official Website: https://github.com/joyceworks/flowchart-vue
Install & Download:
# NPM
$ npm install flowchart-vue --save