What is a flowchart and how to develop one using JointJS+?

A flowchart is a graphical representation of a process, algorithm, or system that uses various symbols and arrows to depict the sequence of steps and decision points. It serves as a visual tool for developers to analyze, design, and document the flow of logic within a program or system.

Flowcharts consist of different symbols that represent specific actions or components. These symbols include rectangles for process steps, diamonds for decision points, circles for connectors or starting/ending points, and arrows to indicate the flow of control. By connecting these symbols in a logical sequence, developers can create a visual representation of the program's control flow.

With the help of diagramming libraries such as JointJS+, front-end developers can create JavaScript flowcharts (or TypeScript flowcharts) programmatically, enhancing the efficiency and accuracy of the development process. JointJS+ provides a wide range of tools, features, and customization options to create interactive and dynamic flowcharts that can be integrated into web applications. In this demo application we have utilized LinkTools which allow us to change the connection point of the links very easily and Highlighters to change the visuals of currently selected cells.

The flowchart demo application above is written in plain JavaScript, but can be easily rewritten in TypeScript or integrated with a wide range of web application frameworks such as React, Angular, Vue, Svelte, or Lightning. To check its source code, start a free 30-day trial of JointJS+.

Integration

Are you enticed by the notion of crafting Flowcharts with React, Vue, Angular, Svelte, or Lightning? As mentioned earlier, the framework-agnostic JointJS+ seamlessly integrates with these popular web application frameworks, allowing you to use it in any framework you can think of.

The flowchart demo application, like all other JointJS and JointJS+ demo apps, has been designed with utmost flexibility, allowing for effortless integration with these frameworks. Although the task is simple, we have a dedicated tutorial for popular web application frameworks to give you an idea how to do it correctly to ensure flawless behavior.

We prepared examples for multiple JavaScript frameworks to demonstrate how to incorporate the most essential features of JointJS - Graph and Paper. In addition to that, how to utilize the PaperScroller plugin from JointJS+.

TypeScript flowcharts

Embrace the TypeScript love! JointJS and JointJS+ provide comprehensive type definitions that enhance the development experience. Although our Flowchart demo is built with plain JavaScript, migrating it to TypeScript is extremely easy and it guarantees you type safety and improved code maintainability, ensuring a seamless and enjoyable development process.

React flowcharts

Integrating JointJS+ into React applications for building flowcharts is remarkably straightforward, thanks to React's component-based architecture and efficient rendering. Developers can effortlessly construct reusable flowchart components that dynamically respond to data changes and user interactions, ensuring a smooth and engaging user experience. As mentioned earlier, below is an example of initializing Graph, Paper, and PaperScroller in a React application.

-- CODE language-js --
import { useEffect, useRef } from 'react';
import { dia, ui } from '@clientio/rappid';

export const FlowchartPaper = () => {
  const paperEl = useRef(null);
  const graph = useRef();
  const paper = useRef();
  const scroller = useRef();

  useEffect(() => {
    graph.current = new dia.Graph();
    paper.current = new dia.Paper({
        model: graph.current,
        frozen: true,
        async: true,
        width: 500,
        height: 500
    });
    scroller.current = new ui.PaperScroller({
        paper: paper.current
    });

    paperEl.current.appendChild(scroller.current.el);

    paper.current.unfreeze();

    return () => {
        scroller.current.remove();
        paper.current.remove();
    };
  }, []);

‍  return (
    <div id="paper" ref={paperEl}/>
  );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue flowcharts

Likewise, Vue, with its intuitive and reactive nature, integrates with JointJS+ very easily. By utilizing Vue's declarative syntax and component-based approach, developers can seamlessly incorporate flowcharts into Vue applications. This integration gives developers an option to build highly interactive and responsive interfaces, enabling users to visualize and comprehend complex processes effortlessly. As mentioned earlier, below you can see an example of initializing Graph, Paper, and PaperScroller in a Vue application.

-- CODE language-js --
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { dia, ui } from '@clientio/rappid';

const paperEl = ref(null);
const graph = new dia.Graph()
const paper = new dia.Paper({
  model: graph,
  frozen: true,
  async: true,
  width: 500,
  height: 500
});

const scroller = new ui.PaperScroller({
  paper
});

onMounted(() => {
  paperEl.value.appendChild(scroller.el);
  paper.unfreeze();
});

onBeforeUnmount(() => {
  scroller.remove();
  paper.remove();
});
</script>

<template>
   <div ref="paperEl"></div>
</template>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular flowcharts

Angular, with its comprehensive framework and extensive toolset, provides excellent integration possibilities for JointJS+. By leveraging Angular's robust data binding and dependency injection features, developers can effortlessly create dynamic and data-driven flowchart applications. The smooth integration ensures accurate representation of complex workflows, fostering improved user experiences and efficient development practices. Displayed below is an example of initializing Graph, Paper, and PaperScroller in an Angular application.

-- CODE language-js --
import { AfterViewInit, OnInit, ViewChild, Component, OnDestroy } from '@angular/core';
import { dia, ui } from '@clientio/rappid';

@Component({
   selector: 'flowchart-paper',
   template: `
       <div #paperEl></div>
    `
})

export class FlowchartPaper implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('paperEl') paperEl;

   private graph;
   private paper;
   private scroller;

   public ngOnInit() {
       const graph = this.graph = new dia.Graph();
       const paper = this.paper = new dia.Paper({
           model: graph,
           frozen: true,
           async: true,
           width: 500,
           height: 500
       });

       const scroller = this.scroller = new ui.PaperScroller({
           paper
       });

       scroller.render();
   }

   public ngAfterViewInit() {
       const { scroller, paper, paperEl } = this;
       paperEl.nativeElement.appendChild(scroller.el);
       paper.unfreeze();
   }

   public ngOnDestroy() {
       const { scroller, paper } = this;
       scroller.remove();
       paper.remove();
   }
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.

Svelte flowcharts

Additionally, JointJS+ integrates seamlessly with Svelte, which is famous for its lightweight and reactive nature. With its compiler-based approach, Svelte allows developers to efficiently generate optimized code, resulting in high-performance and responsive flowchart applications. The straightforward integration of JointJS+ with Svelte empowers developers to create visually captivating and interactive experiences with ease. Provided below is an example of initializing Graph, Paper, and PaperScroller in a Svelte application.

-- CODE language-js --
<script>
  import { onMount, onDestroy } from 'svelte';
  import { dia, ui } from '@clientio/rappid/rappid.js';

  let paperEl;
  let graph;
  let paper;
  let scroller;

  onMount(() => {
    graph = new dia.Graph();
    paper = new dia.Paper({
      model: graph,
      frozen: true,
      async: true,
      width: 500,
      height: 500,
    });

    scroller = new ui.PaperScroller({
      paper,
    });

    paperEl.appendChild(scroller.render().el);

    paper.unfreeze();
  });

  onDestroy(() => {
    scroller.remove();
    paper.remove();
  });
</script>

<main bind:this={paperEl} />

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning flowcharts

Developers targeting the Salesforce Lightning framework can easily integrate JointJS+ into their applications. Salesforce Lightning, a robust JavaScript framework recognized for its performance and versatility, synergizes effortlessly with JointJS+. By leveraging the component-based architecture and efficient rendering capabilities of JointJS+ and Salesforce Lightning, developers can seamlessly incorporate visually appealing and interactive flowchart applications. This integration ensures exceptional user experiences and seamless functionality, all within the powerful Salesforce platform.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use features and demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial to check their source code and develop your next application with ease and confidence.