Drag And Drop Flowchart Builder - Flowy.js

Drag And Drop Flowchart Builder - Flowy.js
File Size: 271 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Flowy.js is a pretty nice and user-friendly flowchart builder to create responsive, professional flowchart using drag and drop.

Use it for automation software, mind mapping tools, programming platforms, organization charts, family trees, and more.

See It In Action:

More features:

  • Based on jQuery.
  • Auto snaps blocks to another one.
  • Easy to create your blocks.
  • Output the flowchart data as a JS object or JSON string.

How to use it:

1. To get started, include jQuery library and the Flowy.js library on the webpage.

<link href="/path/to/flowy.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/flowy.min.js"></script>

2. Create an element to hold the flowchart.

<div id="canvas">
</div>

3. Create predefined blocks that can be inserted into the flowchart via drag and drop.

<div class="create-flowy">
  Block 1
</div>

<div class="create-flowy">
  Block 2
</div>

<div class="create-flowy">
  Block 3
</div>

...

4. Initialize the flowchart builder and done.

flowy($("#canvas"));

5. Event handlers.

function onGrab(){
  // do something
}
function onRelease(){
  // do something
}
function onSnap(){
  // do something
}

flowy($("#canvas"), onGrab, onRelease, onSnap)

6. Set the space between blocks.

var spacing_x = 20;
var spacing_y = 50;
flowy($("#canvas"), onGrab, onRelease, onSnap, spacing_x, spacing_y);

7. Get the flowchart data.

// As a JS object
flowy.output();
// As a JSON string
JSON.stringify(flowy.output());

8. Remove all blocks from the canvas.

flowy.deleteBlocks()

9. Import data into the flowchart.

flowy.import(output)

Changelog:

2019-12-08

  • Nested inputs & data attribute in the output

2019-12-05

  • Fixed touchStart

2019-12-04

  • Added mobile support

2019-12-03

  • Allows to import data

This awesome jQuery plugin is developed by alyssaxuu. For more Advanced Usages, please check the demo page or visit the official website.