VS Code에서 PlantUML 사용설정

VS Code에서 PlantUML 사용설정

Boost Note(무료)에서는 기본적으로 제공되는 기능인데, Visual Studio Code에서도 비슷한 설정이 있지 않을까 싶어 설정 하는 방법을 정리한다. 목표는 Boost Note에서 작성하던 방법과 동일하게, Markdown 작성과 PlantUML 작성을 함께 할 수 있도록 하는 것이다.

 

비교 대상 - Boost Note

# Test

@startuml
Bob -> Alice: Hello
@enduml

이렇게 작성하면 아래와 같이 자동으로 렌더링 해준다.

위와 같이, 문서로서의 기능과 다이어그램을 그리는 기능을 온전히 한 세트로 해야 편리하다.

 

VS Code상에서 설정

VS Code에서는 Extension을 통해 해당 기능을 설정해야 한다.

Shift + Command + X키로 extension 설치/관리를 할 수 있다. 검색 창이 뜨면, 아래의 두 플러그인을 찾아서 설치한다.

PlantUML 플러그인 설치

먼저 설치할 플러그인은 PlantUML 플러그인이다. 해당 플러그인을 설치 완료한 후, 빈 파일을 열어서 위에 Boostnote에서 테스트한 내용을 그대로 사용해보자. 본문을 입력한 후, Option + D 키를 누르면, PlantUML Preview 창이 뜨고, 다이어그램이 정상적으로 출력되는 것을 확인할 수 있다.

그러나, 어디까지나 다이어그램만 preivew가 되었을 뿐이다. 사실 문서로서 가치가 있으려면 다음의 절차까지 진행해야 한다.

 

반응형

 

Mardown Preview Enhanced 플러그인 설치

마찬가지로, Shift + Command + X키를 눌러서 extension을 설치한다. 이번에 설치할 것은 Markdown Preview Enhanced이다. 즉, 마크다운 문서를 미리보기 할 수 있도록 도와준다.

플러그인 설치를 완료했으면, 위의 샘플 파일을 임의의파일명.md 파일로 저장한다. 그 후, 상단을 보면 다음과 같은 아이콘들이 보일텐데 제일 왼쪽의 버튼을 클릭하면 작성중인 문서를 미리보기 할 수 있다.

 

PlantUML + 마크다운 사용 방법

앞서 사용한 예제를 입력하고 바로 위까지 실행한다면 다음과 같이 출력될 것이다.

UML이 제대로 렌더링되지 않았다. 플러그인의 사용법에 맞게, 본문을 다음과 같이 수정한다.

# Test
```planutml
@startuml
Bob -> Alice: Hello
@enduml
```

그러면, Preview 화면이 다음과 같이 업데이트된다.

 

요약

1. VS Code에 다음의 두 플러그인을 설치한다.
   • PlantUML
   • Markdown Preview Enhanced
2. 파일을 작성하면, md 파일로 저장한다.
3. UML 부분은 @startuml ~ @enduml 내에 기록한다.
4. uml 구분의 앞뒤를 ```plantuml ~ ```로 감싼다.
5. Option + D가 아니라, MarkDown Preview를 쓴다. (아이콘 클릭)

ps. 설치/설정이 귀찮으면, Boost Note 등도 대안이 될 수 있다. 여러 문서들을 작성/관리하고, 검색하는 툴로서는 오히려 Boost Note가 더 나을 수도 있다. 다만, 기존에 VS Code를 통해 개발도 하고 프로젝트에 설계 문서 등을 함께 작성하는 경우는, 이 방식도 훌륭할 것이라 생각한다.

 

더 보기

PlantUML - 코드로 시퀀스다이어그램 그리기