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.

Adding a Sequence Diagram using Mermaid in JotterPad

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

Supported Metadata:
ParameterTypePossible ValuesExample
renderAsstringmermaidrenderAs=mermaid
heightnumber200height=200
widthnumber200width=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 / 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:



UML Use-Case Diagrams Model Report

For a more detailed guide on Mermaid sequence diagram, please refer to the Mermaid official page here.
Was this article helpful?
Cancel
Thank you!