1. Products
  2.   Diagram
  3.   JavaScript
  4.   Flowy
 
  

JavaScript Library to Create & Edit Flowcharts in Web Apps

Open Source JavaScript API to Create Web Apps that allows Generating and Managing Awesome Flowcharts, Adding New Node to a Flowchart, Import Flowchart’s Data with ease.

What is Flowy Library?

Flowy is an excellent tool for software developers. It helps you build JavaScript web applications for making and handling flowcharts effortlessly. Flowy.js stands out as a user-friendly flowchart creator that can seamlessly work with other libraries. With this library, developers can craft automation software, mind mapping utilities, organizational charts, family trees, and various other applications. What’s great is that the Flowy library is open source and operates under the MIT license, allowing you to use it freely.

The Flowy library is fantastic for showcasing flowcharts effortlessly. It offers a user-friendly drag & drop editor with plenty of customization choices, gesture event listeners, and more cool features. Some of these include automatic snapping, scrolling, block rearrangement, block selection and removal, block centering, file importing, mobile compatibility, creating your own blocks easily, and conditional snapping.

Previous Next

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 flowy

Clone Flowy via GIT Repository

  git clone https://github.com/alyssaxuu/flowy.gitt

Create 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.

How to 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);
 English