Draggable Workflow Diagram In Vue – Blocks

Description:

A flowchart editor for Vue.js that allows you to create a dynamic, draggable workflow diagram with connection lines and directional arrows.

How to use it:

1. Import the vue-blocks component.

import VueBlocksContainer from './vue-blocks/src';

2. Add a VueBlocksContainer component to the app template.

<template>
  <div id="app">
    <VueBlocksContainer
      ref="container"
      :blocksContent="blocks"
      :scene.sync="scene"
      class="container"/>
  </div>
</template>

3. Register the component and define the blocks, nodes, scenes for the flowchart.

export default {
  name: 'App',
  components: {
    VueBlocksContainer
  },
  data: function () {
    return {
      blocks: [
        {
          name: 'test',
          title: 'Test block',
          family: 'Test',
          description: 'Description text',
          fields: [
            {
              name: 'in1',
              type: 'event',
              attr: 'input'
            },
            {
              name: 'in2',
              type: 'event',
              attr: 'input'
            },
            {
              name: 'out1',
              type: 'event',
              attr: 'output'
            },
            {
              name: 'out2',
              type: 'event',
              attr: 'output'
            }
          ]
        }
      ],
      scene: {
        blocks: [
          {
            id: 1,
            x: 0,
            y: 0,
            name: 'test',
            title: 'Test block',
            values: {
              property: [
                {
                  name: 'message',
                  type: 'string'
                }
              ]
            }
          },
          {
            id: 2,
            x: 0,
            y: 50,
            name: 'test',
            title: 'Test block 2',
            values: {
              property: [
                {
                  name: 'message',
                  type: 'string'
                }
              ]
            }
          }
        ],
        links: [],
        container: {
          centerX: 0,
          centerY: 0,
          scale: 1
        }
      }
    }
  }
}

Preview:

Draggable Workflow Diagram In Vue - Blocks

Download Details:

Author: ghostiam

Live Demo: https://ghost.im/vue-blocks/index.html

Download Link: https://github.com/ghostiam/vue-blocks/archive/master.zip

Official Website: https://github.com/ghostiam/vue-blocks

Install & Download:

You Might Be Interested In:

Tags:

Add Comment