README

Flowy


!Demo
A javascript library to create pretty flowcharts with ease ✨

Dribbble | Twitter | Live demo


Flowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project. 

 You can support this project (and many others) through GitHub Sponsors! ❤️

Made by Alyssa X

 Table of contents
- Features
- Installation
- Running Flowy
    - Initialization
    - Example
- Callbacks
	- On grab
	- On release
	- On snap
	- On rearrange
- Methods
    - Get the flowchart data
    - Import the flowchart data
    - Delete all blocks


 Features
Currently, Flowy supports the following:

 - [x] Responsive drag and drop
 - [x] Automatic snapping
 - [x] Automatic scrolling
 - [x] Block rearrangement
 - [x] Delete blocks
 - [x] Automatic block centering
 - [x] Conditional snapping
 - [x] Conditional block removal
 - [x] Import saved files
 - [x] Mobile support
 - [x] Vanilla javascript (no dependencies)
 - [ ] npm install
 
You can suggest new features here
 

 Installation
Adding Flowy to your WebApp is incredibly simple:

1.  Link  flowy.min.js  and  flowy.min.css  to your project. Through jsDelivr: 
html
 


2.  Create a canvas element that will contain the flowchart (for example,  )
3.  Create the draggable blocks with the  .create-flowy  class (for example,  Grab me)

 Running Flowy

 Initialization
javascript
flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);


Parameter | Type | Description
--- | --- | ---
   canvas | javascript DOM element | The element that will contain the blocks 
   ongrab | function (optional) |  Function that gets triggered when a block is dragged
   onrelease | function (optional) |  Function that gets triggered when a block is released
   onsnap | function (optional) |  Function that gets triggered when a block snaps with another one
   onrearrange | function (optional) |  Function that gets triggered when blocks are rearranged
   spacing_x | integer (optional) |  Horizontal spacing between blocks (default 20px)
   spacing_y | integer (optional) |  Vertical spacing between blocks (default 80px)

To define the blocks that can be dragged, you need to add the class .create-flowy

 Example
HTML
html
The block to be dragged


Javascript
javascript
var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
	// When the user grabs a block
}
function onRelease(){
	// When the user releases a block
}
function onSnap(block, first, parent){
	// When a block snaps with another one
}
function onRearrange(block, parent){
	// When a block is rearranged
}

 Callbacks
In order to use callbacks, you need to add the functions when initializing Flowy, as explained before.
 On grab
javascript
function onGrab(block){
	// When the user grabs a bloc