Sequence Diagram is an interaction diagram that details how operations are carried out. JotterPad uses Mermaid.js 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. To declare Mermaid in the code block to be rendered globally, use codeBlockRenderAs: mermaid in the Markdown file's YAML.

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:

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 / Actors
• Messages
• Activations
• Notes
• Loops
• Alt
• Parallel
• Critical region
• Break
• Background highlighting
• Sequence Number

Examples

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

1. UML Use-Case Diagrams Model Report

For a more detailed guide on Mermaid sequence diagram, please refer to the Mermaid official page here.

Updated on: 21/09/2022