[Tool] PlantUML를 VSCode에 설치해보자. (Linux, Mac version)

안녕하세요! 두두코딩 입니다 ✋
오늘은 plantUML에 대해 알아보겠습니다.

🖇 소스코드에 마우스를 올리고 copy 버튼을 누를 경우 더 쉽게 복사할 수 있습니다!

궁금한 점, 보안점 남겨주시면 성실히 답변하겠습니다. 😁
+ 감상평 댓글로 남겨주시면 힘이됩니다. 🙇

Plant UML

PlantUML이란 다이어그램을 빠르게 작성하기 위한 효율적인 툴이다. 보통 다이어그램은 그림으로 나타내는데, PlantUML을 사용하면 간단한 텍스트로 UML을 그릴 수 있다.

PlantUML으로는 다양한 다이어그램을 그릴 수 있다.

시퀀스 다이어그램
유스케이스 다이어그램
클래스 다이어그램
객체 다이어그램
액티비티 다이어그램
컴포넌트 다이어그램
배치 다이어그램
상태 다이어그램
타이밍 다이어그램

위의 다이어 그램을 “간단한 텍스트”를 활용하여 표현할 수 있다니, 멋지지 않은가?

좀 더 자세한 내용을 보고 싶다면, 여기를 클릭해 알아보자.

해당 포스팅에서는 “클래스 다이어그램” 위주로 설명하고자한다. 본인이 PlantUML을 사용해야겠다고 마음먹은 이유가 디자인 패턴을 그림으로 그려가며 설명하고 싶어서이다. 따라서, 해당 포스팅에서는 클래스 다이어그램의 기본기를 함께 설명하고자 한다.

PlantUML 설치하는 방법

본인은 Linux와 mac을 사용하고 있기 때문에 해당 환경에 대한 설치를 정리하고자 한다.

PlantUML을 사용할 수 있는 방법은 다양하지만, vscode에서 사용하는 방법을 알아보자.

🌱 VSCode 설치방법

VSCode 에서도 이제 plantUML을 사용할 수 있다. 아래의 사진과 같이, VSCode Extension에서 plantUML을 검색하자. 그리고 과감히 install 버튼을 누르자!

plantUML

우리는 VSCode에서 plantUML을 사용하기 위해, 일반적인 extension과 동일하게 접근하면 사용할 수 없다. 추가로 설치해줘야할 프로그램들이 필요하다. 아래의 플랫폼 별 설치방법을 보자.

추가로 필요한 프로그램

java
Graphviz

🌱 Linux 설치 방법

sudo apt install default-jre graphviz

위의 명령어를 통해 추가적인 프로그램을 설치해야한다. 본인은 ubuntu 18.04를 사용하고 있어서 default open-jre-10(?)을 사용하고 있어서 따로 설치해주지 않아도 됐다.

만약 되지 않는다면, Linux jre 설치하는 법을 구글해보자.

추가로, graphviz 프로그램을 설치해야한다.

만약 하지 않는다면 아래와 같은 에러를 만날 것이다.

Error found in diagram Untitled-3
java.io.IOException: Cannot run program "/opt/local/bin/dot": error=2, No such file or directory
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1128)
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1071)
at java.base/java.lang.Runtime.exec(Runtime.java:592)
at net.sourceforge.plantuml.cucadiagram.dot.ProcessRunner$MainThread.startThreads(ProcessRunner.java:163)
at net.sourceforge.plantuml.cucadiagram.dot.ProcessRunner$MainThread.runJob(ProcessRunner.java:123)
at net.sourceforge.plantuml.api.TimeoutExecutor$MyThread.run(TimeoutExecutor.java:79)
Caused by: java.io.IOException: error=2, No such file or directory
at java.base/java.lang.ProcessImpl.forkAndExec(Native Method)
at java.base/java.lang.ProcessImpl.(ProcessImpl.java:340)
at java.base/java.lang.ProcessImpl.start(ProcessImpl.java:271)
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1107)
... 5 more
java.io.IOException: Cannot run program "/opt/local/bin/dot": error=2, No such file or directory
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1128)
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1071)
at java.base/java.lang.Runtime.exec(Runtime.java:592)
at net.sourceforge.plantuml.cucadiagram.dot.ProcessRunner$MainThread.startThreads(ProcessRunner.java:163)
at net.sourceforge.plantuml.cucadiagram.dot.ProcessRunner$MainThread.runJob(ProcessRunner.java:123)
at net.sourceforge.plantuml.api.TimeoutExecutor$MyThread.run(TimeoutExecutor.java:79)
Caused by: java.io.IOException: error=2, No such file or directory
at java.base/java.lang.ProcessImpl.forkAndExec(Native Method)
at java.base/java.lang.ProcessImpl.(ProcessImpl.java:340)
at java.base/java.lang.ProcessImpl.start(ProcessImpl.java:271)
at java.base/java.lang.ProcessBuilder.start(ProcessBuilder.java:1107)
... 5 more

