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>