Vue Flowy - a library for flowcharts creation

Vue Flowy – a simple way to create a flowchart

/ Vue.js / By

Vue flowchart library is one thing you might want to use if you want to have a good-looking chart on the front end. Creating everything by yourself would take time and effort, that’s why you should use open-source libraries where possible. This type of library is especially handy if you are working with data and you need to visualize it. For this purpose there comes a Vue Flowy – a library that you can use for creating flowcharts, hierarchy charts, automation software, mind mapping tools, organisation charts, or simple programming platforms.

Documentation Check on GitHub

Vue Flowy example

Vue flowchart library features

There are a few features that will help you to decide if this library is suitable for your needs:

  • Use Vue components to create a flowchart or hierarchy system which makes creation of a flowchart with the Flowy library very easy
  • Easily extendable logic – you can build the needed functionality on top
  • Drag and drop events
  • Use any component in your node tree, variable widths supported
  • Based on Shopify Draggable Vue
  • (Optional) Quasar app extension

How to install the Vue Flowy

Process of installing and running the Vue Flowy is pretty straightforward, first of all you have to install it as a npm package. You can do this with the following command:

npm i --save @hipsjs/flowy-vue

After this, you have to enable the plugin and import CSS:

import Vue from "vue";
import FlowyPlugin from "@hipsjs/flowy-vue"; 
import "@hipsjs/flowy-vue/dist/lib/flowy-vue.css"; 

Vue.use(FlowyPlugin);

After you’ve successfully imported the Flowy, you can use it in your Vue application. This can be simple, as

  • Using the FlowyNewBlock component in order to the define blocks that can be dragged. This also defines the behavior of nodes rendering
  • Wrapping the drag handles with the FlowyDragHandle component
  • Using Flowy component and passing the initial nodes, also defining your logic with the event and method system

Code snippet below is an easy example that might help you to understand the concept of the Vue Flowy better.