drag flowchart bilder flowy - Free Download Drag And Drop Flowchart Builder - Flowy.js

Free Download Drag And Drop Flowchart Builder – Flowy.js

Posted on

This time I will share jQuery Plugin and tutorial about Drag And Drop Flowchart Builder – Flowy.js, hope it will help you in programming stack.

drag flowchart bilder flowy - Free Download Drag And Drop Flowchart Builder - Flowy.js
File Size: 274 KB
Views Total: 17056
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.

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

2. Create an element to hold the flowchart.

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

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

01 <div class="create-flowy">
02   Block 1
03 </div>
04  
05 <div class="create-flowy">
06   Block 2
07 </div>
08  
09 <div class="create-flowy">
10   Block 3
11 </div>
12  
13 ...

4. Initialize the flowchart builder and done.

1 flowy(document.getElementById("canvas"));

5. Event handlers.

01 function onGrab(block){
02   // do something
03 };
04  
05 function onRelease(){
06   // do something
07 };
08  
09 function onSnap(block, first, parent){
10   // do something
11 };
12  
13 function onRearrange(block, parent){
14   // When a block is rearranged
15 };
16  
17 flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange);

6. Set the space between blocks.

1 var spacing_x = 20;
2 var spacing_y = 50;
3 flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

7. Get the flowchart data.

1 // As a JS object
2 flowy.output();
3 // As a JSON string
4 JSON.stringify(flowy.output());

8. Remove all blocks from the canvas.

1 flowy.deleteBlocks()

9. Import data into the flowchart.

1 flowy.import(output)

Changelog:

2021-01-02

  • Rearrange fix

2020-10-07

  • Optimizations

2020-10-06

  • Fix import

2020-07-30

  • Fixed Dynamic block height indicator

2020-07-29

  • Automatically scroll canvas when dragging to edges

2020-07-05

  • IE11 .closest workaround

2020-06-18

  • Parsing block properties on import

2020-05-16

  • OnSnap method now returns parent DOM element

2020-04-25

  • OnSnap bug fix

2020-04-23

  • Fix scroll issue on rearrange

2020-04-18

  • Remove “dragging” class after rearranging

2020-04-17

  • Fixed error when importing only 1 block

2020-04-15

  • Fixed error when importing only 1 block

2020-04-11

2020-04-04

  • Update

2020-01-06

  • Large flowcharts fix

2019-12-20

  • Cleaned up the code

2019-12-17

  • Fixed drag.

2019-12-15

  • Removed jQuery dependency.

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