Sequence Diagram

Mermaid로 Sequence Diagram도 그릴 수 있다

Basics

Code

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

• 참여자(participants)는 암시적(implicit)으로 표현되고 있다.

Participants

참여자(participants)를 명시적으로 표현할 수 있다.

Code

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

Code

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

• as를 통해 별칭(alias)를 지정하는 것도 가능하다.

Actors

Actors도 표현이 가능하다. (졸라맨)

Code

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

Message

메시지는 다음 문법을 따르면 된다.

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

여섯 개의 화살표를 지원한다.

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)

Activation

Code

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

Actor를 activate / deactivate 할 수 있다.

Code

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

+와 -로 짧게 표현할 수도 있다. 물론 중첩도 가능하다.

Notes

노트도 적을 수 있다.

Code

sequenceDiagram
    participant John
    Note right of John: Text in note

    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

Loops

이런 식으로 루프도 가능하다.

Code

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

Alts

Alternative path도 넣어보자.

Code

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

Parallel

Code

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!

중첩도 가능하다.

Code

sequenceDiagram
    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

Critical Section

Code

sequenceDiagram
    critical Establish a connection to the DB
        Service-->DB: connect
    option Network timeout
        Service-->Service: Log error
    option Credentials rejected
        Service-->Service: Log different error
    end

Sequence Numbers

Code

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!

REF

Sequence diagrams | Mermaid