Drag And Drop Flowchart Builder - Flowy.js

Drag And Drop Flowchart Builder - Flowy.js
File Size: 273 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. 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">

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

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

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

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


4. Initialize the flowchart builder and done.


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
// As a JSON string

8. Remove all blocks from the canvas.


9. Import data into the flowchart.




  • Large flowcharts fix


  • Cleaned up the code


  • Fixed drag.


  • Removed jQuery dependency.


  • Nested inputs & data attribute in the output


  • Fixed touchStart


  • Added mobile support


  • 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.