What is a BPMN (editor) and how to develop one using JointJS+?

BPMN, or Business Process Model and Notation, is a standardized graphical notation used for modeling and documenting business processes. It provides a visual representation of workflows, enabling organizations to analyze and improve processes effectively. By using BPMN diagrams, businesses gain insights into their operations, identify bottlenecks, streamline processes, and enhance communication across teams and stakeholders.

BPMN offers a common language and framework for process modeling, ensuring consistency and standardization. It facilitates collaboration on process improvements and can be integrated with BPM software for process automation.

Developing a BPMN editor using JointJS+ is advantageous for frontend developers as it offers a wide array of plugins and BPMN shapes. With an extensive plugin ecosystem, JointJS+ provides pre-built components and customization options made for creating BPMN diagrams. These plugins include essential functionalities like task shapes, events, and more, enabling developers to efficiently implement complex workflows. By leveraging JointJS+'s plugin ecosystem, frontend developers can save time and enhance productivity, resulting in comprehensive and visually appealing BPMN editors.

The following plugins played a crucial role in developing this demo application:

• BPMN shapes - provides a collection of predefined shapes specific to the BPMN (Business Process Model and Notation) standard
• BPMN2 shapes - offers an extended set of BPMN shapes, including task types, gateways, events, and more, adhering to the BPMN 2.0 specification
• GridLayout - enables the automatic arrangement of shapes in a grid-like layout, simplifying the organization and alignment of elements in a diagram
• PaperScroller - provides a scrollable container for the paper (drawing area), allowing users to navigate large diagrams efficiently
• CommandManager - manages the execution and undo/redo functionality for user actions, ensuring precise control over the editing history
• Keyboard - enables keyboard interactions and shortcuts for convenient navigation and editing within the diagram
• Selection - facilitates the selection of shapes and elements on the paper, enabling users to perform operations on the selected items
• Stencil - offers a set of predefined shapes and symbols that users can drag and drop onto the paper to build their diagrams
• Toolbar - presents a customizable toolbar with various tools and actions for easy access and quick interaction with the diagram elements
• Tooltip - displays informative tooltips when hovering over shapes or elements, providing additional context and details
• Inspector - provides a panel or interface to inspect and modify the properties and attributes of selected shapes or elements
• FreeTransform - enables the transformation and manipulation of shapes, allowing users to resize, rotate, and reshape elements freely
• Halo - presents a halo or bounding box around selected shapes, offering handles for easy resizing and editing
• SwimlaneBoundary - defines boundaries and sections within a swimlane diagram, separating and organizing different parts of the process
• SwimlaneTransform - facilitates the transformation and repositioning of swimlane elements, enabling users to modify the structure and layout
• Print - offers printing capabilities, allowing users to generate physical copies or PDF versions of their diagrams for documentation or sharing purposes

The BPMN 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 interested in designing BPMN diagrams using TypeScript or popular JavaScript frameworks like React, Vue, Angular, Svelte, or Lightning? JointJS+ is framework-agnostic, so integrating it is a breeze. The BPMN demo application, along with other JointJS and JointJS+ demos, is designed to be flexible and effortlessly integrated with these frameworks, providing you with a harmonious and smooth development experience.

To facilitate your journey, we have prepared examples for each JavaScript framework that demonstrate the seamless integration of the Stencil plugin from JointJS+. These examples serve as a helpful guide on how to initialize and utilize the Stencil plugin within your chosen framework. By following these examples, you'll gain a deeper understanding of how to incorporate the Stencil plugin's robust functionality into your applications, enabling you to create captivating and interactive visual representations effortlessly.

TypeScript BPMN

If you're passionate about TypeScript, you'll be thrilled to discover that JointJS and JointJS+ offer comprehensive type definitions, elevating your development process. While our BPMN demo currently uses JavaScript, transitioning it to TypeScript will give you enhanced type safety and code maintainability, resulting in a smooth and efficient BPMN development experience.

React BPMN

In the realm of React development, JointJS+ seamlessly merges with the famous component-based architecture and efficient rendering capabilities. As React gives developers a lot of power with its composability, integrating JointJS+ for designing BPMN diagrams becomes a straightforward task. Through the creation of reusable BPMN components that dynamically respond to data changes and user interactions, React enthusiasts can craft immersive and seamless user experiences. To illustrate this integration, below you'll find an example of initializing Stencil in a React application.

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

export const BPMNStencil = ({ paper }) => {
  const stencilEl = useRef(null);
  const stencil = useRef();

  useEffect(() => {
    stencil.current = new ui.Stencil({
      paper: paper.current,
      width: 100,
      height: 200,
    });

    stencilEl.current.appendChild(stencil.current.render().el);

    stencil.current.load([
      new shapes.bpmn.Activity({ size: { width: 100, height: 100 }})
    ]);

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

  return (
    <div id="stencil-container" ref={stencilEl}></div>
  );
}

🔗 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 BPMN

Vue, with its intuitive and reactive nature, works flawlessly with JointJS+ when it comes to building BPMN diagrams. Taking advantage of Vue's declarative syntax and component-based approach, developers can smoothly incorporate BPMN into Vue applications, unlocking the potential for highly interactive and responsive interfaces. JointJS+ together with Vue enable developers to effortlessly visualize even more complex processes. As mentioned earlier, take a look at the example below showcasing the initialization of Stencil in a Vue application.

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

const props = defineProps(['paper']);
const stencilEl = ref(null);
const stencil = new ui.Stencil({
   paper: props.paper,
   width: 100,
   height: 200,
});

onMounted(() => {
   stencilEl.value.appendChild(stencil.render().el);

   stencil.load([
       new shapes.bpmn.Activity({ size: { width: 100, height: 100 } })
   ]);
});

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

< template >
   <div ref="stencilEl" > </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 BPMN

Angular, well known for its extensive toolset, is a great option for implementing JointJS+ for BPMN editor development. The seamless fusion of JointJS+ with Angular's powerful data binding and dependency injection features enables developers to effortlessly create dynamic and data-driven BPMN applications. This integration ensures accurate representation of complex workflows, it takes care of enhanced user experiences and efficient development practices. To provide further clarity, consider the example below illustrating the initialization of Stencil in an Angular application.

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

@Component({
   selector: 'bpmn-stencil',
   template: `
       <div #stencilEl></div>
   `
})

export class BPMNStencil implements OnInit, AfterViewInit, OnDestroy {
   @Input() paper;

   @ViewChild('stencilEl') stencilEl;

   private stencil;

   public ngOnInit() {
       const stencil = this.stencil = new ui.Stencil({
           paper: this.paper,
           width: 100,
           height: 200,
       });

       stencil.render();

       stencil.load([
           new shapes.bpmn.Activity({ size: { width: 100, height: 100 } })
       ]);
   }

   public ngAfterViewInit() {
       const { stencil, stencilEl } = this;
       stencilEl.nativeElement.appendChild(stencil.el);
   }

   public ngOnDestroy() {
       const { stencil } = this;
       stencil.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 BPMN

Svelte, well known for its lightweight and reactive nature, seamlessly intertwines with JointJS+ to deliver exceptional BPMN experiences. By using Svelte's compiler-based approach, developers can generate optimized code for high-performance and responsive BPMN applications. The straightforward integration of JointJS+ with Svelte empowers developers to effortlessly create visually captivating and interactive BPMN solutions. As mentioned earlier, below you'll find an example demonstrating the initialization of Stencil in a Svelte application, showcasing a seamless approach to integrating Stencil into your Svelte projects.

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

  export let paper;
  let stencilEl;
  let stencil;

  onMount(() => {
    stencil = new ui.Stencil({
      paper,
      width: 100,
      height: 200,
    });

    stencilEl.appendChild(stencil.render().el);

    stencil.load([new shapes.bpmn.Activity({ size: { width: 100, height: 100 } })]);
  });

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

<div bind:this={stencilEl} />

Salesforce Lightning BPMN

The Salesforce Lightning framework is an exceptional choice for developers exploring JavaScript frameworks. With its fast performance and extensive features, Lightning seamlessly integrates with JointJS+ to unlock exciting possibilities in BPMN diagram design. By combining the speed and capabilities of Lightning with the interactive and responsive nature of JointJS+, developers can effortlessly create efficient and visually stunning BPMN applications. JointJS+ and the extensible features of the Lightning framework elevate the process of building BPMN diagrams to a whole new level.

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