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.32.0 (11/02/2023)
- feat: support deleting nodes using the backspace key
v0.30.0 (12/15/2022)
- Bugfixes
v0.29.2 (11/08/2022)
- Bugfixes
v0.29.1 (11/04/2022)
- Fixed moveCoordinates diff x-axis value to follow mathematical rules, init method update nodes coordinates if elements were moved before init function execution because in other case newly rendered nodes are in invalid position
v0.29.0 (09/30/2022)
- Code refactored to be more abstract
v0.28.0 (09/23/2022)
- Code refactored to be more abstract
v0.27.0 (08/24/2022)
- Parametrized connectors for nodes
v0.26.0 (08/14/2022)
- Update
v0.25.0 (08/09/2022)
- Event emitting when drag&drop nodes position modification ends
v0.24.0 (07/18/2022)
- refactor(deps): use standalone D3 microlibraries
v0.21.0 (07/13/2022)
- feat(node): add color props
v0.20.0 (03/03/2022)
- refactor(deps): remove some usages of d3
v0.19.2 (09/09/2021)
- Update svg.js
v0.19.1 (08/22/2021)
- feat(events): add @selectconnection event, select events before render fn run
v0.18.1 (08/01/2021)
- feat(events): add @select
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