PlantUML - VSCode에서 UML을 그려보자

이번엔 ERD Editor에 이어, VSCode에서 UML을 그리는 Extension인 PlantUML을 사용해보자

UML이란?

• UML : Unified Modeling Language, 소프트웨어 시스템을 시각적으로 모델링하기 위해 표준화된 언어
• 시스템 아키텍처의 설계 및 구현을 명확하게 표현하고,
  개발자를 포함한 이해관계자들 간의 원활한 의사소통을 목적으로 사용한다.
• Class, Object, Usecase, Sequence, Activity Diagram 등이 있다.

---

PlantUML

PlantUML은 이러한 UML을 별도의 툴 없이 VSCode 상에서 편리하게 그리기 위한 Extension으로, 별도의 문법을 가지고 있으며
문법에 맞추어 작성하면 Alt+D로 여는 Viewer에서 실시간으로 작업 과정을 확인할 수 있다.

---

Setting

1. 일단, PlantUML은 Java 기반으로 동작하기 때문에, Java설치가 필수적이다.

2. Java를 설치했다면, Graphviz를 별도로 설치해야한다.

실시간으로 ERD를 보여주는 Viewer의 역할을 한다.

2-1. 설치 후엔 환경변수 설정이 필수적이다.

• 사용자 변수 > Path
  
• 시스템 변수 > Path
  

3. VSCode에서 PlantUML을 검색해 Extension을 설치한다.

4. VScode 설정 > Plant을 검색해 설정을 확인한다.

Plantuml : Render 설정을 Local 혹은 PlantUMLServer로 설정한다.

• Local : 방금 설치한 Graphviz를 통해 직접 렌더링
• PlantUMLServer : 서버(네트워크)를 통해 간접 렌더링 후 결과를 가져온다.

5. 파일 생성

• 파일 형식은 filename.puml 혹은 filename.plantuml로 지정해 파일을 생성한다.

6. 문법에 맞추어 UML 작성

기본적으로 @startuml으로 시작해 @enduml로 끝난다.

• 각 다이어그램마다 문법이 다르니, 그때그때 AI를 참고하자
• 공통 문법 요소

1. 주석 : ' 주석내용
2. 제목 : title 다이어그램 제목
3. 캡션 : caption 다이어그램 설명
4. 방향 : left to right direction
5. 테마 : skinparam backgroundColor #EEEBDC, skinparam handwritten true
6. 페이지 분리 : newpage (긴 다이어그램을 여러 이미지로 분리)

@startuml
/' (주석)
  여기에 코드 작성
'/
@enduml

7. 파일 내보내기

Ctrl + Shift + P를 통해 Command Palette를 열고,

Export Current Diagram을 눌러 png, svg, pdf 등 다양한 형식으로 해당 파일을 내보낼 수 있다.

---

예시

• 로그인 Sequence Diagram

@startuml
actor User
participant "Web Server" as WS
database Database

User -> WS: 로그인 요청 (ID, PW)
activate WS
WS -> Database: 사용자 정보 조회
activate Database
Database --> WS: 사용자 정보
deactivate Database
alt 인증 성공
    WS --> User: 로그인 성공
else 인증 실패
    WS --> User: 로그인 실패
end
deactivate WS
@enduml

• 자동차 Class Diagram

@startuml
abstract class Vehicle {
  # String model
  + {abstract} start(): void
  + stop(): void
}

class Car extends Vehicle {
  - int numberOfDoors
  + start(): void
  + openTrunk(): void
}

class Engine {
  + ignite(): void
}

interface Drivable {
  + drive(): void
}

Car "1" -- "1" Engine : has a >
Car ..|> Drivable

note right of Car::start
  엔진을 시동합니다.
end note
@enduml

---

장점

1. 사용해보니 문법이 직관적이라, 러닝커브가 낮다.
2. 코드를 작성하면서 실시간으로 다이어그램을 보여줘서 편리하다.
3. Git과 연동해서 사용하는 경우가 대부분이라, 형상관리 및 팀원 간 공유가 편하다.
4. File Export가 상당히 괜찮다. 빠르고, 직관적이면서 다양한 형식을 지원한다.
5. LLM을 활용해서 그리기 굉장히 편리하다.

---

단점

1. draw.io와 같은 기존 툴들과 달리 내가 원하는 위치에 배치하기가 좀 어렵다.
2. 다이어그램이 복잡할 수록 코드가 당연하게도 길어지고, 가독성이 감소한다.
3. 공식문서(사이트)가 존재하긴 하나, 그닥 userfriendly 하진 않다.
   ( https://plantuml.com/ko/ )

---

마치며...

정말 하루가 멀다하고 다양한 툴들이 튀어나온다.
당연하게도 모든 툴을 열심히 써볼 필요는 없다고 생각한다.
내 입맛에 맞는 툴을 쓰고, 결과물에 만족한다면 빠르게 배워나가는 것이 더 중요할 것이다.

툴이 좋아질 수록, 사용하는 당사자가 멍청해지는 역설에 빠질 수 있다.
당연하게도, LLM을 통해 만들어 낸 PlantUML을 단순히 사용하는 것이 아닌,
해당 내용을 확인하고 이상 내역을 찾아가는 것이 더 안정된 시스템을 설계하는 첫번째 방법일 것이다.