What is and how to build a Sequence Diagram using JointJS?

Sequence diagrams are interaction diagrams designed to visualize how operations are executed. They are time-focused using vertical lines that act as timelines carrying specific actions and messages. Messages are transmitted between vertical lines and represent the interaction between objects (which are in cooperation).

To understand how sequence diagrams work, let's add a step-by-step description of our demo above. The operation starts with an HTTP request sent from the browser to the web server. The web server, which requires some additional information, sends an SQL command to the database server and waits for a response. The database server sends the requested data back to the web server, which may eventually send an HTTP response back to the browser.

A visual representation of such an operation allows us to better understand the process, its participants, and the messages that are transmitted between them.

There are several key components of sequence diagrams that are worth mentioning at this point. The JointJS library allows users to create custom shapes for their needs. For example, in the case of a sequence diagram we want to create relevant shapes for such a diagram. We'll go over the basic ones, but if you'd like to dig deeper into this topic, you can learn more.

• Actor: a role that interacts with the system.
• Lifeline: a representation of an object involved in the process.
• Activations: a box placed on the lifeline to indicate that an object is active (in interaction between objects).‍
• Message: a message – synchronous or asynchronous – is a communication between two objects.

Integration

JointJS is a framework-agnostic library which means that you can integrate it with any of the existing JavaScript frameworks or workflows. We also have a strong support for TypeScript apps due to our extensive type declaration and robust library structure. We also provide extensive tutorials for React, Vue, Angular or Svelte framework integrations for our commercial JointJS+ library. The framework-agnostic nature of JointJS allows all its features in any context.

TypeScript Sequence Diagram

If you are using TypeScript during development you can easily integrate JointJS using provided type definitions. In the case of a sequence diagram, provided types support inheritance in the matter of shape declarations, allowing to create a deep hierarchy of shapes and other diagram objects (links etc.). You can create JointJS objects like Paper and Graph in a fast and type-secure way. You can find more information about ways to create custom shapes and links in this tutorial.

React Sequence Diagram

JointJS allows seamless integration with different frameworks including React. Using powerful React components you can easily integrate JointJS features into your app. You can easily specify Paper and its properties during your React component declaration. JointJS allows implying movement restrictions on elements so you can give your users better experience. You can see how you can use JointJS in your React app in the following snippet:

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

const SequenceDiagramApp = () => {
    const paperContainer = useRef(null);
    //...
    useEffect(() => {
        const paperWidth = 800;
        const paperHeight = 600;

        const graph = new dia.Graph();
        const paper = new dia.Paper({
            graph: graph,
            width: paperWidth,
            height: paperHeight,
            //…
            restrictTranslate: function(elementView) {
                const element = elementView.model;
                const padding = (element.isEmbedded()) ? 20 : 10;
                return {
                    x: padding,
                    y: element.getBBox().y,
                    width: paperWidth - 2 * padding,
                    height: 0
                };
            },
        });

        //...
        return () => {
            paper.remove();
        };
    }, []);
    //...
    return (
        <div className="paperContainer" ref={paperContainer}/>
    );
}

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

Vue Sequence Diagram

The popular Vue framework allows easy integrations with JavaScript libraries such as JointJS. Framework-agnostic approach of JointJS allows full utilization of View string sides such as declarative syntax and component-based architecture. You can fully embrace possibilities at creating powerful diagrams like a sequence diagram. In order to setup JointJS diagram you can use extensive properties of a Paper object:

-- CODE language-js --
<template>
    <div ref="paperContainer"></div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { dia, ui } from '@clientio/rappid';

@Options({})
export default class SankeyDiagramApp extends Vue {
    declare public $refs: {
        paperContainer: HTMLDivElement;
    }
    private graph: dia.Graph;
private paper: dia.Paper;

    //...
    public created(): void {
        const paperWidth = 800;
        const paperHeight = 600;

        const graph = this.graph = new dia.Graph();

        const paper = this.paper = new dia.Paper({
            graph: graph,
            width: paperWidth,
            height: paperHeight,
            //…
            restrictTranslate: function(elementView) {
                const element = elementView.model;
                const padding = (element.isEmbedded()) ? 20 : 10;
                return {
                    x: padding,
                    y: element.getBBox().y,
                    width: paperWidth - 2 * padding,
                    height: 0
                };
            },
        });
        //...
    }

    public mounted(): void {
        const { paper, $refs : { paperContainer } } = this;
        paperContainer.appendChild(paper.el);
    }
}
</script>

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

Angular Sequence Diagram

Known for its powerful component-based architecture, Angular can be easily integrated with the JointJS library. You can incorporate JointJS architecture pieces into your Angular components in an easy and flexible manner. You can declare Paper properties inside your components as you can see in the snippet below:

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

@Component({
    selector: 'app-root',
    templateUrl: './sequence-diagram.component.html',
    styleUrls: ['./sequence-diagram.component.scss']
})
export class SequenceDiagramApp implements OnInit, AfterViewInit {
    @ViewChild('paperContainer') paperContainer: ElementRef;
    private graph: dia.Graph;
    private paper: dia.Paper;
    //...
    ngOnInit() {
        const paperWidth = 800;
        const paperHeight = 600;
        const graph = this.graph = new dia.Graph();

        const paper = this.paper = new dia.Paper({
            graph: graph,
            width: paperWidth,
            height: paperHeight,
            //…
            restrictTranslate: function(elementView) {
                const element = elementView.model;
                const padding = (element.isEmbedded()) ? 20 : 10;
                return {
                    x: padding,
                    y: element.getBBox().y,
                    width: paperWidth - 2 * padding,
                    height: 0
                };
            },
        });

        //...
    }

    ngAfterViewInit(): void {
        const { paper, paperContainer } = this;
        paperContainer.nativeElement.appendChild(paper.el)
    }
    //...
}

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

Svelte Sequence Diagram

JointJS allows smooth integration with Svelte due to the framework-agnostic approach of our library. With its compiler-based approach, Svelte allows developers to efficiently generate optimized code, producing highly flexible and handy diagrams like a sequence diagram presented here. You can easily specify properties needed to create fascinating diagrams to ensure great experience for your users:

-- CODE language-js --
<script lang="ts">
    import { onMount } from 'svelte';
    import { dia, ui } from '@clientio/rappid';
    import '../node_modules/@clientio/rappid/rappid.css';

    let ref;

    onMount(() => {
        const graph = new dia.Graph();
        const paper = new dia.Paper({
            graph: graph,
            width: paperWidth,
            height: paperHeight,
            //…
            restrictTranslate: function(elementView) {
                const element = elementView.model;
                const padding = (element.isEmbedded()) ? 20 : 10;
                return {
                    x: padding,
                    y: element.getBBox().y,
                    width: paperWidth - 2 * padding,
                    height: 0
                };
            },
        });

        ref.appendChild(paper.el)
    });
</script>

<main bind:this={ref} class="sequence-diagram-app"></main>

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

Salesforce Lightning Tree Graph

Due to JointJS’ agnostic nature, it provides great integration possibilities  with the Salesforce Lightning framework. Using JointJS you can swiftly build a sequence diagram in your Salesforce Lightning environment.

🔗 Interested in a step-by-step guide on how to integrate our paid JointJS+ library 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 demo apps that can serve as a boilerplate and radically reduce your development time. Visit our Github profile to get the source code of the sequence diagram demo and learn from other diagramming enthusiasts.