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"> </div>
3. Create predefined blocks that may be inserted into the flowchart by way of drag and drop.
<div class="create-flowy"> Block 1 </div> <div class="create-flowy"> Block 2 </div> <div class="create-flowy"> Block 3 </div> ...
4. Initialize the flowchart builder and completed it.
flowy(document.getElementById("canvas"));
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 flowy.output(); // As a JSON string JSON.stringify(flowy.output());
8. Remove all blocks from the canvas.
flowy.deleteBlocks()
9. Import data into the flowchart.
flowy.import(output)
Drag And Drop Flowchart Builder, Flowy Plugin/Github
See Demo And Download
Official Website(alyssaxuu): Click Here
This superior jQuery/javascript plugin is developed by alyssaxuu. For extra Advanced usage, please go to the official website.
Be First to Comment