plantUML on visual studio code

@startuml
Bob -> Alice : hello
@enduml

Visual Studio code에서 plantUML을 사용하는 방법입니다. 

 

1. 설치

VSC에서 ctrl + shift + x를 누르고 "plantUML"을 검색해서 설치합니다. 

 

 

Yog PlantUML Highlight도 설치합니다. 

 

mac에서는 java runtime도 함께 설치해야 합니다. 

JDK 설치가 가능하도록 추가

brew tap adoptopenjdk/openjdk

설치하고자 하는 JDK 설치

brew install --cask adoptopenjdk11
brew install --cask adoptopenjdk14

Java 설치 위치 확인

/usr/libexec/java_home -V

Java version 확인

java --version

 

etc. Java version 변경

vim ~/.zshrc

# Java Paths
export JAVA_HOME_11=$(/usr/libexec/java_home -v11)
export JAVA_HOME_14=$(/usr/libexec/java_home -v14)

#export JAVA_HOME=$JAVA_HOME_11
export JAVA_HOME=$JAVA_HOME_14

 

 

2. test

간단하게 sequence diagram을 작성해 봅니다.

@startuml
Bob -> Alice : hello
@enduml

 

이제 alt + d를 누르면 diagram이 생성됩니다. (mac에서는 option + d)

 

 

3. file export

현재 작성중인 plantUML file (text)에 cursor를 위치시킵니다. 

이후 ctrl + shift + p를 누른 후, "현재 다이어그램 파일 내보내기"를 선택합니다. 

 

export 하고자 하는 file format을 선택하면, 

plantUML text file이 위치한 곳에 같은 이름의 directory가 하나 생 성되며, 여기에 선택한 image 파일이 생성됩니다.

 

 

cf.

ubuntu에서는

sudo apt update
sudo apt install default-jre

sudo apt install graphviz

sudo apt install plantuml

 

example.puml 작성

plantuml example.puml

 

ubuntu vscode에서도 PlantUML을 설치하면, alt+d로 바로 그릴 수 있음