출처

출처에 더 많은 내용이 있지만, 필수적이라고 생각한 내용만 가져왔습니다.

Example 예제

Code:

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

"end"를 작성할 때는 주의해야 합니다.
Mermaid는 스크립트 언어이고 해당 문자열이 다이어그램을 깨트릴 수 있기 때문입니다.
필요한 경우괄호(){}[], 따옴표 ""로 해당 문자열을 감싸 줍시다.

---

Syntax 문법

Participants 참여자

참여자와 배우는 시퀀스 다이어그램에서 소통의 주체입니다.

예제에서 보듯 참여자는 묵시적 선언이 가능합니다.

명시적으로 선언하고 순서를 정해주고 싶다면, 다음과 같이 작성합니다.

Code:

sequenceDiagram
	participant Alice
	participant Bob
	Alice->>Bob: Hi Bob
	Bob->>Alice: Hi Alice

---

Actors 배우

참여자의 직사각형 모양 대신 배우 모양을 사용할 수 있습니다.

Code:

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

---

Aliases 별칭

참여자와 배우는 별칭을 가질 수 있습니다.

Code:

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

---

Grouping / Box 그룹화 및 감싸기

참여자(배우)들은 수직 박스로 그룹화될 수 있습니다.

박스의 색상을 정의할 수 있고, 정의하지 않으면 투명합니다.

레이블에 설명을 작성할 수도 있습니다.

그룹화 문법은 다음과 같습니다.

box [색|투명] Group [설명|without description]
... actor|participant ...
end

색상 정의 방법은 다음과 같습니다.

// 예제 1
box Aqua Group Description
... actors ...
end

// 예제 2
box Group without description
... actors ...
end

// 예제 3
box rgb(33,66,99)
... actors ...
end

// 예제 4
box transparent Aqua
... actors ...
end

Code:

sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charly ?
    B->>C: Hello Charly, how are you?

---

Messages 메시지

메시지는 실선 또는 점선으로 표기됩니다.

문법은 다음과 같습니다.

[Sender][Arrow][Recipient]: 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)

---

Activations 활성화

참여자(배우)에 대하여 활성화 표시를 할 수 있습니다.

참여자 쪽 세로선에 작은 박스로 표시됩니다.

눈으로 보는 게 이해가 쉽습니다.

Code:

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

+와 -로 줄여쓸 수 있습니다.

괄호처럼 스택으로 동작합니다.

Code:

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

---

Notes 노트

다이어그램에 노트를 작성할 수 있습니다.

문법은 다음과 같습니다.

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

Code:

sequenceDiagram
    participant John
    Note right of John: Text in note

Code:

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

---

Loops 루프

시퀀스 다이어그램에 루프를 표기할 수 있습니다.

문법입니다.

loop LoopText
... 반복할 내용 ...
end

Code:

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

---

Alt, Opt 조건문

Alternative와 Optional의 줄임말입니다.

alt는 if-else, opt는 else 없는 if문입니다.

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 병렬

병렬 작업을 표기할 수 있습니다.

문법은 다음과 같습니다.

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

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!

중첩(nested) 표기도 가능합니다.

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 Region 임계 구역

임계 구역을 표기할 수 있습니다.

critical-[option]-end 로 씁니다.

문법입니다.

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

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

---

Break 중단

시퀀스의 흐름이 끊기는 경우를 표기할 수 있습니다.

조건문처럼 사용하면 됩니다.

break [something happened]
... statements ...
end

Code:

sequenceDiagram
    Consumer-->API: Book something
    API-->BookingService: Start booking process
    break when the booking process fails
        API-->Consumer: show failure
    end
    API-->BillingService: Start billing process

---

Comments 주석

%%로 작성합니다.

Code:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!

끝.