---json
{
    "canonical": ":sequence-diagram",
    "description": "This article shows you how to create a UML sequence diagram.",
    "name": "Sequence Diagram",
    "page_id": "ghv7tnuvn9blbbyqi7rsn",
    "title": "How to create a sequence diagram with ComboStrap (UML)"
}
---
====== ComboStrap Diagram - Sequence UML Diagram ======

===== About =====
The ''sequence-diagram'' component is a [[diagram|diagram component]] that permits to create ''UML sequence diagram''.


===== Example =====


<webcode name="Gant" frameborder="0">
  * The markup
```dw
<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:
</webcode>

===== Syntax =====


The syntax is based on the  [[https://mermaid-js.github.io/mermaid/#/sequenceDiagram|mermaid sequenceDiagram definition]]

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

<note>
Mermaid offers a [[https://mermaid-js.github.io/mermaid-live-editor|live editor]] that you can use to validate and develop your diagrams.
</note>

This component is based on the [[docs:utility:mermaid|mermaid component]].