UML diagram in vscode :: 마이구미

이 글은 개발툴에서 UML 다이어그램을 작성하는 방법을 다뤄본다.

정확히는 관련 플러그인을 설치하는 과정을 다루는 글이 된다.

개발툴 - vscode(Visual Studio Code)

플러그인 -  PlantUML 

PlantUML 공식 사이트 - http://plantuml.com/

글을 다루기 전에 만약 독자 중 UML 다이어그램에 관심도 사용할 생각도 없었다면 읽어보길 바란다.

분명 도움이 될 것이다.

본인 또한 다이어그램을 통한 모델링은 실무에서 한번도 사용한 적이 없다.

학교에서만 배웠고 그 시절엔 이걸 왜 배워야하는지 모른 상태였기 때문에 이후 접하지 않았다.

현재는 설계의 중요성을 느껴 늦었지만 지금이라도 습관을 들여보도록 한다.

본인은 클래스 다이어그램을 작성하기 위해 관련 툴을 찾고 있었다.

이왕이면 현재 쓰고 있는 개발툴에서 작성하고 싶지 않은가?

그래서 다이어그램 툴이 아닌 vscode 내부에서 사용할 수 있는 관련 플러그인을 찾아보았다.

마켓이 검색해보면 알다시피 관련 플러그인은 많이 존재한다.

본인의 스타일에 맞는 것을 고르면 된다.

PlantUML의 경우에는 초기 셋팅이 손이 조금 갈 수도 있다.

본인은 PlantUML이 다이어그램을 작성에 있어서, 조금 더 괜찮다는 느낌을 받았다.

지금부터 설치하는 과정을 보자.

먼저 플러그인을 설치한다.

설치만으로, 텍스트 파일을 통해 다이어그램을 작성할 수 있다.

동작하지 않는다면, 환경변수 설정이 필요하다.

또한 세부 기능을 위한 오픈 소스인 Graphviz 의 설치가 필요하다.

전체적인 셋팅을 위해서는 3가지 환경 변수를 셋팅하면 된다.

OSX를 기준으로 작성하지만, 경로만 다르기 때문에 상관없다. 

• JAVA_HOME 
• PLANTUML_JAR 
• GraphViz 

환경변수 설정을 위해 .bash_profile 파일에 추가한다.

vi ~/.bash_profile

export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_60.jdk/Contents/Home" 
export PLANTUML_JAR="/usr/local/Cellar/plantuml/plantuml.jar"

참고 - https://marketplace.visualstudio.com/items?itemName=okazuki.okazukiplantuml

본인의 JDK 경로를 위와 같이 추가해주자.

plantuml.jar 파일은 http://plantuml.com/starting 링크를 통해 다운로드하면 된다.

그 후 위와 같이 원하는 경로로 이동시킨다.

cd /usr/local/Cellar/ => 현재 경로 이동
mkdir plantuml => 폴더 생성
mv /Downloads/plantuml.jar /usr/local/Cellar/plantuml/ // jar 파일 생성된 폴더로 이동

그 후 오픈 소스인 Graphviz 설치해보자.

mac의 경우에는 brew 를 통해 쉽게 할 수 있다.

설치하면 다음 경로에 존재하면 설치가 완료되었다는 것을 알 수 있다.

Windows example: C:\Program Files\Graphviz\bin\dot.exe 
macOS example: /usr/local/Cellar/graphviz/2.38.0_1/bin/dot

vscode를 재시작한 후 다시 확인해보면 다음과 같이 원하는 기능들이 모두 동작한다.