Flowy
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.
Made by Alyssa X
Table of contents
Features
Currently, Flowy supports the following:
- Responsive drag and drop
- Automatic snapping
- Block rearrangement
- Delete blocks
- Automatic block centering
- Conditional snapping
- Import saved files
- ES6 to replace jQuery (no dependencies)
- npm install
You can suggest new features here
Installation
Adding Flowy to your WebApp is incredibly simple:
- Include jQuery to your project
- Link
flowy.min.js
andflowy.min.css
to your project
Running Flowy
Initialization
flowy(canvas, ongrab, onrelease, onsnap, spacing_x, spacing_y);
Parameter | Type | Description |
---|---|---|
canvas |
jQuery object | 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 |
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
<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>
Javascript
var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy($("#canvas"), onGrab, onRelease, onSnap, 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
}
Callbacks
In order to use callbacks, you need to add the functions when initializing Flowy, as explained before.
On grab
function onGrab(block){
// When the user grabs a block
}
Gets triggered when a user grabs a block with the class create-flowy
Parameter | Type | Description |
---|---|---|
block |
jQuery object | The block that has been grabbed |
On release
function onRelease(){
// When the user lets go of a block
}
Gets triggered when a user lets go of a block, regardless of whether it attaches or even gets released in the canvas.
On snap
function onSnap(block, first, parent){
// When a block can attach to a parent
return true;
}
Gets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using return true;
Parameter | Type | Description |
---|---|---|
block |
jQuery object | The block that has been grabbed |
first |
boolean | If true, the block that has been dragged is the first one in the canvas |
parent |
jQuery object | The parent the block can attach to |
Methods
Get the flowchart data
// As an object
flowy.output();
// As a JSON string
JSON.stringify(flowy.output());
The JSON object that gets outputted looks like this:
[
html: "",
blockarr: [],
blocks: [
{
"id": 1,
"parent": 0,
"data": [
{
"name": "blockid",
"value": "1"
}
]
}
]
]
Here's what each property means:
Key | Value type | Description |
---|---|---|
html |
string | Contains the canvas data |
blockarr |
array | Contains the block array generated by the library (for import purposes) |
blocks |
array | Contains the readable block array |
id |
integer | Unique value that identifies a block |
parent |
integer | The id of the parent a block is attached to (-1 means the block has no parent) |
data |
array of objects | An array of all the inputs within a certain block |
name |
string | The name attribute of the input |
value |
string | The value attribute of the input |
Import the flowchart data
flowy.import(output)
Allows you to import entire flowcharts initially exported using the previous method, flowy.output()
Parameter | Type | Description |
---|---|---|
output |
JSON object | The data from flowy.output() |
Delete all blocks
To remove all blocks at once use:
flowy.deleteBlocks()
Currently there is no method to individually remove blocks. The only way to go about it is by splitting branches manually.
Feel free to reach out to me through email at hi@alyssax.com or on Twitter if you have any questions or feedback! Hope you find this useful 💜