PlantUML 을 이용하여 시퀀스 다이어그램 그려보기

안녕하세요 정말 오랜만에 블로그 글을 쓰네요 ㅎㅎ

최근에 일들이 많이 바빠서 블로그에 신경을 많이 못쓴 게 많이 아쉽습니다 ㅠㅠ

 

오늘은 최근에 프로젝트에 전반적인 구조 및 설계를 보는것에 대해 관심이 가지게 되었는데 설계를 하려면 여러 가지 다이어그램을 그리 줄 알고 잘 볼 수 있어야 될 거 같습니다

 

그래서 PlantUML을 통해 시퀀스 다이어그램을 만드는 방법에 대해서 작성해 보겠습니다

 

PlantUML

PlantUML 은 텍스트 기반으로 다이어 그램을 생성할 수 있는 오픈소스 도구입니다

사용자는 DSL(Domain Specific Language)을 활용하여 다양한 UML(Unified Modeling Language) 다이어그램을 설명하고 PlantYML 은 이를 그래픽 다이어그램으로 변환합니다 PlantUML은 시퀀스, 클래스, 객체, 컴포넌트 등 다양한 다이어그램을 그릴 수 있습니다

 

즉 다이어그램을 일일이 손으로 그리는 게 아닌 사용자가 코드로 설명을 하면 PlantUML은 그 코드를 해석해 그림으로 그려줍니다

예를 들면 아래와 같이 코드를 작성하게 되면 그에 따른 다이어그램을 그려줍니다

@startuml
A -> B: Request
B --> A: Response
@enduml

 

 

사용 방법

우선 PlantUML을 사용하기 위해서는 Java(JRE)를 설치해야 합니다

 

Java(JRE) 설치

아래 오라클 페이지에 들어가서 JRE을 설치를 진행합니다

https://www.oracle.com/kr/java/technologies/downloads/

Download the Latest Java LTS Free

 

Graphviz 설치

Graphviz 란 그래픽 시각화 도구인데 PlantUML에 일부 다이어그램에서는 Graphivz가 필요하기 때문에 같이 설치를 진행합니다

brew install graphviz

 

Vscode PlantUML 확장 프로그램 설치

vscode에서 PlantUML의 확장프로그램을 지원합니다 확장 프로그램에서 PlantUML을 검색하고 설치합니다

 

간단한 시퀀스 다이어그램 만들어 보기

이제 간단한 다이어그램을 만들어 보겠습니다

PlantUML은 확장자가. puml입니다 따라서 test.puml을 만들고 간단하게 작성해 보겠습니다

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml

해당 코드를 간단하게 보면 @startuml로 uml문법을 시작한다고 알려주고

Alice -> Bob으로 Hello라는 메시지를 전송하고 Bob 에서 Alice 로 Hi 라는 비동기 메세지를 전송합니다

이후 @enduml로 uml 문법이 끝난다고 알려줍니다

 

이렇게 작성된 코드를 alt(option) + D를 해주시면 아래와 같은 다이어그램이 완성이 됩니다

 

다음으로는 기본적인 문법들에 대해서 알아보도록 하겠습니다

기본 문법

기본 메시지 전송

Alice로부터 Bob에게 메시지를 전송합니다

Alice -> Bob: Default Message

 

비동기 메세지 전송

Alice 로부터 Bob에게 비동기적으로 메세지를 전송합니다

Alice --> Bob : Async Message

 

반환 메세지

Bob으로부터 Alice에게 반환 메시지를 전송합니다

Alice <- Bob : default return

 

비동기 반환 메세지

Bob 으로 부터 Alice에게 비동기적으로 반환 메세지를 전송합니다

Alice <-- Bob: async return

 

활동 시작과 종료

Bob의 활동(또는 작업 수행)을 시작하고 종료합니다

activate Bob
deactivate Bob

 

병렬 처리

두 메시지가 병렬적으로 처리됩니다

Alice -> Bob: message
|||
Alice -> Bob: message2

 

조건문

조건에 따른 메시지를 전송합니다

alt con1
    Alice -> Bob: message
else con2
    Alice -> Bob: message2
end

 

루프

메세지를 여러 번 반복해서 전송합니다

loop 3 times
    Alice -> Bob: loop message
end

 

선택

특정 조건이 충족될 때만 메시지를 전송합니다

opt con
    Alice -> Bob: opt message
end

 

참여자 그룹

특정 참여자들을 그룹으로 묶어서 표현합니다

box A "group"
    Alice -> Bob : group message
end box

 

참여자 타입 설정 및 별칭 지정

참여자의 타입을 지정하고 별칭을 할당합니다

participant A as "Alice"
actor B as "Bob"

 

해당 기본문법은 기본적으로 시퀀스 다이어그램에서 많이 사용하며 그 외 다이어그램에는 또 다른 문법들이 존재합니다

 

그러면 이러한 문법들을 토대로 간단한 예제를 한번 풀어보도록 하겠습니다

 

온라인 쇼핑몰 주문시스템 시퀀스 다이어그램 작성해 보기

요구사항

• 고객은 웹사이트를 통해 상품을 선택합니다.
• 선택한 상품은 장바구니에 담깁니다.
• 고객은 장바구니에서 주문 버튼을 클릭하여 주문을 합니다.
• 시스템은 주문 정보를 데이터베이스에 저장하고, 결제 시스템에 결제 요청을 합니다.
• 결제가 성공하면, 고객에게 주문 확인 메시지를 전송합니다.

해당 요구사항대로 작성한 시퀀스 다이어그램입니다

@startuml
actor User
participant Website
participant Server
participant DB
participant OrderSystem as Order


User -> Website: Open Website
Website -> Server : request list api
Server -> DB : querys item list
DB -> Server : query result send
Server -> Website : response product list
Website -> User: rendering product list


User -> Website: Select prdouct from cart
Website -> Server: Request Prodcut from cart
Server -> DB: insert to user product to cart
Server -> DB: select from current user cart list
DB -> Server : return current user cart list
Server -> Website: response from current user cart list
Website -> User : rendering current user cart list


User -> Website : User click to order button
Website -> Server: Request user order
Server -> DB: Insert to order infomation from DB
|||
activate Order
Server -> Order : ordering from user order
Order -> Server : Order result return
deactivate Order
Server -> Website: Request order result
Website -> User: Rendering order result

@enduml

 

제가 작성한 시퀀스 다이어그램 순서입니다

1. 웹 사이트 방문

• 사용자가 웹사이트를 방문합니다
• 웹 사이트는 서버에게 상품 목록 API를 요청합니다
• 서버는 데이터베이스에게 상품 목록을 조회하라는 쿼리를 보냅니다
• 데이터베이스는 쿼리 결과를 서버에 반환합니다
• 서버는 상풍 목록의 응답을 웹사이트에 보냅니다
• 웹 사이트는 사용자에게 상품 목록을 렌더링 하여 보여줍니다

 

2. 장바구니에 상품 추가

• 사용자가 웹사이트에서 특정 상품을 장바구니에 추가를 선택합니다
• 웹사이트는 해당 상품을 장바구니에 추가하는 요청을 서버에 보냅니다
• 서버는 데이터베이스에 사용자의 장바구니에 해당 상품을 추가하는 쿼리를 실행합니다
• 이후 서버는 현재 사용자의 장바구니 목록을 데이터베이스에 조회합니다
• 데이터베이스는 현재 사용자의 장바구니의 목록을 서버에 반환합니다
• 서버는 조회된 장바구니 목록을 웹사이트에 반환합니다
• 웹 사이트는 사용자에게 장바구니 목록을 렌더링하여 보내줍니다

3. 주문

• 사용자가 웹사이트에서 주문 버튼을 클릭합니다
• 웹 사이트는 사용자의 주묵을 처리하라는 요청을 서버에 보냅니다
• 서버는 주문 정보를 데이텁이스에 저장합니다
• 서버는 주문시스템에 주문 처리를 요청합니다
• 주문 시스템은 주문 처리 결과를 서버에 반환합니다
• 서버는 주문 결과를 웹사이트에 반환합니다
• 웹 사이트는 사용자에게 주문 결과를 렌더링 하여 보내줍니다

 

여기까지가 제가 작성한 온라인 쇼핑몰 시스템에 시퀀스 다이어그램입니다 처음작성해 본 거라 잘 작성한 거 같지는 않지만 대략적으로 어떻게 작성해야 되는지 감은 잡힌 거 같습니다

 

다음에는 저는.. 프론트엔드개발자이니깐 프론트엔드 개발자에게 필요한 컴포넌트 트리(컴포넌트 다이어그램)를 한번 그려보도록 하겠습니다