UML Sequence Diagram in Angular Diagram Component

24 Aug 202524 minutes to read

A UML sequence diagram is a type of interaction diagram that visualizes how objects communicate with each other over time. These diagrams show the sequence of messages exchanged between participants, making them essential for understanding system interactions, API workflows, and process flows.

The Syncfusion® Angular Diagram component provides comprehensive support for creating and visualizing UML sequence diagrams through the UmlSequenceDiagramModel. This specialized model enables the creation of sequence diagrams with proper UML notation and automated layout capabilities.

Prerequisites

Before creating UML sequence diagrams, ensure that:

  • Angular development environment is set up
  • Syncfusion Angular Diagram package is installed and imported
  • Basic familiarity with UML sequence diagram concepts

Key Concepts

Lifelines

Lifelines are vertical dashed lines that represent the existence of a participant over time. Each participant has a corresponding lifeline that extends downward from the participant box.

Sequence Flow

Messages flow horizontally between lifelines in chronological order from top to bottom, representing the temporal sequence of interactions.

UML Sequence Diagram Elements

A sequence diagram comprises several essential elements that work together to represent system interactions. The following sections demonstrate how to define and configure these components.

Participants

UmlSequenceParticipantModel represents the entities that participate in the interaction sequence. Participants appear as rectangular boxes at the top of the diagram, with lifelines extending vertically downward to show their existence throughout the interaction timeline.

Participant Types

Participants can be displayed in two forms:

  • Actors: Human users or external systems (displayed with stick figure notation)
  • Objects: System components, classes, or services (displayed as rectangular boxes)

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

Creating Participants

The following code example demonstrates how to create different types of participants:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
import { UmlSequenceDiagramModel, SnapSettingsModel, SnapConstraints } from "@syncfusion/ej2-diagrams";

