Visualize Your Workflow With Vue Flowchart Component

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.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