Flowy - Javascript library to create pretty flowcharts with ease

Flowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project.

Flowy supports the following:

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

Source: github.com

1. INCLUDE JS AND CSS FILES

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> 
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

2. HTML

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

3. JAVASCRIPT

var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, 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
}
function onRearrange(block, parent){
	// When a block is rearranged
}

4. Methods

Get the flowchart data

// As an object
flowy.output();
// As a JSON string
JSON.stringify(flowy.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:

Delete all blocks

To remove all blocks at once use:

flowy.deleteBlocks()

Currently there is no method to individually remove blocks. The only way to go about it is by splitting branches manually.

5. Callbacks

In order to use callbacks, you need to add the functions when initializing Flowy, 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-flowy

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;

On rearrange

function onRearrange(block, parent){
	// When a block is rearranged
	return true;
}

Gets triggered when blocks are rearranged and are dropped anywhere in the canvas, without a parent to attach to. You can either allow the blocks to be deleted, or prevent it and thus have them re-attach to their previous parent using return true;