기타

PlantUML을 활용한 Sequence Diagram 작성법

도우 2025. 3. 10. 11:07

UML 다이어그램 소개

UML(Unified Modeling Lanuage)은 시스템의 설계를 시각적으로 표현하기 위한 표준화된 모델링 언어이다. 소프트웨어 개발 과정에서 시스템의 구조와 동작을 명확하게 표현하고 의사소통을 돕는 역할을 한다.

UML 다이어그램은 크게 구조적 다이어그램(Structural Diagram)과 행위적 다이어그램(Behavioral Diagram)으로 나뉜다. 여기서 서술할 시퀀스 다이어그램(Sequence Diagram)은 행위적 다이어그램에 속하며, 객체 간의 상호작용을 시간 순서대로 보여주는 다이어그램이다.

시퀀스 다이어그램의 특징

시퀀스 다이어그램은 객체 간의 상호작용을 시간 순서대로 표현하는 UML 다이어그램이다. 주요 특징은 다음과 같다.

수직 축 : 시간의 흐름(위에서 아래로)을 나타낸다.
수평 축 : 다이어그램에 참여하는 객체를 나타낸다.
라이프라인(Lifeline) : 각 객체의 수명을 나타내는 수직선이다.
메시지(Message) : 객체 간에 전송되는 메시지를 화살표로 표현한다.
활성화 상자(Activation Box) : 객체가 작업을 수행 중임을 나타내는 직사각형이다.

시퀀스 다이어그램은 다음과 같은 경우에 유용하다.

객체 간의 상호작용 순서를 명확히 할 때
시스템의 동적 동작을 이해할 때
시스템의 아키텍처를 설계할 때
복잡한 시나리오를 단순화하여 표현할 때

VS COde에서 PlantUML 설정 및 사용 방법

PlantUML은 UML 다이어그램을 코드 기반으로 작성할 수 있도록 지원하는 도구이다.
PlantUML을 실행하려면 Java 및 Graphviz가 필요하다. 아래의 방법으로 설치할 수 있다.

ALT + D 또는 option + D를 통해서 실시간으로 다이어그램을 미리보기가 가능하다.

Java 설치 확인

java -version

Graphviz 설치

Windows (Chocolatey 사용)

choco install graphviz

Mac (Homebrew 사용)

brew install graphviz

Linux (Ubuntu/Debian)

sudo apt install graphviz

설치 후, dot 명령어가 정상적으로 실행되는지 확인한다.

dot -version

이후 VSCode의 마켓플레이스에서 PlantUML을 검색하여 설치한다.
새로운 파일을 생성하여 바로 다이어그램을 작성할 수 있으며, 확장자 명은 다음과 같다.

.wsd, .pu, .plantuml, .iuml

PlantUML 다이어그램 작성 문법

기본 구조

PlantUML에서 모든 다이어그램은 @startuml로 시작하고 @enduml로 끝난다.

@startuml
// 다이어그램 작성
@enduml

시퀀스 다이어그램 문법

1. 참여자 (Participant) 정의

참여자는 다이어그램에 나타나는 객체, 액터, 경계 등을 의미한다.

@startuml
' 기본 참여자 정의
participant "사용자" as User
actor "관리자" as Admin
boundary "UI" as UI
contrl "컨트롤러" as Controller
entity "엔티티" as Entity
database "데이터베이스" as DB
@enduml

2. 메시지(Message) 정의

객체 간의 상호작용은 화살표로 표현한다.

@startuml
participant A
participant B

' 기본 메시지
A -> B: 메시지 전송

' 응답 메시지
B --> B : 응답 메시지

' 비동기 메시지
A ->> B : 비동기 메시지

' 자기 자신에게 보내는 메시지
A -> A : 자기 호출
@enduml

메시지 화살표 종류 :

-> : 일반 메시지
--> : 응답 메시지(점선)
->> : 비동기 메시지
->x : 메시지 손실
->o : 메시지 생성

3. 활성화 (Activation)

객체가 활성화 되어 있음을 나타내는 박스이다.

시퀀스 다이어그램에서 "활성화"란 객체나 참여자가 실제로 작업을 수행하고 있는 상태를 의미한다.
활성화 상태는 다이어그램에서 참여자의 라이프라인(수직선) 위에 직사각형 박스로 표시된다

