입문

VisualStudioCode(이하 VScode)와 Graphviz의 평면 텍스트 그래픽 이미지 생성이 편리하기 때문에 방법을 정리했습니다.
(VScode에서 식물 UML을 사용하여 UML 그림을 만드는 것이 더 편리할 수 있음)
다음 그림과 같이 VSCode에서 Dot 언어의 구문 강조 표시 및 차트를 생성할 수 있습니다.

환경 생성 개요

※ VScode 사전 설치

OS에 Graphviz 설치

VScode에 Graphviz 확장 추가

이름: Graphviz(dot) language support for Visual Studio Code(긴...)

Dot 언어의 구문 강조 표시 및 미리보기 기능

환경 만들기

Graphviz 설치

공식 사이트에서 설치 패키지를 다운로드합니다.

Graphviz 공식 홈페이지http://graphviz.org/download/

(필자는 Windows 사용자이므로 "Stable2.38 Windows install packages"를 다운로드하였습니다[2018/8/19])

패스 통과

환경 변수 path에 "(설치 디렉토리)\bin"(dot.exe가 있는 폴더) 추가

동작 확인

명령 프롬프트에서 다음 명령을 실행

dot -V

: 実行結果例
: dot - graphviz version 2.38.0 (20140413.2041)

VScode에 Graphviz 확장 추가

다음 사이트를 방문하여'설치'단추를 누르십시오.VSCode가 시작되고 오른쪽 아래에 추가 확장 여부를 묻는 팝업이 표시되므로 Install 을 선택합니다.VScode를 재부팅하면 확장이 유효합니다.
Graphviz (dot) language support for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz

사용 방법

VScode에서 dot 파일 열기

Command Pallete(Ctrl+Shift+p)에서 Graphviz:Open Preview To The Side

실행

미리보기가 오른쪽 창에 표시됩니다.dot 파일을 편집할 때 도표 이미지를 업데이트합니다.

경품

Graphviz Online

웹 응용 프로그램을 통해 Graphviz를 미리 볼 수 있습니다.확인하고 싶을 때 편해요.
https://dreampuf.github.io/GraphvizOnline/

VScode 확장

Graphviz의 Preview 기능만 확장되지만 UI가 약간 높습니다.
"Graphviz(dot) language support for Visual Studio Code"와 공존할 수 있습니다.
Graphviz Preview
https://marketplace.visualstudio.com/items?itemName=EFanZh.graphviz-preview