Press "Enter" to skip to content

[Drag And Drop] A Minimal Javascript Library to Create Flow Charts | Flowy.js

Flowy makes creating web applications with the flowchart function a very simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by applying the library in your project.

How to make use of it:

1. To get began, 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 a component to hold the flowchart.

<div id="canvas">

3. Create predefined blocks that may be inserted into the flowchart by way of 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 completed it.


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

8. Remove all blocks from the canvas.


9. Import data into the flowchart.


Drag And Drop Flowchart Builder, Flowy Plugin/Github




  • Automatically scroll canvas when dragging to edges


  • Parsing block properties on import


  • OnSnap method now returns the parent DOM component


  • Fix scroll problem on rearranging


  • Remove “dragging” class after rearranging


  • Fixed error when importing just one block

A Minimal Javascript Library to Create Flow Charts

See Demo And Download

Official Website(alyssaxuu): Click Here

This superior jQuery/javascript plugin is developed by alyssaxuu. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.