GitHub - alyssaxuu/flowy: The minimal javascript library to create flowcharts ✨
source link: https://github.com/alyssaxuu/flowy
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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
You can try out the demo to see the library in action.
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);
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(){ // When the user grabs a block } function onRelease(){ // When the user releases a block } function onSnap(){ // When a block snaps with another one }
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:
{ "id": 1, "parent": 0, "data": [ { "name": "blockid", "value": "1" } ] }
Here's what each property means:
Key Value type Descriptionid
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 the selected block
name
string
The name attribute of the input
value
string
The value attribute of the input
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 [email protected] or on Twitter if you have any questions or feedback! Hope you find this useful 💜
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK