시퀀스 다이어그램
Mermaid는 시퀀스 다이어그램을 렌더링할 수 있습니다. 시퀀스 다이어그램은 상호 작용 다이어그램으로, 각 프로세스가 서로 어떻게 작동하고 작동 순서가 어떤지 보여줍니다.
복사
임베드
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
노드에 대한 설명: Mermaid 언어의 작성 방식 때문에 "end" 라는 단어는 전체 그래프를 깨뜨립니다. 반드시 "end" 를 사용해야 하면 소괄호(), 큰따옴표"", 중괄호{} 또는 대괄호[]로 "end" 라는 단어를 감싸야 합니다. 즉: (end), [end], {end}.
문법
참여자
참여자는 차트 소스 텍스트에 나타나는 순서대로 표시됩니다. 때로는 첫 번째 메시지에 나타나는 순서와 다르게 참여자를 표시하고 싶을 수 있으며, 다음 방법으로 참여자의 등장 순서를 지정할 수 있습니다:
복사
임베드
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
텍스트가 있는 사각형 대신 역할 기호를 사용하려면 아래와 같이 역할 문을 사용하여 구현할 수 있습니다.
복사
임베드
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
별칭
참여자 선언 뒤에 as 를 사용하여 별칭을 정의할 수 있습니다.
복사
임베드
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
참여자 생성 및 소멸
메시지로 참여자를 생성하고 소멸할 수 있습니다. 따라서 메시지 앞에 생성 또는 소멸 지시를 추가하세요.
복사
임베드
participant B
A --> B: Hello
생성 지시는 참여자와 별칭을 구분하는 것을 지원합니다. 메시지의 발신자나 수신자는 소멸될 수 있지만 수신자는 생성만 될 수 있습니다.
복사
임베드
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
그룹/상자
참여자는 수직 상자에 그룹으로 배치할 수 있습니다. 기호를 사용하여 색상을 정의할 수 있습니다(정의하지 않으면 투명해집니다).
복사
임베드
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
그룹 이름이 색상이 있으면 해당 색상을 투명하게 강제할 수 있습니다:
복사
임베드
box transparent Aqua
... actors ...
end
복사
임베드
sequenceDiagram
box Orange 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 Charley?
B->>C: Hello Charley, how are you?
메시지
메시지는 실선으로 표시할 수도 있고 점선으로 표시할 수도 있습니다.
선은 실선 또는 점선일 수 있으며, 다양한 유형의 화살표, 십자 또는 열린 화살표로 끝나는 것을 지원합니다.
복사
임베드
[Actor][Arrow][Actor]:Message text
열 가지 표준 화살표 유형
| 유형 | 설명 |
|---|---|
| -> | 화살표 없는 실선 |
| --> | 화살표 없는 점선 |
| ->> | 화살표가 있는 실선 |
| -->> | 화살표가 있는 점선 |
| <<->> | 양방향 화살표 실선 |
| <<-->> | 양방향 화살표 점선 |
| -x | 끝에 십자가 있는 실선 |
| --x | 끝에 십자가 있는 점선 |
| -) | 끝에 빈 화살표가 있는 실선(비동기) |
| --) | 끝에 빈 화살표가 있는 점선(비동기) |
활성화
역할을 활성화 및 비활성화할 수 있으며, 비활성화 또는 활성화는 전용 선언이 될 수 있습니다:
복사
임베드
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
메시지 화살표 뒤에 + 또는 -를 추가하는 약식 표기법도 있습니다.
복사
임베드
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
동일한 역할의 활성화는 중첩될 수 있습니다:
복사
임베드
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!
주석
시퀀스 다이어그램에 주석을 추가할 수 있습니다. 다음 기호로 구현할 수 있습니다: Note[right of] 또는 [left of] 또는 [over][참여자]: 주석 내용
복사
임베드
sequenceDiagram
participant John
Note right of John: Text in note
두 참여자를 포함하는 주석을 만들 수도 있습니다:
복사
임베드
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
줄바꿈 문자
주석과 메시지에 줄바꿈 문자를 추가할 수 있습니다:
복사
임베드
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
역할 이름의 줄바꿈 문자는 별칭을 정의해야 합니다:
복사
임베드
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
루프
시퀀스 다이어그램에서 다음 기호로 루프를 표현할 수 있습니다.
복사
임베드
loop Loop text
... statements ...
end
아래 예를 참조하세요:
복사
임베드
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
대체
시퀀스 다이어그램에서 기호로 대체 경로를 표현할 수 있습니다.
복사
임베드
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
복사
임베드
opt Describing text...
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
병렬
다음 기호로 병렬로 발생하는 동작을 나타낼 수 있습니다.
복사
임베드
par Action 1
statements
and Action 2
statements
and Action N
statements
end
아래 예를 참조하세요:
복사
임베드
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!
병렬 블록을 중첩할 수도 있습니다.
복사
임베드
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 [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
아래 예를 참조하세요:
복사
임베드
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
전혀 옵션이 없을 수도 있습니다.
복사
임베드
critical Establish a connection to the DB
Service-->DB: connect
end
이 임계 블록도 중첩할 수 있으며, 위에서 본 par 문과 동일합니다.
중단
프로세스에서 시퀀스의 중지를 표시할 수 있으며, 일반적으로 예외 상황을 모델링하는 데 사용됩니다.
이는 다음 기호로 완료됩니다:
복사
임베드
break [something happened]
... statements ...
end
아래 예를 참조하세요:
복사
임베드
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
배경 하이라이트
프로세스를 강조하기 위해 색상 배경 사각형을 설정할 수 있으며, 다음 기호로 완료됩니다:
복사
임베드
rect COLOR
... content ...
end
색상은 rgb 및 rgba 문법으로 정의됩니다.
복사
임베드
rect rgb(0, 255, 0)
... content ...
end
복사
임베드
rect rgba(0, 0, 255, .1)
... content ...
end
아래 예를 참조하세요:
복사
임베드
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
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.
주석
시퀀스 다이어그램에 주석을 입력할 수 있으며 편집기는 이러한 주석을 무시합니다. 주석은 한 줄을 차지해야 하며 이중 퍼센트 기호 %%로 시작해야 합니다. 주석 시작부터 다음 줄바꿈 문자 사이의 모든 텍스트는 모든 차트 문법을 포함하여 주석으로 간주됩니다.
복사
임베드
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
문자 이스케이프를 위한 엔티티 인코딩
다음 문법을 사용하여 문자를 이스케이프할 수 있습니다.
복사
임베드
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
제시된 숫자는 십진수이므로 (#) 은 (#35;) 로 인코딩할 수 있으며, HTML 문자 이름도 지원합니다.
세미콜론이 줄바꿈 문자를 대신하여 마크를 정의할 수 있으므로, 메시지 텍스트에 세미콜론을 포함할 때는 (#59;) 를 사용해야 합니다.
번호
시퀀스 다이어그램의 각 화살표에 일련 번호를 첨부할 수 있습니다. 아래와 같습니다:
복사
임베드
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!
참여자 메뉴
참여자는 외부 페이지로 향하는 개인화된 링크를 나열한 팝업 메뉴를 포함할 수 있습니다. 예를 들어 역할이 네트워크 서비스를 나타내는 경우, 유용한 링크에는 서비스 상태 대시보드로 향하는 링크, 해당 서비스 코드를 포함하는 리포지토리, 또는 서비스를 설명하는 위키 페이지 링크가 포함될 수 있습니다.
다음 형식으로 하나 이상의 링크 줄을 추가하여 구성할 수 있습니다:
복사
임베드
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!
고급 메뉴 문법
JSON 형식에 의존하는 고급 문법이 있습니다. JSON 형식에 능숙하다면 이것도 사용할 수 있습니다.
다음 형식의 링크 줄을 추가하여 구성할 수 있습니다:
복사
임베드
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
복사
임베드
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