@Component({
  imports: [DiagramModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="600px" (created)="diagramCreated()" [snapSettings]="snapSettings">
             </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram', { static: false })
  public diagram?: DiagramComponent;
  public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
  diagramCreated() {
    // Check whether the diagram component is initialized
    if (this.diagram) {
      // Define the model for the UML Sequence Diagram
      const umlSequenceDiagramModel: 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,
            // Flag to show destruction marker at the end of the lifeline
            showDestructionMarker: true,
          }
        ],
      };
      // Specifies the model for the diagram
      this.diagram.model = umlSequenceDiagramModel;
      this.diagram.updateFromModel();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Messages

UmlSequenceMessageModel represents communication between participants. Messages are displayed as arrows connecting lifelines and indicate the flow of information or requests between system components.

Message Types and Usage

Different message types serve specific purposes in sequence diagrams:

Message Type Description When to Use Example
Synchronous The sender waits for a response before continuing Method calls, API requests requiring immediate response Synchronous Message
Asynchronous The sender continues without waiting for a response Event notifications, fire-and-forget operations Asynchronous Message
Reply A response message to a previous synchronous call Return values, acknowledgments Reply Message
Create Creates a new participant instance during execution Object instantiation, service initialization Create Message
Delete Terminates a participant and ends its lifeline Object destruction, service shutdown Delete Message
Self A message from a participant to itself Internal processing, recursive calls 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)

Creating Messages

The following example shows how to create different types of messages between participants:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
import { UmlSequenceDiagramModel, UmlSequenceMessageType, SnapSettingsModel, SnapConstraints } from "@syncfusion/ej2-diagrams";

@Component({
  imports: [DiagramModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="700px" (created)="diagramCreated()" [snapSettings]="snapSettings">
             </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram', { static: false })
  public diagram?: DiagramComponent;
  public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
  diagramCreated() {
    // Check whether the diagram component is initialized
    if (this.diagram) {
      // Define the model for the UML Sequence Diagram
      // Define the UML Sequence Diagram model with participants and messages
      const umlSequenceDiagramModel: 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: UmlSequenceMessageType.Synchronous
          },
          // System replies to User with login response via Reply message
          {
            id: "MSG2", content: "Login Response", fromParticipantID: "System", toParticipantID: "User",
            type: UmlSequenceMessageType.Reply
          },
          // System sends log event to Logger via Asynchronous message
          {
            id: "MSG3", content: "Log Event", fromParticipantID: "System", toParticipantID: "Logger",
            type: UmlSequenceMessageType.Asynchronous
          },
          // System requests SessionManager to create session via Create message
          {
            id: "MSG4", content: "Create Session", fromParticipantID: "System", toParticipantID: "SessionManager",
            type: UmlSequenceMessageType.Create
          },
          // System requests SessionManager to delete session via Delete message
          {
            id: "MSG5", content: "Delete Session", fromParticipantID: "System", toParticipantID: "SessionManager",
            type: UmlSequenceMessageType.Delete
          },
          // System validates inputs itself via Self message
          {
            id: "MSG6", content: "Validate Inputs", fromParticipantID: "System", toParticipantID: "System",
            type: UmlSequenceMessageType.Self
          }
        ],
      };
      // Specifies the model for the diagram
      this.diagram.model = umlSequenceDiagramModel;
      this.diagram.updateFromModel();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Activation Boxes

UmlSequenceActivationBoxModel represents periods when a participant is actively processing or executing operations. Activation boxes appear as thin rectangles overlaid on participant lifelines, indicating the duration of active processing between specific messages.

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

Creating Activation Boxes

The following example demonstrates how to create activation boxes that span specific message sequences:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
import { UmlSequenceDiagramModel, UmlSequenceMessageType, SnapSettingsModel, SnapConstraints } from "@syncfusion/ej2-diagrams";

@Component({
  imports: [DiagramModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="600px" (created)="diagramCreated()" [snapSettings]="snapSettings">
             </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram', { static: false })
  public diagram?: DiagramComponent;
  public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
  diagramCreated() {
    // Check whether the diagram component is initialized
    if (this.diagram) {
      // Define the model for the UML Sequence Diagram
      // Define the UML Sequence Diagram model with participants and activation boxes
      const model: UmlSequenceDiagramModel = {
        // 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: UmlSequenceMessageType.Synchronous
          },
          {
            id: "MSG2", content: "Login Response", fromParticipantID: "System", toParticipantID: "User",
            type: UmlSequenceMessageType.Reply
          }
        ],
      };
      // Specifies the model for the diagram
      this.diagram.model = model;
      this.diagram.updateFromModel();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Fragments

UmlSequenceFragmentModel represents logical groupings of messages based on specific conditions or control structures. Fragments appear as rectangular enclosures that visually organize conditional logic, loops, and alternative execution paths within sequence diagrams.

Fragment Applications

Fragments are essential for modeling:

  • Conditional logic (if-then-else statements)
  • Iterative processes (loops and repetitions)
  • Optional operations that may or may not execute
  • Error handling and exception flows
  • Parallel processing scenarios

Fragment Types

The UmlSequenceFragmentType enum defines the following fragment types:

Fragment Type Description Use Cases Example
Optional Executes enclosed messages only if a specified condition is met Feature toggles, optional validations, conditional processing Optional Fragment
Alternative Provides multiple conditional paths where only one executes based on the condition Decision trees, error handling, branching logic Alternative Fragment
Loop Repeats the enclosed message sequence based on a loop condition Data processing iterations, retry mechanisms, batch operations 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)

Creating Fragments

The following example illustrates how to create fragments with different condition types:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
import { UmlSequenceDiagramModel, UmlSequenceMessageType, UmlSequenceFragmentType, SnapSettingsModel, SnapConstraints } from "@syncfusion/ej2-diagrams";

@Component({
  imports: [DiagramModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="700px" (created)="diagramCreated()" [snapSettings]="snapSettings">
             </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram', { static: false })
  public diagram?: DiagramComponent;
  public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
  diagramCreated() {
    // Check whether the diagram component is initialized
    if (this.diagram) {
      // Define the UML Sequence Diagram model
      const model: UmlSequenceDiagramModel = {
        // 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: UmlSequenceMessageType.Synchronous
          },
          {
            id: "MSG2", content: "Check Stock Availability", fromParticipantID: "OrderSystem", toParticipantID: "OrderSystem",
            type: UmlSequenceMessageType.Synchronous
          },
          {
            id: "MSG3", content: "Stock Available", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
            type: UmlSequenceMessageType.Reply
          },
          {
            id: "MSG4", content: "Process Payment", fromParticipantID: "OrderSystem", toParticipantID: "PaymentGateway",
            type: UmlSequenceMessageType.Synchronous
          },
          {
            id: "MSG5", content: "Payment Successful", fromParticipantID: "PaymentGateway", toParticipantID: "OrderSystem",
            type: UmlSequenceMessageType.Reply
          },
          {
            id: "MSG6", content: "Order Confirmed and Shipped", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
            type: UmlSequenceMessageType.Reply
          },
          {
            id: "MSG7", content: "Payment Failed", fromParticipantID: "PaymentGateway", toParticipantID: "OrderSystem",
            type: UmlSequenceMessageType.Reply
          },
          {
            id: "MSG8", content: "Retry Payment", fromParticipantID: "OrderSystem", toParticipantID: "Customer",
            type: UmlSequenceMessageType.Reply
          }
        ],
        // Define fragments for conditional visual representation
        fragments: [
          // Child Fragment 1 (Optional)
          {
            id: 1,
            type: UmlSequenceFragmentType.Optional,
            conditions: [
              {
                content: "if item is in stock",
                messageIds: ["MSG4"]
              }
            ]
          },
          // Child Fragment 2 (Alternative)
          {
            id: 2,
            type: UmlSequenceFragmentType.Alternative,
            conditions: [
              {
                content: "if payment is successful",
                messageIds: ["MSG5", "MSG6"]
              },
              {
                content: "if payment fails",
                messageIds: ["MSG7", "MSG8"]
              }
            ]
          },
          // Parent Fragment (Loop)
          {
            id: 3,
            type: UmlSequenceFragmentType.Loop,
            conditions: [
              {
                content: "while attempts less than 3",
                // Use IDs of child fragments for nested conditions
                fragmentIds: ['1', '2'],
              }
            ]
          },
        ],
      };
      // Specifies the model for the diagram
      this.diagram.model = model;
      this.diagram.updateFromModel();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customization Options

Adjusting Participant Spacing

The spaceBetweenParticipants property controls the horizontal spacing between participants in the sequence diagram. Adjust this value to accommodate longer message labels or improve diagram readability.

// Define the UML Sequence Diagram model with custom spacing
const model: UmlSequenceDiagramModel = {
  // Increase space between participants for better readability
  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) 
}