UML Sequence Diagram Model in EJ2 JavaScript Diagram Control

27 Jun 202524 minutes to read

A UML sequence diagram is an interaction diagram that demonstrates how objects interact with each other and the order of these interactions. The Syncfusion® diagram control provides comprehensive support for creating and visualizing UML sequence diagrams through the UmlSequenceDiagramModel. To enable this functionality, assign the UmlSequenceDiagramModel to the model property of the diagram control.

UML Sequence Diagram Elements

A sequence diagram includes several key elements such as participants, messages, activation boxes, and fragments. The sections below demonstrate how to define and configure these components using the diagram control.

Participants

UmlSequenceParticipantModel in a sequence diagram represent the entities that interact with each other, appearing at the top of the diagram with lifelines extending vertically downward.

UmlSequenceParticipantModel Properties

Property Type Description
id string | number A unique identifier for the participant
content string The display text for the participant
isActor boolean Specifies whether the participant is displayed as an actor (true) or an object (false)
showDestructionMarker boolean Indicates whether a destruction marker (X) is shown at the end of the lifeline
activationBoxes UmlSequenceActivationBoxModel[] A collection of activation boxes associated with the participant

The following code example illustrates how to create participants:

// Define the model for the UML Sequence Diagram
var umlSequenceDiagramModel = {
  // Define the participants involved in the UML Sequence Diagram
  participants: [
    {
      id: "User", // Unique identifier for the participant
      content: "User", // Label or name of the participant
      isActor: true, // Indicates that the participant is an actor
    },
    {
      id: "System", // Unique identifier for the participant
      content: "System", // Label or name of the participant
      isActor: false,
      showDestructionMarker: true, // Flag to show destruction marker at the end of the lifeline
    }
  ],
};

var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    // Specifies the model for the diagram
    model: umlSequenceDiagramModel,
    snapSettings: {constraints: ej.diagrams.SnapConstraints.None}
  },
  '#element'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">

    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Messages

UmlSequenceMessageModel represents communication between participants and are displayed as arrows connecting lifelines.

Types of Messages

Message Type Description Example
Synchronous The sender waits for a response Synchronous Message
Asynchronous The sender continues without waiting Asynchronous Message
Reply A response to a previous message Reply Message
Create Creates a new participant Create Message
Delete Terminates a participant Delete Message
Self A message from a participant to itself Self Message

UmlSequenceMessageModel Properties

Property Type Description
id string | number A unique identifier for the message
content string The display text for the message
fromParticipantID string | number ID of the participant sending the message
toParticipantID string | number ID of the participant receiving the message
type UmlSequenceMessageType Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self)

The following code example illustrates how to create messages:

// Define the model for the UML Sequence Diagram
var umlSequenceDiagramModel = {
  // Defines the participants involved in the sequence diagram
  participants: [
    { id: "User", content: "User", isActor: true, }, // User as an actor
    { id: "System", content: "System", isActor: false, showDestructionMarker: true, }, // System participant
    { id: "Logger", content: "Logger", isActor: false, showDestructionMarker: true, }, // Logger participant
    { id: "SessionManager", content: "SessionManager", isActor: false, } // SessionManager participant
  ],
  // Define messages exchanged between participants
  messages: [
    // User sends login request to System via Synchronous message
    {
      id: "MSG1", content: "Login Request", fromParticipantID: "User", toParticipantID: "System",
      type: ej.diagrams.UmlSequenceMessageType.Synchronous
    },
    // System replies to User with login response via Reply message
    {
      id: "MSG2", content: "Login Response", fromParticipantID: "System", toParticipantID: "User",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    },
    // System sends log event to Logger via Asynchronous message
    {
      id: "MSG3", content: "Log Event", fromParticipantID: "System", toParticipantID: "Logger",
      type: ej.diagrams.UmlSequenceMessageType.Asynchronous
    },
    // System requests SessionManager to create session via Create message
    {
      id: "MSG4", content: "Create Session", fromParticipantID: "System", toParticipantID: "SessionManager",
      type: ej.diagrams.UmlSequenceMessageType.Create
    },
    // System requests SessionManager to delete session via Delete message
    {
      id: "MSG5", content: "Delete Session", fromParticipantID: "System", toParticipantID: "SessionManager",
      type: ej.diagrams.UmlSequenceMessageType.Delete
    },
    // System validates inputs itself via Self message
    {
      id: "MSG6", content: "Validate Inputs", fromParticipantID: "System", toParticipantID: "System",
      type: ej.diagrams.UmlSequenceMessageType.Self
    }
  ],
};
// Initializes diagram control
var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '700px',
    // Specifies the model for the diagram
    model: umlSequenceDiagramModel,
    snapSettings: {constraints: ej.diagrams.SnapConstraints.None}
  },
  '#element'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">

    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Activation Boxes

UmlSequenceActivationBoxModel represents periods when a participant is active and processing a message. They appear as thin rectangles on participant lifelines.

UmlSequenceActivationBoxModel Properties

Property Type Description
id string | number A unique identifier for the activation box
startMessageID string | number ID of the message that initiates the activation
endMessageID string | number ID of the message that terminates the activation

The following code example illustrates how to create activation boxes:

