[markdown] mermaid를 이용해서 UML 그리기 - 상태(status) 다이어그램

안녕하세요. 오늘은 mermaid를 이용해서 UML을 그려보는 마지막 시간입니다. 오늘 그려볼 다이어그램은 스테이터스 다이어그램입니다.

상태 다이어그램

객체는 특정 상태를 지니며 이 상태는 이벤트와 같은 액션에 의하여 상태는 변경될 수 있습니다. 이러한 객체의 상태와 상태의 변화를 도식화 한 다이어그램이 바로 객체 상태 다이어그램입니다. 한 객체에 대해서 그 상태가 변화됨에 따라 할 수 있는 액션이 바뀔 수 있습니다. 이럴 경우 스테이터스 관리가 중요하게 됩니다. 이런 상황에서 스테이터스 다이어그램은 중요한 도식도가 됩니다. mermaid를 통해서라면 스테이터스 다이어그램 또한 수도코드를 통해서 작성할 수 있습니다. 혹시 상태 다이어그램에 대해서 좀 더 아시고 싶으신 분들은 [UML] 상태 머신 다이어그램 이해하기를 참고해주시 바랍니다.

stateDiagram
    state "구매 시도" as purchase_request
    state "구매 진행" as purhcase_process
    state "취소" as cancel
    state "완료" as complete
    state "실패" as fail
    state if_state <<choice>>

    [*] --> purchase_request
    purchase_request --> purhcase_process
    purchase_request --> cancel
    purhcase_process --> if_state
    if_state --> complete: 결제 성공
    if_state --> fail : 결제 실패
    complete --> [*]
    fail --> [*]

상태 다이어그램 선언

mermaid에서 스테이터스 다이어그램을 사용하겠다고 선언하는 방법은 아래와 같습니다. 여타 다이어그램과 마찬가지로 가장 위에 stateDiagram을 적으면 됩니다. 플로우차트처럼 옵션은 별도로 존재하지 않으며 방향은 항상 위에서 아래를 가집니다.

stateDiagram

다이어그램 구성 요소

선언하는 방법을 알아보았으니 이제 다이어그램에서 사용할 수 있는 요소들에 대해서 알아보도록 하겠습니다.

상태(States)

상태 다이어그램에서 각 상태를 나타내는 노드를 한번 그려보도록 하겠습니다. 그리는 방법은 3가지 방법이 있습니다. 3가지 방법중 본인에게 익숙해면 좋을 선언 방법을 하나 기억해서 사용하면 좋을것 같습니다.

• 상태 이름만 선언
• 상태 이름과 설명을 선언 2가지

stateDiagram
    s2 # 상태 이름만 선언, 이름과 설명이 동일
    state "상태를 기술" as s3 # 상태 이름과 상태를 별도로 선언하는 방법 1
    s4 : 상태를 기술2 # 상태 이름과 상태를 별도로 선언하는 방법 2

전이(Transitions)

각 상태에서 변화를 주는 것도 스테이터스 다이어그램에서는 필수적인 요소입니다. 이러한 요소는 타 mermaid와 동일하게 화살표를 통해서 구현하게 됩니다. 1 : 1으로 상태를 전이할 수 있습니다. 또한 1 : N 으로도 전이할 수 있습니다. 그리고 전이에 대해서도 별도의 Note를 추가할 수 있습니다. 사용방법은 아래와 같습니다.

stateDiagram
    s2
    state "상태를 기술" as s3
    s4 : 상태를 기술2
    s5 : 상태를 기술3

    s2 --> s3
    s3 --> s4: 기본적인 경우
    s3 --> s5: 특수한 경우

시작과 끝(Start and End)

상태 다이어그램에서는 상태의 시작과 끝이 존재합니다. 상태 전이를 표현할때 상태 프로세스의 시작꽈 끝을 표현하는 것입니다. 이러한 표현은 [*]를 통하여 할 수 있습니다. 전이 화살표를 기준으로 앞에 있으면 시작으로 보며 뒤에 있으면 끝으로 표시합니다. 사용방법은 아래와 같습니다.

stateDiagram
    [*] --> s1
    s1 --> [*]

선택(Choice)

상태 다이어그램도 조건에 따라서 상태가 변경되는 경우가 있습니다. 이러한 경우에 대해서 대응하기 위해서 mermaid의 상태 다이어그램에서도 Choice를 활용하면 가능합니다. 사용방법은 아래와 같습니다. <>를 통해서 선언합니다. 그리고 해당 선언(아래의 경우 if_state)에 대해서 전이를 적절하게 맞춰주면 가능합니다. 조건에 대한 기술은 전이의 note 처럼 동일하게 기술하시면 됩니다.

stateDiagram
    state if_state <<choice>>
    False
    True

    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0

포크와 조인(Forks And Join)

상태 다이어그램에서 추가적으로 지원하는 부분으로 Fork와 Join이 있습니다. 이것은 하나의 상태를 두개로 나눈다음에 특정 조건이 만족하면 두 상태를 다시 하나로 합치는 과정을 나타냅니다. 사용방법은 선택(Choice)과 동일하게 진행할 수 있습니다.

stateDiagram-v2
state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]

마무리

오늘은 mermaid를 이용하여 status 다이어그램을 작성하는 방법을 알아보았습니다.

감사합니다.

참조

mermaid_stateDiagram