diagram 그리는 가장 쉬운 방법, 코드로 그리는 uml plantuml

학교를 다녔을 때보다, 회사에서는 설계를 위해서 코드 분석을 위해서 diagram을 그릴 일들이 많아졌다.
‘왜 학교에서 이런걸 가르쳤나?’를 깨닫기도 하고.

내가 처음 배치받은 부서는 flow가 굉장히 복잡한 부서였다.
sequence diagram으로 flow를 그리기 시작했고 편의성을 위해 여러 툴들을 찾았다.

그러다 마지막에 만난 툴이 바로 plantuml.
나는 팀을 옮기고 파트 내 세미나에서 plantuml을 소개했고 반응이 좋아서 그룹에서도 한 차례 더 세미나를 가졌다.
2년이 지난 지금 우리 그룹의 대부분의 diagram은 plantuml로 그려지고 있다.

기존의 diagram 그리기

기존에 diagram을 그리는 방법은 다들 비슷하다.
나 역시도 그랬고, 우리 파트원들과 그룹원들도 그랬다.

대부분이 draw.io로 그리고 있었고 MS visio를 사용하기도 했다.

예시

draw.io에서 그린 sequence diagram.

draw.io

MS visio에서 그린 sequence diagram.

visio

내가 두 가지 툴을 쓰면서 느꼈던 점.

직접 손으로 그려야해서 많은 시간을 필요로 한다
visio의 경우 프로그램이 무겁고, draw.io는 웹이라 편하지 않다
추가/수정의 작업이 어렵다
- version up으로 코드가 바뀌는 경우, 중간 flow를 바꿀 때 손이 굉장히 많이 간다.
위의 이유들로 굉장히 귀찮고 재미가 없다.

그렇다면, 쉽고 빠르게 diagram을 그리고 수정할 방법이 없을까?

plantUML

plantUML을 내가 팀 내에 소개할 때 나는 plantUML을 uml 계의 markdwon 이라고 표현했다.
그럼 plantUml을 알아보자.

markdown은 왜 쓰는가?

vs MS Word:

간단한 구조와 문법을 지원하기 때문에 직관적이다
쉽게 작성할 수 있다
쉽게 html이나 jpg로 변경이 가능하다
프로그램과 파일 모두 가볍다
Git(version 관리 시스템)에서 변경 이력 관리가 편리하다
문서 편집기의 모든 기능을 지원하지는 못한다
그치만 문서 편집기의 디테일한 기능들이 우리한테 필요하진 않다

plantUML

그래서 plantUML이 왜 uml 계의 markdown일까?

PlantUML은 사용자가 플레인 텍스트 언어로부터 UML 다이어그램을 만들 수 있게 하는 오픈 소스 도구이다.
PlantUML의 언어는 도메인 특화 언어의 한 예이다. -Wiki-
PlantUML 은 다이어그램을 빠르게 작성하기 위한 오픈 소스 프로젝트이다. -Home-

즉, plantUML은 텍스트 언어로 uml을 만든다.

장점

장점을 보면 MS word와 비교한 markdown과 굉장히 유사하다.

간단한 구조와 문법을 지원하기 때문에 직관적이다
쉽게 작성할 수 있다
쉽게 html이나 jpg로 변경이 가능하다
프로그램과 파일 모두 가볍다
Git(version 관리 시스템)에서 변경 이력 관리가 편리하다
draw.io나 visio의 모든 기능을 지원하지는 못한다
그치만 draw.io나 visio의 모든 기능이 우리한테 필요하진 않다
plantuml로 아키텍처를 테스트할 수 있다.¹

설치

plantuml은 editor만 있으면 된다.
주로 나는 vscode에서 작성하는데 intellij 에서도 작성할 수 있다.

vscode - extensions > PlantUML
intellij - Settings > Plugins > PlantUML integration
web - web plantuml 에서 테스트 가능.

사용법

plantUML 가이드 참고.

vscode 및 intellij 에서 preview, 및 file export.

예시

작성한 uml과 그려진 diagram을 보면 쉽게 이해할 수 있다.
나는 보통 sequence diagram을 가장 많이 그리는데 위 가이드를 보면 class diagram이나 다른 diagram들도 참고할 수 있다.

기본 사용법.

@startuml
client-> server: invalid msg
client<--server: <color #red>400</color> invalid request
@enduml

uml1

조건문의 사용은 이렇게.

@startuml
client-> server: msg
alt validate(msg)
client<--server: <color #blue>200</color> result
else
client<--server: <color #red>400</color> invalid request
end
@enduml

uml2

activate 상태 표시.

@startuml
client-> server: msg
activate server
server-> requestValidator: validate(header)
server<--requestValidator: validateResult
server-> requestValidator: validate(msg)
server<--requestValidator: validateResult
deactivate server
alt validateResult == True
client<--server: <color #blue>200</color> result
else
client<--server: <color #red>400</color> invalid request
end
@enduml

uml3

넘버링 하는 방법과 indentation에 대한 팁.
그리고 메모를 적는 방법.

@startuml
autonumber
client-> server: msg
note right: msg must have valid header & msg

activate server
    server-> requestValidator: validate(header)
    server<--requestValidator: validateResult
    server-> requestValidator: validate(msg)
    server<--requestValidator: validateResult
deactivate server

alt validateResult == True
    client<--server: <color #blue>200</color> result
else
    client<--server: <color #red>400</color> invalid request
end
@enduml

uml4

메모에 개행이 필요한 경우 \n을 쓸 수도 있지만 아래와 같이 하는게 좋다.

@startuml
autonumber
client-> server: msg
note left
   msg must have valid header & msg
   header: appId, appVersion
   msg: must have resourceId
end note

activate server
    server-> requestValidator: validate(header)
    server<--requestValidator: validateResult
    server-> requestValidator: validate(msg)
    server<--requestValidator: validateResult
deactivate server

alt validateResult == True
    client<--server: <color #blue>200</color> result
else
    client<--server: <color #red>400</color> invalid request
end
@enduml

uml5

상태 구분과 지연되는 상황에 대한 표시를 아래와 같이 나눌 수 있다.

@startuml
autonumber
== intialize ==
[-> server: set properties
[-> server: remove requestInfo
...
autonumber
== request come-in ==
client-> server: msg
note left
   msg must have valid header & msg
   header: appId, appVersion
   msg: must have resourceId
end note

activate server
    server-> requestValidator: validate(header)
    server<--requestValidator: validateResult
    server-> requestValidator: validate(msg)
    server<--requestValidator: validateResult
deactivate server

alt validateResult == True
    client<--server: <color #blue>200</color> result
else
    client<--server: <color #red>400</color> invalid request
end
@enduml

uml6

reference

java에서 plantuml로 architecture를 테스트할 수 있도록 제공하는 archunit 참고. ↩