Table of Contents

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.