UML Sequence Diagram Model in Diagram
19 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 contains several key elements, such as participants, messages, activation boxes, and fragments. Let’s discuss how to implement 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.
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("600px")
.SnapSettings(s => s.Constraints(SnapConstraints.None))
.Model((DiagramModel)ViewData["model"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
public ActionResult Model()
{
// Define the model correctly
var model = new DiagramUmlSequenceDiagram
{
// Define the participants involved in the UML Sequence Diagram
participants = new List<DiagramUmlSequenceParticipant>
{
new DiagramUmlSequenceParticipant
{
Id = "User", // Unique identifier for the participant
Content = "User", // Label or name of the participant
IsActor = true // Indicates that the participant is an actor
},
new DiagramUmlSequenceParticipant
{
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
}
}
};
ViewData.model = model;
return View();
}
}
}
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 |  |
| Asynchronous | The sender continues without waiting |  |
| Reply | A response to a previous message |  |
| Create | Creates a new participant |  |
| Delete | Terminates a participant |  |
| Self | A message from a participant to itself |  |
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:
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("700px")
.SnapSettings(s => s.Constraints(SnapConstraints.None))
.Model((DiagramModel)ViewData["model"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
public ActionResult Model()
{
// Create a new UML Sequence Diagram model
var model = new DiagramUmlSequenceDiagram
{
// Define the participants involved in the sequence diagram
Participants = new List<DiagramUmlSequenceParticipant>
{
new DiagramUmlSequenceParticipant
{
Id = "User",
Content = "User",
IsActor = true // Indicates this participant is an actor
},
new DiagramUmlSequenceParticipant
{
Id = "System",
Content = "System",
IsActor = false,
ShowDestructionMarker = true // Shows a destruction marker in the diagram
},
new DiagramUmlSequenceParticipant
{
Id = "Logger",
Content = "Logger",
IsActor = false,
ShowDestructionMarker = true
},
new DiagramUmlSequenceParticipant
{
Id = "SessionManager",
Content = "SessionManager",
IsActor = false
}
},
// Define the messages exchanged between these participants
Messages = new List<DiagramUmlSequenceMessage>
{
new DiagramUmlSequenceMessage
{
Id = "MSG1",
Content = "Login Request",
FromParticipantID = "User", // The sender of the message
ToParticipantID = "System", // The receiver of the message
Type = UmlSequenceMessageType.Synchronous // Message type indicating a synchronous operation
},
new DiagramUmlSequenceMessage
{
Id = "MSG2",
Content = "Login Response",
FromParticipantID = "System",
ToParticipantID = "User",
Type = UmlSequenceMessageType.Reply
},
new DiagramUmlSequenceMessage
{
Id = "MSG3",
Content = "Log Event",
FromParticipantID = "System",
ToParticipantID = "Logger",
Type = UmlSequenceMessageType.Asynchronous // Message type indicating an asynchronous operation
},
new DiagramUmlSequenceMessage
{
Id = "MSG4",
Content = "Create Session",
FromParticipantID = "System",
ToParticipantID = "SessionManager",
Type = UmlSequenceMessageType.Create // Message type indicating creation of a session
},
new DiagramUmlSequenceMessage
{
Id = "MSG5",
Content = "Delete Session",
FromParticipantID = "System",
ToParticipantID = "SessionManager",
Type = UmlSequenceMessageType.Delete // Message type indicating deletion of a session
},
new DiagramUmlSequenceMessage
{
Id = "MSG6",
Content = "Validate Inputs",
FromParticipantID = "System",
ToParticipantID = "System", // Message directed to the same participant (self-message)
Type = UmlSequenceMessageType.Self // Message type indicating a self-message
}
}
};
// Pass the UML sequence diagram model to the view
ViewData.model = model;
return View();
}
}
}
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.
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("600px")
.SnapSettings(s => s.Constraints(SnapConstraints.None))
.Model((DiagramModel)ViewData["model"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
// This method sets up and returns a view for the UML Sequence Diagram
public ActionResult Model()
{
// Create a new UML Sequence Diagram model
var model = new DiagramUmlSequenceDiagram
{
// Define the participants involved in the sequence diagram
Participants = new List<DiagramUmlSequenceParticipant>
{
// Define the "User" as a participant, marked as an actor
new DiagramUmlSequenceParticipant
{
Id = "User",
Content = "User",
IsActor = true
},
// Define the "System" as a non-actor participant with a destruction marker
new DiagramUmlSequenceParticipant
{
Id = "System",
Content = "System",
IsActor = false,
ShowDestructionMarker = true,
// Define activation boxes for the system
ActivationBoxes = new List<DiagramUmlSequenceActivationBox>
{
new DiagramUmlSequenceActivationBox
{
Id = "ActSystem", // Identifier for the activation box
StartMessageID = "MSG1", // Message that starts the activation
EndMessageID = "MSG2" // Message that ends the activation
}
}
}
},
// Define the messages exchanged between these participants
Messages = new List<DiagramUmlSequenceMessage>
{
new DiagramUmlSequenceMessage
{
Id = "MSG1",
Content = "Login Request",
FromParticipantID = "User", // Sender of the message
ToParticipantID = "System", // Receiver of the message
Type = UmlSequenceMessageType.Synchronous // Type of the message
},
new DiagramUmlSequenceMessage
{
Id = "MSG2",
Content = "Login Response",
FromParticipantID = "System",
ToParticipantID = "User",
Type = UmlSequenceMessageType.Reply // Reply type indicating a response
}
}
};
// Pass the UML sequence diagram model to the view for rendering
ViewData.model = model;
return View();
}
}
}
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. |  |
| Alternative | Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. |  |
| Loop | Represents a repeating sequence of interactions that continues based on a loop condition. |  |
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.
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("700px")
.SnapSettings(s => s.Constraints(SnapConstraints.None))
.Model((DiagramModel)ViewData["model"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
// This method constructs a UML Sequence Diagram model and passes it to the view
public ActionResult Model()
{
// Define the UML Sequence Diagram model with space between participants
var model = new DiagramUmlSequenceDiagram
{
SpaceBetweenParticipants = 300, // Space between the participants in the diagram
// Define the participants involved in the diagram
Participants = new List<DiagramUmlSequenceParticipant>
{
new DiagramUmlSequenceParticipant { Id = "Customer", Content = "Customer", IsActor = true },
new DiagramUmlSequenceParticipant { Id = "OrderSystem", Content = "Order System", IsActor = false },
new DiagramUmlSequenceParticipant { Id = "PaymentGateway", Content = "Payment Gateway", IsActor = false }
},
// Define the messages exchanged between participants
Messages = new List<DiagramUmlSequenceMessage>
{
new DiagramUmlSequenceMessage { Id = "MSG1", Content = "Place Order", FromParticipantID = "Customer", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Synchronous },
new DiagramUmlSequenceMessage { Id = "MSG2", Content = "Check Stock Availability", FromParticipantID = "OrderSystem", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Synchronous },
new DiagramUmlSequenceMessage { Id = "MSG3", Content = "Stock Available", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply },
new DiagramUmlSequenceMessage { Id = "MSG4", Content = "Process Payment", FromParticipantID = "OrderSystem", ToParticipantID = "PaymentGateway", Type = UmlSequenceMessageType.Synchronous },
new DiagramUmlSequenceMessage { Id = "MSG5", Content = "Payment Successful", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Reply },
new DiagramUmlSequenceMessage { Id = "MSG6", Content = "Order Confirmed and Shipped", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply },
new DiagramUmlSequenceMessage { Id = "MSG7", Content = "Payment Failed", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", Type = UmlSequenceMessageType.Reply },
new DiagramUmlSequenceMessage { Id = "MSG8", Content = "Retry Payment", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", Type = UmlSequenceMessageType.Reply }
},
// Define fragments to provide conditional visual representations
Fragments = new List<DiagramUmlSequenceFragment>
{
new DiagramUmlSequenceFragment
{
Id = 1,
Type = UmlSequenceFragmentType.Optional, // Represents an optional fragment
Conditions = new List<DiagramUmlSequenceFragmentCondition>
{
new DiagramUmlSequenceFragmentCondition
{
Content = "if item is in stock", // Condition for the fragment
MessageIds = new List<string> { "MSG4" }
}
}
},
new DiagramUmlSequenceFragment
{
Id = 2,
Type = UmlSequenceFragmentType.Alternative, // Represents an alternative fragment with conditions
Conditions = new List<DiagramUmlSequenceFragmentCondition>
{
new DiagramUmlSequenceFragmentCondition
{
Content = "if payment is successful",
MessageIds = new List<string> { "MSG5", "MSG6" }
},
new DiagramUmlSequenceFragmentCondition
{
Content = "if payment fails",
MessageIds = new List<string> { "MSG7", "MSG8" }
}
}
},
// Parent Fragment
new DiagramUmlSequenceFragment
{
Id = 3,
Type = UmlSequenceFragmentType.Loop, // Represents a loop fragment
Conditions = new List<DiagramUmlSequenceFragmentCondition>
{
new DiagramUmlSequenceFragmentCondition
{
Content = "while attempts less than 3",
FragmentIds = new List<int> { 1, 2 } // Nested fragments
}
}
}
}
};
// Pass the diagram model to the view for rendering
ViewData.model = model;
return View();
}
}
}
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.