flowychart v1.2.0

FlowyChart

A javascript library to create responsive flowcharts with ease.

Table of contents

• Features
• Installation
• Running FlowyChart
  • Initialization
  • Example
• Callbacks - On grab - On release - On snap
• Methods
  • Get the flowchart data
  • Import the flowchart data
  • Delete all blocks

Features

Currently, FlowyChart supports the following:

• Responsive drag and drop
• Automatic snapping
• Block rearrangement
• Delete blocks
• Automatic block centering
• Conditional snapping
• Import saved files
• Mobile support
• Vanilla javascript (no dependencies)
• npm install

Installation

Adding FlowyChart to your WebApp is incredibly simple: 1. Link build/flowyChart.min.js to your project 2. Create a canvas element that will contain the flowchart (for example, <div id="canvas"></div>) 3. Create the draggable blocks with the .create-flowyChart class (for example, <div class="create-flowyChart">Grab me</div>)

Running FlowyChart

Initialization

flowyChart(canvas, ongrab, onrelease, onsnap, spacing_x, spacing_y);

To define the blocks that can be dragged, you need to add the class .create-flowyChart

Example

HTML

<div class="create-flowyChart">The block to be dragged</div>
<div id="canvas"></div>

Javascript

const spacing_x = 40;
const spacing_y = 100;

// Initialize FlowyChart
flowyChart(document.getElementById('canvas'), onGrab, onRelease, onSnap, spacing_x, spacing_y);

function onGrab(block) {
  // When the user grabs a block
}

function onRelease() {
  // When the user releases a block
}

function onSnap(block, first, parent) {
  // When a block snaps with another one
}

Callbacks

In order to use callbacks, you need to add the functions when initializing FlowyChart, as explained before.

On grab

function onGrab(block) {
  // When the user grabs a block
}

Gets triggered when a user grabs a block with the class create-flowyChart

On release

function onRelease() {
  // When the user lets go of a block
}

Gets triggered when a user lets go of a block, regardless of whether it attaches or even gets released in the canvas.

On snap

function onSnap(block, first, parent) {
  // When a block can attach to a parent
  return true;
}

Gets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using return true;

Methods

Get the flowchart data

// As an object
flowyChart.output();

// As a JSON string
JSON.stringify(flowyChart.output());

The JSON object that gets outputted looks like this:

[
  html: "",
  blockarr: [],
  blocks: [
    {
      "id": 1,
      "parent": 0,
      "data": [
        {
          "name": "blockid",
          "value": "1"
        }
      ],
      "attr": [
        {
          "id": "block-id",
          "class": "block-class"
        }
      ]
    }
  ]
]

Here's what each property means:

Import the flowchart data

flowyChart.import(output)

Allows you to import entire flowcharts initially exported using the previous method, flowyChart.output()

Delete all blocks

To remove all blocks at once use:

flowyChart.deleteBlocks()