Create interactive JavaScript Flow Chart in 3 simple steps.
Flowcharts are powerful tools for visualizing processes, algorithms, and workflows. They simplify complex systems and make code easier to understand. Adding interactive JavaScript flow charts to your web applications is simpler than you think. In this post, we'll explore creating JavaScript flow charts using FlowChart JS.
What is FlowChart JS?
FlowChart JS is a lightweight JavaScript library that provides a straightforward way to create and display flowcharts in your web projects. It's known for its ease of use and customization options, making it a great choice whether you're building a simple diagram or something more intricate.
Here are the 3 simple steps for creating a Flow Chart:
Include the online link to your project (or an empty HTML file):
<script src="https://balkan.app/js/FlowChart.js"></script>
Add style and a div element to your webpage where the JavaScript flow chart will be rendered:
<style>
html, body, #chart{
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id="chart"></div>
Add script tags to your webpage and include the following code to initialize the chart:
<script>
let chart = new FlowChart('#chart');
chart.onChanged(function(){
var data = chart.json();
//post data to server
});
chart.load({
nodes: [
{ id: 1, templateId: 'process', x: 400, y: 150, fill: "#FFCA28" },
{ id: 2, templateId: 'decision', x: 400, y: 350, fill: "#F57C00" },
{ id: 3, templateId: 'process', x: 700, y: 350 }
],
links: [
{ from: 1, to: 2 },
{ from: 2, to: 3 }
]
}
);
</script>
Here is the result:
My First Flow Chart
For more info and customization refer to our doc pages: Flow Chart JS How to