활성화가 의미하는 것 :
- 실행 컨텍스트 : 해당 객체의 메서드나 기능이 현재 실행중임을 나타낸다.
- 작업 수행 기간 : 직사각형의 세로 길이는 해당 객체가 작업을 수행하는 시간을 의미한다.
- 리소스 사용 : 시스템 관점에서는 해당 객체가 CPU 시간이나 메모리 등의 리소스를 사용 중임을 나타낸다.

@startuml
participant A
participant B

A -> B: 요청
activate B
B --> A: 응답
deactivate B

' 간단한 표현법
A -> B: 요청
activate B
B -> B: 내부 처리
B --> A: 응답
deactivate B

' 더 간단한 표현법
A -> B ++: 요청
B --> A --: 응답
@enduml

4. 노트 (Note)

추가 설명이 필요한 경우 노트를 사용한다.

@startuml
participant A
participant B

' 한 참여자에 대한 노트
note left of A: 왼쪽 노트
note right of A: 오른쪽 노트

' 참여자 사이의 노트
A -> B: 메시지
note over A, B: 두 참여자에 걸친 노트
@enduml

5. 제어구조

시퀀스 다이어그램에서 조건문이나 반복문을 표현할 수 있다.

@startuml
participant A
participant B

' 조건문
A -> B: 요청
alt 성공한 경우
    B --> A: 성공 응답
else 실패한 경우
    B --> A: 실패 응답
end

' 반복문
loop 3번 반복
    A -> B: 요청
    B --> A: 응답
end

' 선택적 실행
opt 조건이 참인 경우
    A -> B: 선택적 요청
    B --> A: 응답
end
@enduml

6. 참조 (Reference)

다른 다이어그램이나 상호작용을 참조할 때 사용한다.

@startuml
participant A
participant B

ref over A, B : 다른 시퀀스 다이어그램 참조

@enduml

7. 구분선 (Divider)

시퀀스 다이어그램을 논리적 섹션으로 나눌 때 사용한다.

@startuml
participant A
participant B

A -> B : 첫 번째 단계
== 중간 단계 ==
A -> B : 두 번째 단계

@enduml

8. 생명선 지연 (Delay)

시간 경과를 표현할 때 사용한다.

@startuml
participant A
participant B

A -> B: 요청
...5분 후...
B --> A: 응답
@enduml

9. 스타일링과 색상

다이어그램 요소의 스타일과 색상을 지정할 수 있다.

@startuml
' 배경 색상 설정
skinparam backgroundColor #EEEEEE

' 참여자 스타일 지정
participant "사용자" as User #Red
participant "시스템" as System #Blue

