VSCode - PlantUML 플러그인 설치 및 사용 방법

PlantUML 사용 방법에 이어서, VSCode 에디터에서 PlatUML plugin을 설치하여 사용하는 방법을 소개합니다. 이 플러그인을 설치하면, VSCode에서 코드를 작성하고 바로 UML을 볼 수 있습니다.

PlantUml 플러그인 설치

플러그인은 다음과 같이 설치할 수 있습니다.

• [Ctrl + Shift + P]를 누릅니다.
• Install Extensions를 선택합니다.
• 왼쪽 창에서 PlantUML을 찾아서 설치합니다.

플러그인 설치와 별개로 PC에 Java와 graphviz가 설치되어 있어야 합니다.

Preview UML

먼저 에디터를 열고 UML 코드를 입력합니다.

예를 들어 다음과 같이 입력하고

@startuml
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20
@enduml

아래와 같이 Preview를 실행합니다.

• [Ctrl + Shift + P]를 누르고
• "PlantUML"을 검색하고 "Preview Current Diagram"을 누릅니다.
• 또는 단축키 [Alt + D]를 누릅니다.

Preview가 실행되면 아래처럼 분할 창이 생기고, 그 창에 코드로 생성된 UML이 보입니다.

Export UML

UML을 파일로 추출할 수 있습니다.

다음처럼 Export를 실행합니다.

• [Ctrl + Shift + P]를 누르고
• "PlantUML"을 검색하고 "Export Current Diagram"을 누릅니다.

그럼 아래처럼 추출될 이미지 파일 형식을 선택할 수 있습니다. 추출이 완료되면 오른쪽 하단에 메시지가 보입니다. "View Report"버튼을 누르면 어떤 경로에 파일이 저장되었는지 알 수 있습니다.

참고

• visualstudio - PlantUML