Flowchart & Flowchart designer component for Vue.js([flowchart-react](https://github.com/joyceworks/flowchart-react) for React.js).

Downloads in past


0.32.0a month ago4 years agoMinified + gzip package size for flowchart-vue in KB


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


```shell script yarn add flowchart-vue
    <div id="app">
        <button type="button" @click="$refs.chart.add({id: +new Date(), x: 10, y: 10, name: 'New', type: 'operation', approvers: []})">
        <button type="button" @click="$refs.chart.remove()">
        <button type="button" @click="$refs.chart.editCurrent()">
        <button type="button" @click="$refs.chart.save()">
        <button type="button" v-if="showRemovingConfirmation" @click="confirmRemoving">
            Confirm removing
        <button type="button" v-if="showRemovingConfirmation" @click="showRemovingConfirmation = false">
            Reject removing
        <flowchart :nodes="nodes" 
                   @save="handleChartSave" ref="chart">
  import Vue from 'vue';
  import FlowChart from 'flowchart-vue';


  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) {
      handleEditConnection(connection) {
      handleDblClick(position) {
          id: +new Date(),
          x: position.x,
          y: position.y,
          name: 'New',
          type: 'operation',
          approvers: [],
      initRemovingConfirmation() {
        this.showRemovingConfirmation = true;
      confirmRemoving() {
        this.showRemovingConfirmation = false;

See more at src/views/App.vue.


``` shell git clone https://github.com/joyceworks/flowchart-vue.git cd flowchart-vue yarn install yarn run serve ```
Then open http://localhost:yourport/ in browser.



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 }


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


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" }


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


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 @click="$refs.chart.save()">Save</button>