vue-flowy

Smart flowchart creation based on Vue.

Works with Vue 2.*

Installation

Install via NPM

$ npm install vue-flowy --save

Register as Component

import {VueFlowy} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  }
}

Register as plugin

import Vue from 'vue'
import {VueFlowy} from 'vue-flowy'

Vue.use(VueFlowy)

Usage

Quick example

<template>
  <VueFlowy :chart='chart'></VueFlowy>
</template>

<script>
import {VueFlowy, FlowChart} from 'vue-flowy'

export default {
  name: 'App',

  components: {
    VueFlowy
  },

  data: () => ({
    chart: new FlowChart()
  }),
  mounted() {
    const idea = this.chart.addElement('idea')
    const A = this.chart.addElement('A', {label: 'vscode'})
    const B = this.chart.addElement('B', {label: 'github'})
    const C = this.chart.addElement('C', {label: 'npm'})
    idea.leadsTo(A).leadsTo(B)
    A.leadsTo(C)
  },
}
</script>

Props

Props	Description	Required	Type	Default
chart	The Chart data (type of FlowChart)	true	FlowChart	-

API

Every FlowChart starts by creating a new FlowChart instance with the FlowChart class:

FlowChart

data() {
  return {
    chart: new FlowChart()
  }
}

Now you can work with the new chart variable

<FlowChart>.addElement(id, [options])

Used to add nodes to the chart. Every node needs an id, so this field is required. returns class FlowElement

Available options are:

option	Description	Type	Default
label	A label which shows up on the node	string	id

FlowElement

A FlowElement is returned by <FlowChart>.addElement. It represents one node

<FlowElement>.leadsTo(<FlowElement>, [options])

Used to connect two elements with an edge.