Mermaid - Sequence Diagram

mermaid 支援 UML 中的 sequence diagram

Syntax

Participants 明確標示參與的角色，以方框表示

sequenceDiagram
    participant Alice
    participant John
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice->>John: See you later!

render

participant 可替換為 actor，會改成用 UML 代表人物的 actor 表示。（MarkText 不支援 actor 語法）

sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice

alias 是 actor 的縮寫 ex: participant A as Alice

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

render

Message

可用實線或虛線，語法為

[Actor][Arrow][Actor]:Message text

Arrow 的部分有六種

Type	Description
->	Solid line without arrow
-->	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end
--x	Dotted line with a cross at the end.
-)	Solid line with an open arrow at the end (async)
--)	Dotted line with a open arrow at the end (async)

sequenceDiagram
    participant A as Alice
    participant J as John
    A->J: M1
    A-->J: M2
    A->>J: M3
    A-->>J: M4
    A-xJ: M5
    A--xJ: M6
    %%A-)J: M7
    %%A--)J: M8

render

Activations

可 activate/deactivate actor，在 Sequence Diagram 裡面代表該 actor 花時間處理一些工作，語法為 activate/deactivate，也可在 message arrow 後面使用 + -。

activatation 可在同一個 actor 裡面 stacked

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

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

    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

render

Note

可在 sequence diagram 加上 note，

Note [ right of | left of | over ] [Actor]: Text in note content

sequenceDiagram
    participant John
    Note right of John: Text of John
    Alice->John: Hello John, how are you?
    Note over Alice,John: A Note Over Alice, John

render

Loop

語法為

loop Loop text
... statements ...
end

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

render

Alt

代表 alternative path，以下為語法，可不寫 else

alt Describing text
... statements ...
else
... statements ...
end

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

render

Parallel

同時發生的動作

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

example

sequenceDiagram
    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!

render

可以 nest parallel blocks

sequenceDiagram
    %% 可 nest parallel blocks
    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
    end

render

hightlight 背景

以 rgb 或 rgba 定義顏色

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

example

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

render

Sequence Number

autonumber

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!

render

Actor Menu

語法，在 MarkText 不能使用

link <actor>: <link-label> @ <link-url>

sequenceDiagram
    participant Alice
    participant John
    link Alice: Dashboard @ https://dashboard.contoso.com/alice
    link Alice: Wiki @ https://wiki.contoso.com/alice
    link John: Dashboard @ https://dashboard.contoso.com/john
    link John: Wiki @ https://wiki.contoso.com/john
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice->>John: See you later!

render