> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.jotterpad.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Add Sequence Diagram in Markdown Using Mermaid

Sequence Diagram is an interaction diagram that details how operations are carried out. JotterPad uses [Mermaid.js](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequence-diagrams) to design and preview sequence diagram in Markdown files.

# Add Sequence Diagram using Mermaid
Sequence Diagram can be added using Mermaid flow chart syntax in JotterPad's [Markdown code block](/en/article/format-text-with-markdown-gexkc6/#3-pre-formatted-code). To declare Mermaid in the code block to be rendered globally, use `codeBlockRenderAs: mermaid` in the Markdown file's [YAML](/en/article/customize-template-in-markdown-19ir6fu/).

![Adding a Sequence Diagram using Mermaid in JotterPad](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermaid-sequence-diagram-jotte_1b62nd9.png)

To declare Mermaid to render on individual code block, 
1. Type 3 backticks (```) at the start of the code followed by space or return key.
2. Press the `</>` button at the top right corner.
3. Choose `Mermaid`.
4. Add `renderAs=mermaid` in metadata.

Supported Metadata:
| Parameter | Type   | Possible Values | Example          |
| --------- | ------ | --------------- | ---------------- |
| renderAs  | string | mermaid         | renderAs=mermaid |
| height    | number | 200             | height=200       |
| width     | number | 200             | width=200        |
Use `,` to add multiple parameters. E.g. `renderAs=mermaid, height=200`.

Example:

```
sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

# Mermaid Sequence Diagram Syntax

Please refer to the Mermaid official documentation here:
* [Participants](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=participants) / [Actors](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=actors)
* [Messages](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=messages)
* [Activations](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=activations)
* [Notes](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=notes)
* [Loops](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=loops)
* [Alt](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=alt)
* [Parallel](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=parallel)
* [Critical region](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=critical-region)
* [Break](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=break)
* [Background highlighting](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=background-highlighting)
* [Sequence Number](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers)


# Examples
Here are some examples of JotterPad Markdown templates using Mermaid Sequence Diagram:

![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/screenshot2_19it8iv.png)

1. [UML Use-Case Diagrams Model Report](https://jotterpad.app/app/templates/uml-model-report-md)


For a more detailed guide on Mermaid sequence diagram, please refer to the Mermaid official page [here](https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequence-diagrams).