Flowchart

Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js).

Usage

yarn add flowchart-vue

<template>
    <div id="app">
        <button type="button" @click="$refs.chart.add({id: +new Date(), x: 10, y: 10, name: 'New', type: 'operation', approvers: []})">
            Add
        </button>
        <button type="button" @click="$refs.chart.remove()">
            Del
        </button>
        <button type="button" @click="$refs.chart.editCurrent()">
            Edit
        </button>
        <button type="button" @click="$refs.chart.save()">
            Save
        </button>
        <button type="button" v-if="showRemovingConfirmation" @click="confirmRemoving">
            Confirm removing
        </button>
        <button type="button" v-if="showRemovingConfirmation" @click="showRemovingConfirmation = false">
            Reject removing
        </button>
        <flowchart :nodes="nodes" 
                   :connections="connections" 
                   :remove-requires-confirmation="true"
                   @editnode="handleEditNode"
                   @dblclick="handleDblClick" 
                   @editconnection="handleEditConnection"
                   @removeconfirmationrequired="initRemovingConfirmation"
                   @save="handleChartSave" ref="chart">
        </flowchart>
    </div>
</template>
<script>
  import Vue from 'vue';
  import FlowChart from 'flowchart-vue';

  Vue.use(FlowChart);

  export default {
    name: 'App',
    data: function() {
      return {
        nodes: [
          // Basic fields
          {id: 1, x: 140, y: 270, name: 'Start', type: 'start'},
          // You can add any generic fields to node, for example: description
          // It will be passed to @save, @editnode
          {id: 2, x: 540, y: 270, name: 'End', type: 'end', description: 'I\'m here'},
        ],
        connections: [
          {
            source: {id: 1, position: 'right'},
            destination: {id: 2, position: 'left'},
            id: 1,
            type: 'pass',
          },
        ],
        showRemovingConfirmation: false,
      };
    },
    methods: {
      handleChartSave(nodes, connections) {
        // axios.post(url, {nodes, connections}).then(resp => {
        //   this.nodes = resp.data.nodes;
        //   this.connections = resp.data.connections;
        //   // Flowchart will refresh after this.nodes and this.connections changed
        // });
      },
      handleEditNode(node) {
        if (node.id === 2) {
          console.log(node.description);
        }
      },
      handleEditConnection(connection) {
      },
      handleDblClick(position) {
        this.$refs.chart.add({
          id: +new Date(),
          x: position.x,
          y: position.y,
          name: 'New',
          type: 'operation',
          approvers: [],
        });
      },
      initRemovingConfirmation() {
        this.showRemovingConfirmation = true;
      },
      confirmRemoving() {
        this.$refs.chart.confirmRemove();
        this.showRemovingConfirmation = false;
      }
    }
  };
</script>

See more at src/views/App.vue.

Demo

• GitHub Pages

• CodeSandbox

• Flowchart Vue Demo

• Development Environment

  git clone https://github.com/joyceworks/flowchart-vue.git
  cd flowchart-vue
  yarn install
  yarn run serve

  Then open http://localhost:yourport/ in browser.

API

Props

Property	Description	Type	Default
nodes	Collection of nodes	Array	[{id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, {id: 2, x: 540, y: 270, name: 'End', type: 'end'}]
connections	Collection of connections	Array	[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }]
width	Width of canvas	String | Number	800
height	Height of canvas	String | Number	600
locale	Display language, available values: 'en', 'zh'	String	'en'
readonly	Read-only	Boolean	false
render	Custom render function	null
readOnlyPermissions	Allows to specify more granular read-only mode permissions	Object	{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }

Events

Event	Description	Handler
editnode	Node double-click event	(node) => void
editconnection	Connection double-click event	(connection) => void
save	Save event	(nodes, connections) => void
dblclick	Background double-click event	(position: {x: number, y: number}) => void
connect	Connect event	(connection, nodes, connections) => void
disconnect	Disconnect event	(connection, nodes, connections) => void
add	Add node event	(node, nodes, connections) => void
delete	Delete node event	(node, nodes, connections) => void
select	Select node event	nodes => void
selectconnection	Select connection event	connections => void
render	Node render event, children is a collection of svg elements	(node: Node, children: { header, title, body, content }) => vod
nodesdragged	Notifies which nodes dragging just ended	(nodes) => void
removeConfirmationRequired	Notifies that remove confirmation required. Pass nodes and connections selected to remove	(nodes, connections) => void
movediff	Notifies about change in chart view position	(diff: {x: number, y: number}) => void

Properties.Node

Property	Description	Type	Default
id	ID	Number	+new Date()
x	Horizontal position of node	Number	-
y	Vertical position of node	Number	-
type	Type of node	String	'operation'
width	Width of node	Number	120
height	Height of node	Number	60
approvers	Approvers of node, eg: [{name: 'admin'}]	Array	[]
connectors	Defines which connectors should be rendered	Array	['top', 'right', 'bottom', 'left']
theme	Defines colors for specified node elements	Object	{ borderColor: "#bbbbbb", borderColorSelected: "#666666", headerTextColor: "black", headerBackgroundColor: "#f1f3f4", bodyBackgroundColor: "white", bodyTextColor: "black" }

Properties.Connection

Property	Description	Type	Default
id	ID	Number	+new Date()
source	Source of connection	Object	-
destination	Destination of connection	Object	-
type	Type of connection	String	pass

Properties.Connection.Source & Properties.Connection.Destination

Property	Description	Type	Default
id	Node id	Object	-
position	Starting/Ending position of node	Object	-

Slot

If you want you can pass value as slot. It allows you to add new UI elements to chart playground. These slot elements aren't selectable - are ignored while selection. Moreover actions on click and on double click are disabled in area filled by passed elements. You can use this functionality to e.g. in quite easy way add toolbar inside.

<flowchart ...>
  <div id="toolbox" style="position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; 
                           display: flex; align-items: center; 
                           background-color: rgba(225, 225, 225, 0.7);">
    <button @click="$refs.chart.remove()">Delete(Del)</button>
    <button @click="$refs.chart.editCurrent()">
      Edit(Double-click node)
    </button>
    <button @click="$refs.chart.save()">Save</button>
  </div>
</flowchart>