[개발자 팁] 무료 UML 다이어그램 작성. Visual Studio Code + PlantUML Extension : 클리앙

요즘 VS Code 많이들 쓰시죠?

그리고 현장에서 UML 다이어그램을 자주 사용하지는 않지만.. (저만 그런가요? ㅎㅎ)

가끔씩 정말 UML 다이어그램이 필요할때가 있습니다.

복잡한 코드들이 여기 저기 점프해 다닐때, 잘 그려진 Sequence Diagram 하나 만들어두면 두고두고 편하겠다 싶을때도 있구요..

제가 C++ 을 사용하는 관계로..

삼성의 상속관계보다 더 복잡한 상속들이 난무하는 복잡한 클래스들을 보고 있자면..

잘 그려진 Class Diagram 하나쯤 만들어 두면 두고두고 편하겠다 싶을때도 있지요.

그래서 UML 다이어그램을 그려주는 툴들을 살펴보자니..

정말 수많은 툴 들이 많았습니다.

저도 회사에서 사용하기 위해서.. 무료 툴들을 정말 수도없이 이것 저것 써봤는데요..

최근에 알게된 Visual Studio Code + PlantUML Extension + GraphViz 조합이 개꿀이라는 결론에 다다랐습니다.

네. 개꿀입니다. 여러분.

VS Code 의 Extension 에서 PlantUML 을 검색하시면 곧바로 PlantUML Extension 을 설치하실수 있습니다.

설치 하신후에는 기본으로 Sequence Diagram 을 그리실수 있습니다.

추가로 Class Diagram 을 그리시려면 GraphViz 를 설치하시고

환경변수에 GRAPHVIZ_DOT 를 새 변수로 넣어주고

그 값은 설치한 GraphViz 폴더안의 bin 폴더에 있는 dot.exe 파일을 전체경로와 함께 지정해 주면 되겠습니다.

그런데 UML 다이어그램을 어떻게 그리느냐?

네. 개발자 여러분 마음에 쏙 들게 스크립트로 그립니다.

스크립트에 사용되는 문법들은 한글로 된 아주 쉬운 문서가 있습니다.

문서에서 보시다시피 정말 쉽습니다.

일단 VS Code 에서 텍스트 파일을 하나 만들고 확장자는 plantuml 로 저장해주세요.

그 다음

@startuml 로 첫 줄을 시작해 주시고

제일 마지막은

@enduml 로 마지막 줄을 적어주시고 이 둘 사이에다가 스크립트를 적으면 됩니다.

스크립트 하면 .. 또 어렵지 않을까 겁 내시는 분들도 계실텐데..

(위의 저 문서를 보시면 아시겠지만.. )

예를 하나씩 들어가면서 설명된 너무도 잘 정리된 저 문서를 보시면.. 정말 쉽다는걸 느끼실 겁니다.

가장 간단한 예로 아래의 내용을 적어준 다음,

@startuml

title 나의 첫번째 시퀀스 다이어그램

A -> B : 부르는 함수이름

@enduml

Alt + D 키를 눌러주세요. 그려면 VS Code 의 화면 오른쪽에 지금 적어준 저 내용의 UML Sequence Diagram 이 실시간으로 보여집니다.

잘못된 형식의 이미지 링크입니다.

또 하나의 장점은..

이게 텍스트 파일이라서 Git 으로 버전관리가 되고 협업도 된다는 사실이죵.

함 써보세요~ 강추입니다.

* 참고로 저렇게 생성된 이미지를 저장하시려면 Ctrl + Shift + P 를 누르신후

PlantUML: Export Current File Diagram 을 대소문자 관계없이 입력하시다보면

PlantUML: Export Current File Diagram 이 이미 뜰겁니다.

이걸 선택하신후 png 나 svg(벡터 그래픽)를 선택해주시면 저 plantuml 파일이 있는 곳의 아래에 자동으로 폴더가 하나 만들어 지면서 거기에 저장이 됩니다. 저걸 pdf 로 저장하는건 복잡합니다. 그냥 포기하시고 이미지 파일로 저장하세용.

팁과강좌