vue-simple-flowchart

Introduction

a lightweight flowchart editor for Vue.js, code with vanillaJS,

Demo

https://jeffreyrn.github.io/vue-simple-flowchart/demo/

Feature

drag to connent two node, click to delete link
support add, delete, save node
reactive flowchart data

Usage

install via npm/yarn

yarn add vue-simple-flowchart

import in script

import SimpleFlowchart from 'vue-simple-flowchart';
import 'vue-simple-flowchart/dist/vue-flowchart.css';

<simple-flowchart :scene.sync="data"></simple-flowchart>

then set data for flowchart component, for example:

data() {
    return {
        data: {
            centerX: 1024,
                centerY: 140,
                scale: 1,
                nodes: [
                    {
                        id: 2,
                        x: -700,
                        y: -69,
                        type: 'Action',
                        label: 'test1',
                    },
                    {
                        id: 4,
                        x: -357,
                        y: 80,
                        type: 'Script',
                        label: 'test2',
                    },
                    {
                        id: 6,
                        x: -557,
                        y: 80,
                        type: 'Rule',
                        label: 'test3',
                    }
                    ],
                    links: [
                    {
                        id: 3,
                        from: 2, // node id the link start
                        to: 4,  // node id the link end
                    }
                ]
        },
    };
}

Component

Attributes

height, type: Number, default: 400

Events

nodeClick, emit when node click, event = nodeID
nodeDelete: emit when node deleted, event = nodeID
linkBreak: emit when the selected link deleted, event = {id, from, to} (deleted link Object)
linkAdded: emit when new link added, event = {id, from, to} (new link Object)
canvasClick: emit when canvas click, event = { (Event Object) }