Visual Studio Code + Plant UML 을 통한 Diagram 작성

어떤 Code의 flow를 따라가다 보면 정리를 하고 싶기 마련.

UML을 통해 작성하려고 했더니 VISIO 등을 통해 하기에는 귀찮고 간단하게 플로우는 또 깔끔하게 그리고 싶을때 사용하기 좋다.

프로그래머로써 Flow chart 를 그리는 것은 매우 불편하고 귀찮은 일인데, 공부를 하면서 간단하게 작성하고 Preview 기능까지 지원하고 있는 Visual Studio Code + Plant UML 조합은 최고다.

일단 Plant UML을 사용하면 좋은 점은 마우스의 조작없이 uml형태에 맞게 작성할 수 있다는 것이다. 맞는 모양을 끌어다가 넣을 필요도 없고 한번 익숙해지면 정말 편하게 UML을 작성할 수 있는 텍스트가 더 편한 개발자들에겐 정말 사용하기 좋다.

그럼 일단 설치부터 해보고 써본다음에 후회하던지 하는걸로 하고 한번 깔아보자 ~~( 개발자들의 특성상 일단 깔면 쓰는것 같다 )~~

VS Code에 Plant UML Extension 설치

일단 VS Code를 깔았다면 Ctrl+Shift+X 를 누르면 Extention 페이지가 뜬다.

## 그림 ##

여기서 plantUML로 검색하면 공장모양의 Extension이 뜨는데 이걸 설치해주면 된다.

설치 후에 한번 작동시켜보자.

@startuml
start
  :시작;
  
  if(이프문) then (yes)
    : 트루;
  else (no)
    : 포올스;
  endif
  
end
@enduml

요걸 실행해보면 아래와 같은 결과를 볼 수 있다.

## 결과 그림 ##

이렇게 실행되면 간단하게 작성하여 사용할 수 있다.

아 혹시 옆의 다이어그램 preview가 보이지 않으면 우클릭을 해서 Preview Current Diagram을 누르거나 Alt + D 버튼을 누르면 Preview를 확인할 수 있다. 그리고 기초적으로 Plantuml은 컴퓨터에 java가 깔려 있어야 가능하다.

이렇게 작성만해서 보고만 있을게 아니라면, 파일로 추출할 필요가 있을 것이다.

VS Code에서 해당 다이어그램을 다 작성한 후에 'F1' 버튼을 클릭하여 PlantUML을 검색하여 Export를 하면 원하는 형태로 결과물을 저장할 수 있다.