[Visual Studio Code] PlantUML 설치 하기

 이번 글에서는 visual studio code에 확장 프로그램으로 UML 다이어그램을 사용할 수 있는 환경을 구축합니다.

 (UML란 "Unified Modeling language"의 약자이며 통합 모델링 언어를 뜻합니다.)

 PlantUML을 설치해서 사용할 예정입니다. 

PlantUML과 Graphviz 설치하기 

 관리자 권한으로 명령 프롬프트를 실행시킵니다. 

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

choco install plantUML

 설치 여부를 물어보는 창이 나오면 Y를 눌러서 계속 설치합니다. 

 

Visual Studio Code에서 확장 프로그램 설정

 visual studio code를 실행시키고 <ctrl + shift + X> 버튼을 눌러서 확장 탭으로 이동합니다. 

plantUML 확장 프로그램

 

Visual Studio Code로 PlantUML 작성하기 

 visual studio code를 실행 시키고 exmple.plantuml 파일을 생성합니다. 

 아래의 SQL예제 소스를 붙여 넣습니다.  

@startuml
 
scale 1.5
title Exmple SQL
 
' uncomment the line below if you're using computer with a retina display
' skinparam dpi 300
!define Table(name,desc) class name as "desc" << (T,#FFAAAA) >>
' we use bold for primary key
' green color for unique
' and underscore for not_null
!define primary_key(x) <b>x</b>
!define unique(x) <color:green>x</color>
!define not_null(x) <u>x</u>
' other tags available:
' <i></i>
' <back:COLOR></color>, where color is a color name or html color code
' (#FFAACC)
' see: http://plantuml.com/classes.html#More
hide methods
hide stereotypes
 
' entities
 
Table(user, "user\n(User in our system)") {
primary_key(id) INTEGER
not_null(unique(username)) VARCHAR[32]
not_null(password) VARCHAR[64]
}
 
Table(session, "session\n(session for user)") {
primary_key(id) INTEGER
not_null(user_id) INTEGER
not_null(unique(session_id)) VARCHAR[64]
}
 
Table(user_profile, "user_profile\n(Some info of user)") {
primary_key(user_id) INTEGER
age SMALLINT
gender SMALLINT
birthday DATETIME
}
 
Table(group, "group\n(group of users)") {
primary_key(id) INTEGER
not_null(name) VARCHAR[32]
}
 
Table(user_group, "user_group\n(relationship of user and group)") {
primary_key(user_id) INTEGER
primary_key(group_id) INTEGER
joined_at DATETIME
}
 
' relationships
' one-to-one relationship
user -- user_profile : "A user only \nhas one profile"
' one to may relationship
user --> session : "A user may have\n many sessions"
' many to many relationship
' Add mark if you like
user "1" --> "*" user_group : "A user may be \nin many groups"
group "1" --> "0..N" user_group : "A group may \ncontain many users"
 
@enduml

<Alt + D>키를 입력하시면 아래와 같이 UML이 생성되는 것을 확인 할 수 있습니다.

예제 다이어그램

 

작성한 PlantUML을 파일로 변환하기 

 visual studio code에서 <Ctrl + Shift + P> 키를 눌러서 입력창을 활성화 합니다. 

 입력창에 "PlantUML: Export"로 검색하면 외부로 추출할 수 있는 명령 목록들을 확인 할 수 있습니다.

 명령을 선택후에 원하는 포맷으로 변환합니다. 

 변환을 진행하면 out 폴더에 output파일이 생성된 것을 확인 할 수 있습니다. 

 

PlantUML에 사용 가이드 문서 경로

http://pdf.plantuml.net/PlantUML_Language_Reference_Guide_ko.pdf