// Define the UML Sequence Diagram model with participants and activation boxes
var model = {
  // Defines the participants involved in the sequence diagram
  participants: [
    {
      id: "User",
      content: "User",
      isActor: true,
    },
    {
      id: "System",
      content: "System",
      isActor: false,
      showDestructionMarker: true,
      // Activation boxes for System
      activationBoxes: [
        {
          id: "ActSystem", // Unique identifier for the activation box
          startMessageID: "MSG1", // Message ID that marks the start of the activation
          endMessageID: "MSG2" // Message ID that marks the end of the activation
        }
      ]
    }
  ],
  // Define messages exchanged between participants
  messages: [
    {
      id: "MSG1", content: "Login Request", fromParticipantID: "User", toParticipantID: "System",
      type: ej.diagrams.UmlSequenceMessageType.Synchronous
    },
    {
      id: "MSG2", content: "Login Response", fromParticipantID: "System", toParticipantID: "User",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    }
  ],
};
// Initializes diagram control
var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    // Specifies the model for the diagram
    model: model,
    snapSettings: {constraints: ej.diagrams.SnapConstraints.None}
  },
  '#element'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">

    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Fragments

UmlSequenceFragmentModel groups a set of messages based on specific conditions in a sequence diagram. They are displayed as rectangular enclosures that visually separate conditional or looping interactions.

Types of Fragments

The UmlSequenceFragmentType enum defines the following fragment types:

Fragment Type Description Example
Optional Represents a sequence that is executed only if a specified condition is met; otherwise, it is skipped. Optional Fragment
Alternative Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. Alternative Fragment
Loop Represents a repeating sequence of interactions that continues based on a loop condition. Loop Fragment

UmlSequenceFragmentModel Properties

Property Type Description
id string | number A unique identifier for the fragment
type UmlSequenceFragmentType Type of the fragment (Optional, Loop, Alternative)
conditions UmlSequenceFragmentConditionModel[] Collection of conditions for the fragment

UmlSequenceFragmentConditionModel Properties

Property Type Description
content string Text describing the condition or parameter
messageIds (string | number)[] Collection of message IDs included in this condition section
fragmentIds string[] Collection of nested fragments ids (for complex structures)

The following code example illustrates how to create fragments:

// Define the UML Sequence Diagram model
var model = {
  // Define the space between participants
  spaceBetweenParticipants: 300,
  participants: [
    { id: "Customer", content: "Customer", isActor: true },
    { id: "OrderSystem", content: "Order System", isActor: false },
    { id: "PaymentGateway", content: "Payment Gateway", isActor: false }
  ],
  // Define the messages passed between participants
  messages: [
    {
      id: "MSG1", content: "Place Order", fromParticipantID: "Customer", toParticipantID: "OrderSystem",
      type: ej.diagrams.UmlSequenceMessageType.Synchronous
    },
    {
      id: "MSG2", content: "Check Stock Availability", fromParticipantID: "OrderSystem", toParticipantID: "OrderSystem",
      type: ej.diagrams.UmlSequenceMessageType.Synchronous
    },
    {
      id: "MSG3", content: "Stock Available", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    },
    {
      id: "MSG4", content: "Process Payment", fromParticipantID: "OrderSystem", toParticipantID: "PaymentGateway",
      type: ej.diagrams.UmlSequenceMessageType.Synchronous
    },
    {
      id: "MSG5", content: "Payment Successful", fromParticipantID: "PaymentGateway", toParticipantID: "OrderSystem",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    },
    {
      id: "MSG6", content: "Order Confirmed and Shipped", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    },
    {
      id: "MSG7", content: "Payment Failed", fromParticipantID: "PaymentGateway", toParticipantID: "OrderSystem",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    },
    {
      id: "MSG8", content: "Retry Payment", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
      type: ej.diagrams.UmlSequenceMessageType.Reply
    }
  ],
  // Define fragments for conditional visual representation
  fragments: [
    // Child Fragment 1 (Optional)
    {
      id: 1,
      type: ej.diagrams.UmlSequenceFragmentType.Optional,
      conditions: [
        {
          content: "if item is in stock",
          messageIds: ["MSG4"]
        }
      ]
    },
    // Child Fragment 2 (Alternative)
    {
      id: 2,
      type: ej.diagrams.UmlSequenceFragmentType.Alternative,
      conditions: [
        {
          content: "if payment is successful",
          messageIds: ["MSG5", "MSG6"]
        },
        {
          content: "if payment fails",
          messageIds: ["MSG7", "MSG8"]
        }
      ]
    },
    // Parent Fragment (Loop)
    {
      id: 3,
      type: ej.diagrams.UmlSequenceFragmentType.Loop,
      conditions: [
        {
          content: "while attempts less than 3",
          // Use IDs of child fragments for nested conditions
          fragmentIds: ['1', '2'],
        }
      ]
    },
  ],
};

// Initializes diagram control
var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    // Specifies the model for the diagram
    model: model,
    snapSettings: {constraints: ej.diagrams.SnapConstraints.None}
  },
  '#element'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">

    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fabric.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Customizing Participant Spacing in Sequence Diagram

The spaceBetweenParticipants property in UmlSequenceDiagramModel controls the horizontal spacing between participants. The default value is 100, and it can be adjusted based on your layout requirements.

// Define the UML Sequence Diagram model
const model = {
  // Define the space between participants
  spaceBetweenParticipants: 300,
  participants: participants,    // collection of participants in the sequence diagram  
  messages: messages,            // collection of messages exchanged between participants  
  fragments: fragments           // collection of sequence diagram fragments (opt, alt, loop) 
}