Press "Enter" to skip to content

Javascript Interactive Flowchart & Designer Component for Vue.js

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

    Leave a Reply

    Your email address will not be published.