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