PlantUML - 코드로 시퀀스다이어그램 그리기

    PlanutUML 작성 툴

    PlantUML을 작성하기 위한 툴은 여러가지가 있다. Boost Note를 쓰면 별도의 설정을 하지 않아도 곧바로 문서를 작성하면서 코드로 시퀀스다이어그램을 그릴 수 있다. 만약, VS Code를 사용한다면 다음의 포스트를 참고하여 설정하면 된다.

     

    VS Code에서 PlantUML 사용설정

    Boost Note(무료)에서는 기본적으로 제공되는 기능인데, Visual Studio Code에서도 비슷한 설정이 있지 않을까 싶어 설정 하는 방법을 정리한다. 목표는 Boost Note에서 작성하던 방법과 동일하게, Markdown

    luran.me

     

    기본 문법

    PlantUML을 사용하여 시퀀스다이어그램을 작성하기 위한 주요 규칙을 살펴본다.

    문서 작성 규칙

    @startuml
    
    작성본문
    
    @enduml

    의 형식으로 작성하면 된다. 만약, VS Code에 extension을 사용하여, Markdown Preview Extended까지 사용했다면,

    ```plantuml
    @startuml
    
    작성본문
    
    @enduml
    ```

    과 같이 바깥에 한번 더 감싸줘야 한다. 혹은, @startuml ~ @enduml 부분은 생략 가능하다. 그러나, VS Code로부터 다른 에디터로 이관할 가능성도 있으므로, 개인적으로는 해당 애노테이션은 유지하는 것이 낫지 않을까 생각한다.

     

    기본 표현

    작성 본문에 들어가는 표현은 기본적으로 다음과 같이 작성한다.

    • A -> B: A에서 B로 요청
    • A <-- B: B에서 A로 응답 (return 문으로 대체 가능)
    • A -> A: A 자신에게 요청

    이렇게만 작성하면, A에서 B로 이어지는 실선 화살표와, B에서 A로 이어지는 점선 화살표를 확인할 수 있을 것이다. 콜론(:) 뒤에 기록한 글씨는 화살표 위에 출력할 메시지의 내용이다.

    ```plantuml
    A -> B: request1
    return: response1
    
    A -> B: request2
    A <--B : response2
    ```

     

    참여자(participant)

    화살표를 보내거나 받는 요소를 참여자(participant)라고 한다. 별다른 설정을 하지 않는다면, 위의 문서에 작성한 순서대로 좌에서 우로 참여자들이 배치가 될 것이다. 그러나, 막상 그림을 그려놓고 보면, 노출되는 순서를 강제로 제어하고 싶을 수 있다. 참여자와 관련된 설정은 다음과 같다.

    • 종류: participant, actor, boundary, control, entity, database, collections, queue
      ```plantuml
      participant participant
      actor actor
      boundary boundary
      control control
      entity entity
      database db
      collections collections
      queue queue
      ```
    • 노출 순서 변경: order N 의 형식으로 표기한다. N에 숫자를 기록하는데, 작을 수록 앞에 노출된다.
      위에 노출한 요소들에 임의의 숫자들을 아래와 같이 부여해 보면 노출되는 순서가 달라진다.
    • ```plantuml participant participant order 50 actor actor order 30 boundary boundary order 20 control control order 15 entity entity order 45 database db order 5 collections collections order 70 queue queue order 35 ```
    • 공백 혹은 특수문자 포함시: 따옴표로 묶어주자.
    • ```plantuml participant "have a space" participant "have_special_chars()" ```
    • 별칭 지정: 참여자의 원본 이름이 너무 길거나 공백문자가 포함되어 따옴표로 묶어줘야 한다면 이후 문서 작성이 힘들다. 별칭을 지정하여 문서작성의효율을 높이자. 참여자 as X 와 같은 식으로 뒤에 as X를 붙여주면, X로 별칭을 지정할 수 있게 된다. 이후 문서에서는 원본 이름대신 X를 대신 사용할 수 있다.

    <별칭 지정 전>

    ```plantuml
    participant "have a space"
    participant "have_special_chars()"
    
    "have a space" -> "have_special_chars()": too long to type
    ```

    <별칭 지정 후>

    ```plantuml
    participant "have a space" as A
    participant "have_special_chars()" as B
    
    A -> B: it's much better
    ```

     

    번호매기기

    autonumber라고 써주면, 그 지점부터 기본적으로 1씩 증가하면서 숫자가 메시지 앞에 표시된다. 사실 시퀀스다이어그램에서의 순서는 위에서 아래로 흐른다고 암묵적으로 알고 있기에 이 순서가 뭐가 의미가 있겠냐 싶겠지만, 발표를 해보면 알게된다. 숫자의 중요성은 다른 사람앞에서 설명하는 순간 깨닫게 될 것이다. autonumber X Y라고 표시하면, 시작 번호와 증가값을 줄 수도 있다. autonumber를 다시 쓰면, 그 시점부터 번호가 다시 매겨지는 효과가 있다. 숫자를 임의의 숫자부터 다시 시작하고 싶은 부분에 다시 autonumber를 표기하면 된다.

    ```plantuml
    autonumber 10 10
    A -> B: request A->B
    B -> C: request B->C
    B <-- C: response B<-C
    ... do something ...
    autonumber 100 10
    B -> C: request B->C
    B <-- C: response B<-C
    A <-- B: response A<-B
    ```

    위의 예에서는, 10부터 시작하고 10씩 크기를 증가시켰다. 이후 중간에 do something이라고 표현된 부분을 기점으로 번호를 점프시켜서 다시 증가시키도록 작성하였다.

     

    그룹으로 묶기

    • alt/else: if~else로 로직의 분리를 표현
    • loop: 반복문 표현
    • group: 임의의 그룹을 표현
    ```plantuml
    autonumber 10 10
    A -> B: request A->B
    alt it's sunny
        loop have fun till sunset
            B -> C: request B->C
            B <-- C: response B<-C
        end
    else it's not suuny
        group plan B
            B -> C: request B->C
        end
        B <-- C: response B<-C
    end    
    A <-- B: response A<-B
    ```


    위와 같이, alt/else와 group, loop 등을 활용하여, 논리적인 그룹을 적절하게 표현할 수 있다.

     

    노트 추가하기

    사실 그림만으로 다른 사람들을 이해시킬 수 있어야 하는데, 어쩔 수 없이 설명을 남겨야 하거나 간소화 해야 한다면 노트를 활용하자.

    • note left: 왼쪽에 노트 붙이기
    • note right: 오른쪽에 노트 붙이기
    • note left of A: A의 왼쪽에 노트 붙이기
    • note right of A: A의 오른쪽에 노트 붙이기
    • note over A: A의 선위에 노트 붙이기
    • note across: 전체 참여자에 걸쳐 노트 붙이기

    노트를 적을 때는,

    • note 위치옵션: 내용
    • note 위치옵션: 내용\n줄바꿔서기록
    • note 위치옵션
      내용1
      내용2
      end note
      의 형태로 작성 가능하다.
    • ```plantuml note left of A: show the message on the left A -> B: request A->B note right of B #lightgreen : show the message in a color on the right B -> C: request B->C note over C: show over message B <-- C: response B<-C note right of C: show message\nwith newline B -> C: request B->C note across: show message across B <-- C: response B<-C note right show message in multiple lines end note A <-- B: response A<-B ```

     

    구분자/지연을 통한 분리 표시

    ==메시지==를 사용하여 논리적인 구분을 할 수 있고, ...메시지... 형태로 일정 시간이 경과했음을 나타내는 표시도 가능하다.

    ```plantuml
    == Initialization ==
    A -> B: request A->B
    B -> C: request B->C
    B <-- C: response B<-C
    ... do something ...
    B -> C: request B->C
    B <-- C: response B<-C
    == Wrap up ==
    A <-- B: response A<-B
    ```

     

    life cycle 표시

    activate A ~ deactivate A 명령어로 life cycle을 표시할 수 있다.

    ```plantuml
    A -> B: request A->B
    activate B
    B -> C: request B->C
    B <-- C: response B<-C
    deactivate B
    B -> C: request B->C
    activate C
    C -> C: process
    B <-- C: response B<-C
    deactivate 
    A <-- B: response A<-B
    ```

     

    참고

    보다 많은 종류의 다이어그램과 그 사용법은 아래 사이트를 참조하자.

    plantuml.com/ko/

     

    간단한 텍스트를 이용하여 멋진 UML 다이어그램을 만들 수 있는 오픈소스 도구입니다.

    간단한 텍스트를 이용하여 쉽게 멋진 UML 다이어그램을 만들 수 있으며, 다양한 종류의 다이어그램을 제공하고 있습니다. 또한, 생성된 다이어그램을 PNG, LaTeX, EPS, SVG 와 같은 이미지로 변환할 수

    plantuml.com

     

    댓글(0)

    Designed by JB FACTORY