' 화살표 색상 지정
User -[#Green]> System: 요청
System --[#Purple]> User: 응답

' 노트 스타일 지정
note left of User #Yellow: 노트 내용
@enduml

시퀀스 다이어그램 예제

1. 일반적인 로그인 프로세스

@startuml
title 로그인 프로세스

actor "사용자" as User
boundary "로그인 화면" as UI
control "인증 컨트롤러" as Auth
entity "사용자 엔티티" as UserEntity
database "데이터베이스" as DB

User -> UI: 1. 로그인 정보 입력
activate UI

UI -> Auth: 2. 로그인 요청
activate Auth

Auth -> UserEntity: 3. 사용자 정보 조회 요청
activate UserEntity

UserEntity -> DB: 4. 사용자 데이터 쿼리
activate DB

DB --> UserEntity: 5. 사용자 데이터 반환
deactivate DB

UserEntity --> Auth: 6. 사용자 정보 반환
deactivate UserEntity

Auth -> Auth: 7. 비밀번호 검증

alt 로그인 성공
    Auth --> UI: 8a. 로그인 성공 응답
    UI --> User: 9a. 메인 화면으로 이동
else 로그인 실패
    Auth --> UI: 8b. 로그인 실패 응답
    UI --> User: 9b. 오류 메시지 표시
end

deactivate Auth
deactivate UI

@enduml

2. 사용자 인증 및 데이터 로딩 프로세스

@startuml

title 사용자 인증 및 데이터 로딩 프로세스

participant "사용자" as User
participant "리액트 UI" as UI
participant "API 클라이언트" as APIClient
participant "상태 관리 스토어" as Store
participant "백엔드 API" as BackendAPI

User -> UI : 1.사용자 로그인 요청
activate UI

UI -> APIClient : 2.로그인 API 호출
activate APIClient

APIClient -> BackendAPI : 3.로그인 요청 전송
activate BackendAPI
note right #LightGoldenRodYellow : POST /api/auth/login

BackendAPI --> APIClient : 4.JWT 토큰 반환
deactivate BackendAPI

APIClient -> Store : 5.인증 정보 저장
activate Store

Store --> APIClient : 6.저장 완료
deactivate Store  

APIClient --> UI : 7.로그인 결과 전달
deactivate APIClient

UI --> User : 8.로그인 성공 표시 및 대시보드로 이동
deactivate UI  

User -> UI : 9.대시보드 페이지 접속
activate UI

UI -> APIClient : 10.데이터 요청
activate APIClient

APIClient -> Store : 11.JWT 가져오기
activate Store

Store --> APIClient : 12.토큰 제공
deactivate Store

APIClient -> BackendAPI : 13.인증된 API 요청 전송
activate BackendAPI
note right #LightGoldenRodYellow : GET /api/dashboard \n Authorization: Bearer {token}

alt 토큰 유효함
    BackendAPI --> APIClient : 14a.대시보드 데이터 반환
else 토큰 만료됨
BackendAPI --> APIClient : 14b.401 Unauthorized
    APIClient -> BackendAPI : 15.토큰 갱신 요청
    BackendAPI --> APIClient : 16.새 토큰 발급
    APIClient -> Store : 17.새 토큰 저장
    APIClient -> BackendAPI : 18.재요청
    BackendAPI --> APIClient : 19.대시보드 데이터 반환
end
deactivate BackendAPI

APIClient -> Store : 20.대시보드 데이터 저장
activate Store  

Store --> APIClient : 21.저장 완료
deactivate Store

APIClient --> UI : 22. 데이터 전달
deactivate APIClient

UI --> User : 23.대시보드 화면 렌더랑
deactivate UI

@enduml

'기타' 카테고리의 다른 글

Vs Code에서 Flutter가 JDK를 제대로 인식하지 못할 경우 (2)	2024.12.10
README.md 이미지 사이즈 조절하기 - 리사이징 (0)	2024.02.29

현재글PlantUML을 활용한 Sequence Diagram 작성법

JUST DO IT

250x250

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

공부 기록장

PlantUML을 활용한 Sequence Diagram 작성법

UML 다이어그램 소개

시퀀스 다이어그램의 특징

VS COde에서 PlantUML 설정 및 사용 방법

Java 설치 확인

Graphviz 설치

PlantUML 다이어그램 작성 문법

기본 구조

시퀀스 다이어그램 문법

1. 참여자 (Participant) 정의

2. 메시지(Message) 정의

3. 활성화 (Activation)

4. 노트 (Note)

5. 제어구조

6. 참조 (Reference)

7. 구분선 (Divider)

8. 생명선 지연 (Delay)

9. 스타일링과 색상

시퀀스 다이어그램 예제

1. 일반적인 로그인 프로세스

2. 사용자 인증 및 데이터 로딩 프로세스

'기타' 카테고리의 다른 글

'기타'의 다른글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

2025. 06
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

PlantUML을 활용한 Sequence Diagram 작성법

UML 다이어그램 소개

시퀀스 다이어그램의 특징

VS COde에서 PlantUML 설정 및 사용 방법

Java 설치 확인

Graphviz 설치

PlantUML 다이어그램 작성 문법

기본 구조

시퀀스 다이어그램 문법

1. 참여자 (Participant) 정의

2. 메시지(Message) 정의

3. 활성화 (Activation)

4. 노트 (Note)

5. 제어구조

6. 참조 (Reference)

7. 구분선 (Divider)

8. 생명선 지연 (Delay)

9. 스타일링과 색상

시퀀스 다이어그램 예제

1. 일반적인 로그인 프로세스

2. 사용자 인증 및 데이터 로딩 프로세스

'기타' 카테고리의 다른 글

'기타'의 다른글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역