Some Updates

Remove node fixed width and height css, and calculate the link start and end position dynamically
Add node double click event for edit action and one click event for drag node.

vue-simple-flowchart

Introduction

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

Note

This repository is not being actively maintained due to lack of time and interest.

My sincerest apologies to the open source community for allowing this project to stagnate. I hope it was useful for some of you as a jumping-off point.

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