diff --git a/blazor-toc.html b/blazor-toc.html index 507e89a1c6..ccf6448ead 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2506,6 +2506,9 @@ +
  • + Uml Sequence Diagram +
  • Commands
    • diff --git a/blazor/diagram/serialization.md b/blazor/diagram/serialization.md index 05a933d47e..ec82fd1059 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -138,13 +138,13 @@ The diagram provides support to save and load the diagram using a file stream. T You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Serialization/SaveAndLoad) -## Importing and Exporting Mind Map and Flowchart Diagrams using Mermaid Syntax +## Importing and Exporting using Mermaid Syntax -The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, you can easily create mind maps and flowcharts from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps and flowcharts to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms. +The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, you can easily create mind maps, flowcharts and sequence diagrams from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps, flowcharts and sequence diagrams to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms. ### Save diagram as Mermaid syntax - The [SaveDiagramAsMermaid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SaveDiagramAsMermaid) method serializes the diagram into a Mermaid-compatible string format. This method is specifically designed for diagrams that utilize Flowchart and Mind map layouts. The following code illustrates how to save the diagram in Mermaid string format. + The [SaveDiagramAsMermaid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SaveDiagramAsMermaid) method serializes the diagram into a Mermaid-compatible string format. This method works for diagrams using Flowchart, Mind Map or Sequence Diagram layouts. The following code illustrates how to save the diagram in Mermaid string format. ```cshtml SfDiagramComponent Diagram; @@ -165,4 +165,4 @@ await Diagram.LoadDiagramFromMermaidAsync(data); ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/MermaidSupport). ->**Note:** Mermaid syntax data serialization and deserialization are only supported for Flowchart and Mind map layouts. Please ensure that your diagram uses one of these layouts to successfully load the data. +>**Note:** Mermaid syntax data serialization and deserialization are only supported for Flowchart, Mind map and Sequence Diagram layouts. Please ensure that your diagram uses one of these layouts for successful data loading. diff --git a/blazor/diagram/uml-sequence-diagram/images/ActivationsExample.png b/blazor/diagram/uml-sequence-diagram/images/ActivationsExample.png new file mode 100644 index 0000000000..9b204c8031 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/ActivationsExample.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/AltFragment.png b/blazor/diagram/uml-sequence-diagram/images/AltFragment.png new file mode 100644 index 0000000000..467c31c93d Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/AltFragment.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/AsyncronousMessage.png b/blazor/diagram/uml-sequence-diagram/images/AsyncronousMessage.png new file mode 100644 index 0000000000..121cce69d4 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/AsyncronousMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/CreateMessage.png b/blazor/diagram/uml-sequence-diagram/images/CreateMessage.png new file mode 100644 index 0000000000..49cfdcfa04 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/CreateMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/DeleteMessage.png b/blazor/diagram/uml-sequence-diagram/images/DeleteMessage.png new file mode 100644 index 0000000000..0a4496d631 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/DeleteMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/FragmentExample.png b/blazor/diagram/uml-sequence-diagram/images/FragmentExample.png new file mode 100644 index 0000000000..327c99452e Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/FragmentExample.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/LoopFragment.png b/blazor/diagram/uml-sequence-diagram/images/LoopFragment.png new file mode 100644 index 0000000000..86ebbc33c1 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/LoopFragment.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/MessageExample.png b/blazor/diagram/uml-sequence-diagram/images/MessageExample.png new file mode 100644 index 0000000000..58b6e7f2f7 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/MessageExample.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/OptFragment.png b/blazor/diagram/uml-sequence-diagram/images/OptFragment.png new file mode 100644 index 0000000000..6dacf2f54b Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/OptFragment.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/ParticipantsExample.png b/blazor/diagram/uml-sequence-diagram/images/ParticipantsExample.png new file mode 100644 index 0000000000..082c1cdef9 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/ParticipantsExample.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/ReplyMessage.png b/blazor/diagram/uml-sequence-diagram/images/ReplyMessage.png new file mode 100644 index 0000000000..9c1bf59d23 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/ReplyMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/SelfMessage.png b/blazor/diagram/uml-sequence-diagram/images/SelfMessage.png new file mode 100644 index 0000000000..1aef492f9a Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/SelfMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/SpaceBetweenParticipants.png b/blazor/diagram/uml-sequence-diagram/images/SpaceBetweenParticipants.png new file mode 100644 index 0000000000..ebabbb4ab8 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/SpaceBetweenParticipants.png differ diff --git a/blazor/diagram/uml-sequence-diagram/images/SynchronousMessage.png b/blazor/diagram/uml-sequence-diagram/images/SynchronousMessage.png new file mode 100644 index 0000000000..3b381661c5 Binary files /dev/null and b/blazor/diagram/uml-sequence-diagram/images/SynchronousMessage.png differ diff --git a/blazor/diagram/uml-sequence-diagram/sequence-diagram.md b/blazor/diagram/uml-sequence-diagram/sequence-diagram.md new file mode 100644 index 0000000000..5dfbddb3b1 --- /dev/null +++ b/blazor/diagram/uml-sequence-diagram/sequence-diagram.md @@ -0,0 +1,588 @@ +--- +layout: post +title: Sequence diagram model in Blazor Diagram Component | Syncfusion +description: Check out and learn here all about Sequence diagram model support in Syncfusion Blazor Diagram component and more. +platform: Blazor +control: Diagram Component +documentation: ug +--- + +# Sequence Diagram Model in Blazor diagram component + +A sequence diagram is a type of interaction diagram that visually represents how objects communicate with each other in a particular sequence over time. The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) in the Syncfusion Blazor suite supports the creation and visualization of Uml sequence diagrams through the dedicated `UmlSequenceDiagramModel` class. + +To enable this functionality, assign an instance of `UmlSequenceDiagramModel` to the `Model` property of the SfDiagramComponent. This model encapsulates all necessary elements—such as lifelines, messages, activation boxes, and fragments—required to render a complete sequence diagram. + +## Sequence Diagram Elements + +A sequence diagram consists of several key elements, including participants, messages, activation boxes, and fragments. Each of these components plays a crucial role in representing the flow of interaction between objects over time. + +The diagram component allows you to define and manage these elements through the `UmlSequenceDiagramModel`. Below is an overview of how each element can be implemented: + +* `Participants`: Represent the lifelines (such as actors or systems) involved in the interaction. +* `Messages`: Indicate the communication between participants, including synchronous and asynchronous calls, returns, and self-messages. +* `Activation Boxes`: Represent the time during which a participant is active or performing an operation. +* `Fragments`: Define conditional or parallel behavior using constructs like alt, opt, and loop. + +Each of these elements can be programmatically configured and customized to suit your application's interaction flow. + +### Participants + +The `UmlSequenceParticipant` class represents the entities involved in the sequence of interactions—such as users, systems, or services. In a sequence diagram, participants are displayed at the top of the diagram, with vertical lifelines extending downward to indicate their presence throughout the interaction flow. + +Each participant serves as the source or target of messages and is essential for illustrating the communication between different components in the system. + +You can define participants by adding instances of `UmlSequenceParticipant` to the `Participants` collection in the `UmlSequenceDiagramModel`. + +The following code example explains how to create participants in sequence diagram. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + } + }; + + // Initialize the Uml sequence diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants + }; + } +} +``` + +You can download a complete working sample from [GitHub](). + +![ParticipantsExample](./images/ParticipantsExample.png) + +#### UmlSequenceParticipant Properties + +| Property | Type | Description | +|---|---|---| +| ID | string | A unique identifier for the participant | +| Content | string | The display text for the participant | +| IsActor | bool | Determines if the participant is displayed as an actor (true) or object (false) | +| ShowDestructionMarker | bool | Determines if a destruction marker (X) is shown at the end of the lifeline | +| ActivationBoxes | IEnumerable\ | Collection of activation boxes for this participant | + +### Messages + +The `UmlSequenceMessage` class represents communications or interactions between participants in a sequence diagram. Messages are visually displayed as arrows connecting the lifelines of two participants, indicating the direction and type of interaction. + +These messages can represent various types of communication, such as: + +* Synchronous messages (e.g., method calls) +* Asynchronous messages (e.g., signals or events) +* Return messages (e.g., responses or results) +* Self-messages (where a participant calls itself) + +Messages are added to the `Messages` collection in the `UmlSequenceDiagramModel`, and can be customized to define their source, target, message type, and label. + +#### Types of Messages + +The [UmlSequenceMessageType]() enum defines the following message types: + +| Message Type | Description | Example | +|---|---|---| +| Synchronous | The sender waits for a response | ![Synchronous Message](images/SynchronousMessage.png) | +| Asynchronous | The sender continues without waiting | ![Asynchronous Message](images/AsyncronousMessage.png) | +| Reply | A response to a previous message | ![Reply Message](images/ReplyMessage.png) | +| Create | Creates a new participant | ![Create Message](images/CreateMessage.png) | +| Delete | Terminates a participant | ![Delete Message](images/DeleteMessage.png) | +| Self | A message from a participant to itself | ![Self Message](images/SelfMessage.png) | + + +The following code example explains how to create messages in sequence diagram. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "Logger", + Content = "Logger", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "SessionManager", + Content = "SessionManager", + IsActor = false + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + }, + new UmlSequenceMessage() + { + ID = "MSG3", + Content = "Log Event", + FromParticipantID = "System", + ToParticipantID = "Logger", + MessageType = UmlSequenceMessageType.Asynchronous + }, + new UmlSequenceMessage() + { + ID = "MSG4", + Content = "Create Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Create + }, + new UmlSequenceMessage() + { + ID = "MSG5", + Content = "Delete Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Delete + }, + new UmlSequenceMessage() + { + ID = "MSG6", + Content = "Validate Inputs", + FromParticipantID = "System", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Self + } + }; + + // Initialize Uml Sequence Diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants, + Messages = messages + }; + } +} + +``` +You can download a complete working sample from [GitHub](). + +![Message Example](./images/MessageExample.png) + +#### UmlSequenceMessage Properties + +| Property | Type | Description | +|---|---|---| +| ID | string | A unique identifier for the message | +| Content | string | The display text for the message | +| FromParticipantID | string | ID of the participant sending the message | +| ToParticipantID | string | ID of the participant receiving the message | +| MessageType | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self) | + +### Activation Boxes + +The `UmlSequenceActivationBox` class represents periods during which a participant is active—that is, when it is executing a process or handling a message. These are visually rendered as thin vertical rectangles placed on top of a participant's lifeline. + +Activation boxes typically begin when a message is received and end when the processing is complete. They help illustrate the execution flow and the duration of operations within the sequence diagram. + +Activation boxes can be explicitly configured by adding them to the `ActivationBoxes` collection of the `UmlSequenceParticipant`, allowing precise control over their placement and duration. + +The following code example explains how to create activation boxes in sequence diagram. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants with an activation box + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true, + ActivationBoxes = new List() + { + new UmlSequenceActivationBox() + { + ID = "ActivateSystem", + StartMessageID = "MSG1", + EndMessageID = "MSG2" + } + } + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + } + }; + + // Initialize the model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants, + Messages = messages + }; + } +} +``` +You can download a complete working sample from [GitHub](). + +![Activations Example](./images/ActivationsExample.png) + +#### UmlSequenceActivationBox Properties + +| Property | Type | Description | +|---|---|---| +| ID | string | A unique identifier for the activation box | +| StartMessageID | string | ID of the message that initiates the activation | +| EndMessageID | string | ID of the message that terminates the activation | + +### Fragments + +The `UmlSequenceFragment` class is used to group a set of messages based on specific conditions or interaction control structures within a sequence diagram. Fragments are displayed as rectangular enclosures that visually separate sections of the diagram, typically used to represent: + +* Alternative flows (alt) +* Optional interactions (opt) +* Loops (loop) + +You can configure fragments by adding them to the `Fragments` collection of the `UmlSequenceDiagramModel`, specifying the type of fragment, condition labels, and the associated messages or nested fragments it encompasses. + +#### 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](images/OptFragment.png) | +| Alternative | Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. | ![Alternative Fragment](images/AltFragment.png) | +| Loop | Represents a repeating sequence of interactions that continues based on a loop condition. | ![Loop Fragment](images/LoopFragment.png) | + +#### Creating Fragments + +To create fragments in your sequence diagram, you will need to use the `UmlSequenceFragment` to define fragments and the [UmlSequenceFragmentCondition]() to specify each condition block within those fragments. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Participants + List participants = new List() + { + new UmlSequenceParticipant() { ID = "Customer", Content = "Customer", IsActor = true }, + new UmlSequenceParticipant() { ID = "OrderSystem", Content = "Order System", IsActor = false }, + new UmlSequenceParticipant() { ID = "PaymentGateway", Content = "Payment Gateway", IsActor = false } + }; + + // Messages + List messages = new List() + { + new UmlSequenceMessage() { ID = "MSG1", Content = "Place Order", FromParticipantID = "Customer", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG2", Content = "Check Stock Availability", FromParticipantID = "OrderSystem", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG3", Content = "Stock Available", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG4", Content = "Process Payment", FromParticipantID = "OrderSystem", ToParticipantID = "PaymentGateway", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG5", Content = "Payment Successful", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG6", Content = "Order Confirmed and Shipped", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG7", Content = "Payment Failed", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG8", Content = "Retry Payment", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply } + }; + + // Fragments + List fragments = new List() + { + new UmlSequenceFragment() + { + ID = "Frag3", + FragmentType = UmlSequenceFragmentType.Loop, + Conditions = new List + { + new UmlSequenceFragmentCondition() + { + Content = "while attempts less than 3", + Fragments = new List() + { + new UmlSequenceFragment() + { + ID = "Frag1", + FragmentType = UmlSequenceFragmentType.Optional, + Conditions = new List() + { + new UmlSequenceFragmentCondition() + { + Content = "if item is in stock", + MessageIds = new List { "MSG4" } + } + } + }, + new UmlSequenceFragment() + { + ID = "Frag2", + FragmentType = UmlSequenceFragmentType.Alternative, + Conditions = new List() + { + new UmlSequenceFragmentCondition() + { + Content = "if payment is successful", + MessageIds = new List() { "MSG5", "MSG6" } + }, + new UmlSequenceFragmentCondition() + { + Content = "if payment fails", + MessageIds = new List() { "MSG7", "MSG8" } + } + } + } + } + } + } + } + }; + + // Assign model + DiagramModel = new UmlSequenceDiagramModel() + { + SpaceBetweenParticipants = 300, + Participants = participants, + Messages = messages, + Fragments = fragments + }; + } +} +``` + +You can download a complete working sample from [GitHub](). + +![Fragment Example](images/FragmentExample.png) + +#### UmlSequenceFragment Properties + +| Property | Type | Description | +|---|---|---| +| ID | string | A unique identifier for the fragment | +| FragmentType | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative) | +| Conditions | List\ | Collection of conditions for the fragment | + +#### UmlSequenceFragmentCondition Properties + +| Property | Type | Description | +|---|---|---| +| Content | string | Text describing the condition or parameter | +| MessageIds | List\ | Collection of message IDs included in this condition section | +| Fragments | List\ | Collection of nested fragments (for complex structures) | + +### Customizing Participant Spacing in Sequence Diagram + +The `SpaceBetweenParticipants` property of the `UmlSequenceDiagramModel` controls the horizontal spacing between participants in the sequence diagram. By default, this value is set to 100, ensuring a uniform gap between lifelines. + +You can customize this value to increase or decrease the spacing based on your diagram’s layout requirements or to accommodate longer participant names and message labels. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "Logger", + Content = "Logger", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "SessionManager", + Content = "SessionManager", + IsActor = false + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + }, + new UmlSequenceMessage() + { + ID = "MSG3", + Content = "Log Event", + FromParticipantID = "System", + ToParticipantID = "Logger", + MessageType = UmlSequenceMessageType.Asynchronous + }, + new UmlSequenceMessage() + { + ID = "MSG4", + Content = "Create Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Create + }, + new UmlSequenceMessage() + { + ID = "MSG5", + Content = "Delete Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Delete + }, + new UmlSequenceMessage() + { + ID = "MSG6", + Content = "Validate Inputs", + FromParticipantID = "System", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Self + } + }; + + // Initialize Uml Sequence Diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + SpaceBetweenParticipants = 200, + Participants = participants, + Messages = messages + }; + } +} + +``` + +You can download a complete working sample from [GitHub](). + +