How to create a sequence diagram with ComboStrap (UML)

ComboStrap Diagram - Sequence UML Diagram

About

The sequence-diagram component is a diagram component that permits to create UML sequence diagram.

Example

  • The markup
<sequence-diagram>
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
</sequence-diagram>
  • The output:
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Syntax

The syntax is based on the mermaid sequenceDiagram definition

<sequence-diagram>
   ... Mermaid Sequence Diagram definition ...
</sequence-diagram>

Mermaid offers a live editor that you can use to validate and develop your diagrams.

This component is based on the mermaid component.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
ComboStrap Diagram

ComboStrap is able to create and render diagrams . Example with a sequence Diagram. If your diagrams are in a svg format, you can just render them with the svg component. Otherwise, you can use the...
Undraw My Documents
Create diagram with mermaid

This component will render mermaid diagram
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner