JavaScript Library to Create & Edit Flowcharts in Web Apps
Open Source JavaScript API to Create Web Apps that allows generating and managing awesome flowcharts with ease.
Flowy is a very useful library that enables software developers to create JavaScript web apps for creating and managing flowcharts with ease. Flowy.js is a pretty nice and user-friendly flowchart builder and can be easily integrated with other libraries. The library helps developers to create automation software, mind mapping tools, organization charts, family trees, and much more. This Flowy library is open source and available under the MIT license which means it can be freely used.
The Flowy library not only easily display flowcharts but also supports a complete drag & drop editor with a great interface, lots of customization options, gesture event listeners, and other amazing features. Some of these features include Automatic snapping support, automatic scrolling, rearrangement of blocks, select and remove blocks, auto block centering, import and use existing files, mobile support, easy to create your blocks, conditional snapping, and so on.
Getting Started with Flowy
The recommended way to install the Flowy library is using NPM. Please use the following command for a smooth installation
Install Flowy via NPM
npm install flowyClone Flowy via GIT Repository
git clone https://github.com/alyssaxuu/flowy.gittCreate Flowchart using Drag and Drop via JavaScript
The Flowy Library gives software developers the capability to create a new flowchart inside their JavaScript apps. The library has included support for the creation of a responsive, professional flowchart using the drag the drop facility. First, you can need to create an element to hold the flowchart. After that, you need to create a predefined block that can be inserted into the flowchart by dragging and dropping it. You can easily make changes to like manage space b/t elements, displace a block, edit block, remove the unwanted blocks, and more.
Create Flowchart via Free JavaScript Library
// Initialize the flowchart on the canvas div
const canvas = document.getElementById('canvas');
flowy(canvas);
// Create some nodes and connect them
const node1 = flowy.add_node('Start', 'node-1');
const node2 = flowy.add_node('Process', 'node-2');
flowy.connect(node1, node2);
// Add some properties to nodes
flowy.set_property(node1, 'color', 'blue');
flowy.set_property(node2, 'text', 'Hello World');
// Serialize and log the flowchart
document.getElementById('serialize').addEventListener('click', () => {
console.log(flowy.serialize());
});
// Load the serialized flowchart
document.getElementById('load').addEventListener('click', () => {
const json = prompt('Enter JSON:');
flowy.load(json);
});
Adding & Managing Node via JavaScript
The Open source Flowy Library has included support for adding new nodes programmatically inside JavaScript applications. The library allows software programmers to first design the block and then after that, you can easily export the design file and save it in the supported file format. It also gives software developers the power to import the existing block, make changes to it and save it back to the location of their choice with just a couple of lines of code. The flowy team is also working on the dynamic generation of the diagram and soon it will be part of it.
How to Add New Node to a Flowchart using JavaScript Library?
// create a new instance of the Flowy library
const canvas = document.getElementById("canvas");
const flowy = new Flowy(canvas);
// add a new node to the canvas
const node = flowy.addNode({
text: "New Node",
x: 100,
y: 100,
draggable: true,
resizable: true,
deletable: true,
});
Import Flowchart’s Data via JavaScript
The Open source Flowy Library gives software developers the capability to import the flowchart’s data inside their own applications. The library has included support for importing entire flowcharts with ease. When using this method, please make sure that the input is absolutely trusted, it not so this method can bring susceptibility into your system. It also allows getting the flowchart data as an object as well as JSON string.
How to Import Flowchart's Data using JavaScript API?
const canvas = document.getElementById('canvas');
const flowy = new Flowy(canvas);
const data = {
nodes: [
{ id: "node1", content: "Start", x: 100, y: 100 },
{ id: "node2", content: "Step 1", x: 250, y: 100 },
{ id: "node3", content: "Step 2", x: 250, y: 200 },
{ id: "node4", content: "End", x: 400, y: 150 }
],
edges: [
{ source: "node1", target: "node2" },
{ source: "node2", target: "node3" },
{ source: "node3", target: "node4" }
]
};
flowy.load(data);