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,
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:

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 / 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.

Updated on: 21/09/2022