The demo shown below was taken from the official Mermaid documentation. |
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! |
Textual representation
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! |
The code above is rendered by "Prism Syntax Highlighter for Confluence" which supports highlighting Mermaid syntax.
👉 Check out the official Mermaid documentation here https://mermaid.js.org/syntax/sequenceDiagram.html.