vue-simple-flowchart

## Introduction

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-simple-flowchart
249310.1.84 years ago4 years agoMinified + gzip package size for vue-simple-flowchart in KB

Readme

vue-simple-flowchart

Introduction

a Vue.js flowchart editor component, lightweight, code with vanillaJS, 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';
register the component, and add below to html:
<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) }

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

TODO

  • Add horizontal mode
  • Optimizition for large node array
  • Theme color configurable
  • Remove Console.log in build mode