에러를 만났다 당황하지말고, graphviz를 설치해주자.

🌱 mac 설치 방법

# 자바 설치
brew tap adoptopenjdk/openjdk
brew install --cask adoptopenjdk11

# graphicviz 설치
brew install graphviz

# plantuml 설치
brew install plantuml

Tip plantUML은 확장설정을 해줘야한다. 해당 부분은 여기를 클릭해보도록하자.

위의 두개를 설치해주면 맥에서도 사용할 수 있다!

PlantUML 사용하는법

plantUML을 사용하기 위해서는 기본 문법을 알아야한다.

VSCode를 켜고, 새로운 파일을 열어보자. plantUML의 확장자는 (.pu)이다. 파일명을 개인적으로 정하고, .pu라는 확장자를 붙여 저장해보자. 저장할 경우 문법에 highlight가 되는 것을 확인할 수 있다.

@startuml
... // 각종 클래스를 적어주는 공간
@enduml

위와 같이 @startuml과 @enduml라는 구문으로 묶어주고 구문 내 클래스 다이어그램 문법을 작성해 그리면된다.

클래스 다이어그램을 작성하고 미리보기를 하고 싶다면 Alt + d 단축키를 누르면 아래의 그림과 같이 “미리보기 화면”이 수행된다.

preview

최종 산출물을 저장하는 방법은 VSCode에서 “F1”을 누르고 PlantUML로 검색해 Export하면 된다.

클래스 다이어그램 작성 문법

PlantUML을 사용하기 위해서는 기본적으로 문법을 알고 있어야한다. 사용방법은 위에서 다뤘지만, 실제 클래스 다이어그램을 그리기 위해서는 클래스 다이어그램을 위한 문법을 몇 가지 알고 있어야한다.

자세한 내용은 여기를 눌러 알아보자. 본인은 해당 사이트에서 필요한 부분 몇 가지만 골라 설명하도록 하겠다.

아래의 사진을 보자.

plant_class

각종 class 와 component들을 사용하는 keyword를 확인할 수 있을 것이다. 예를 들면, enum을 사용하고자 할 때는 enum키워드를 작성하고 뒷 부분에 원하는 이름을 적으면 된다.

디자인패턴을 표시하기 위해서는 관계를 표시해야한다. 관계는 일종의 선들을 가지고 표현하는데, 선의 종류는 아래와 같다.

타입	심볼
Extension	<\|--
Composition	*--
Aggregation	o--

여기서 주의할 점이, “-“ 표시이다. <|-- ,*-- 그리고 o-- 표시이며, -- 두번 들어가는 것을 잊어버리지 말자. 또한, --와 ..는 변경가능하며 ..으로 대체할 경우 “점선”으로 변경된다.

위의 타입들을 이용해 나타내면 아래와 같다.

plant_class

끝으로, 변수를 정의하는 부분을 보자.

plant_define

우리는 위의 방법으로 접근권한자를 나타낼 수 있으며, public, protected 그리고 private을 나타낼 수 있다.

Appendix

PlantUML은 잘쓰면 정말 쉬운 도구이다.

좀 더 연습해 유용하게 사용할 수 있도록 하자. 디자인 패턴에서 이제 꿈을 펼쳐보자. 😎