Install & Download:
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:
