Diagrams and visualizations using Mermaid

Explore

Diagrams and visualizations using Mermaid

Sequence Diagram

A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

⁠

Syntax documentation

⁠

Syntax

Theme:

default

⁠

Alice->>John: Hello John, how are you?

John-->>Alice: Great!

Alice-)John: See you later!

⁠

Participants

participant Alice

participant Bob

Alice->>Bob: Hi Bob

Bob->>Alice: Hi Alice

⁠

Actors

actor Alice

actor Bob

Alice->>Bob: Hi Bob

Bob->>Alice: Hi Alice

⁠

Aliases

participant A as Alice

participant J as John

A->>J: Hello John, how are you?

J->>A: Great!

⁠

Activations

Alice->>John: Hello John, how are you?

activate John

John-->>Alice: Great!

deactivate John

⁠

Notes

participant John

Note right of John: Text in note

⁠

Alice->John: Hello John, how are you?

Note over Alice,John: A typical interaction

⁠

Loops

Alice->John: Hello John, how are you?

loop Every minute

John-->Alice: Great!

end

⁠

Parallel

par Alice to Bob

Alice->>Bob: Hello guys!

and Alice to John

Alice->>John: Hello guys!

end

Bob-->>Alice: Hi Alice!

John-->>Alice: Hi Alice!

⁠

par Alice to Bob

Alice->>Bob: Go help John

and Alice to John

Alice->>John: I want this done today

par John to Charlie

John->>Charlie: Can we do this today?

and John to Diana

John->>Diana: Can you help us today?

end

⁠

Background Highlighting

participant Alice

participant John

rect rgb(191, 223, 255)

note right of Alice: Alice calls John.

Alice->>+John: Hello John, how are you?

rect rgb(200, 150, 255)

Alice->>+John: John, can you hear me?

John-->>-Alice: Hi Alice, I can hear you!

end

John-->>-Alice: I feel great!

end

Alice ->>+ John: Did you want to go to the game tonight?

John -->>- Alice: Yeah! See you there.

⁠

Background Highlighting

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.