Drag And Drop Flowchart Builder - Flowy.js

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. Vanilla JavaScript.
• 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 the Flowy.js library on the webpage.

<link href="/path/to/flowy.min.css" rel="stylesheet" />
<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(document.getElementById("canvas"));

5. Event handlers.

function onGrab(block){
  // do something
};

function onRelease(){
  // do something
};

function onSnap(block, first, parent){
  // do something
};

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

flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange);

6. Set the space between blocks.

var spacing_x = 20;
var spacing_y = 50;
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, 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-20

• Cleaned up the code

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.