README.md

    Flowchart

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

    NPM

    English | 中文

    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>
            <flowchart :nodes="nodes" :connections="connections" @editnode="handleEditNode"
                        @dblclick="handleDblClick" @editconnection="handleEditConnection" 
                        @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',
              },
            ],
          };
        },
        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: [],
            });
          },
        }
      };
    </script>

    See more at src/views/App.vue.

    Demo

    • GitHub Pages

    • 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

    See Wiki.

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/joyceworks/flowchart-vue

    发行版本

    当前项目没有发行版本

    贡献者 3

    D dependabot[bot] @dependabot[bot]

    开发语言

    • Vue 61.5 %
    • JavaScript 34.9 %
    • CSS 2.8 %
    • HTML 0.9 %