React.js Interaction Flowchart and flow chart designer component for Vue.jsΒ that helps you create an adjustable and draggable flowchart with directional arrows to visualize your workflow in an easy way.
javascript flowchart example, d3 js flowchart, javascript flowchart library, javascript flowchart builder, javascript interactive flowchart, javascript flowchart library open source
How to make use of it:
Install and download:
# NPM $ npm install flowchart-vue --save
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. Define 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)"
Visualize Your Workflow With Vue Flowchart Component Plugin/Github
See Demo And Download
Official Website(joyceworks): Click Here
This superior jQuery/javascript plugin is developed by joyceworks. For extra Advanced Usages, please go to the official website.
Be First to Comment