개발 공부 - GitHub에서 draw.io의 SVG파일 바로 보기

 GitHub에 내장되어 있는 VSCode WEB IDE를 사용하는 기준이다.

GitHub의 private 프로젝트가 Draw.io에서 바로 연동이 되지 않아서 추출 후 preview로 보는 방식으로 사용했다.

https://marketplace.visualstudio.com/items?itemName=sndst00m.vscode-native-svg-preview

이런 플러그인을 깔아야 한다.

나는 기본적으로는 mermaid uml 를 선호하기는 하는데, 피그마랑 draw.io를 디자이너 분들이 사용하시는 걸 보고 나도 이걸 쓰려고 한다.

하지만 mermaid의 md 파일 호환을 참지 못 하기 때문에 개발 시 readme는 md 파일로 할 예정!

아무튼 github에서 preview로 바로 볼 수가 있기 때문에 SVG 파일 형식으로 추출했다.

draw.io에서는 [사용자 기기]를 선택했다.

테스트 용으로 단순한 uml을 그렸기 때문에 작게 줄인다.

내보내기 -> SVG로 내 PC에 파일을 저장한 뒤, github 프로젝트에 업로드한다.

마켓플레이스에 가서 SVG Viewer 중 WEB IDE를 지원하는 것을 설치한다.

나는 Native SVG Preview를 설치했다.

설치 후에는 시키는 데로 settings.json 파일을 수정한다.

그리고 나서는 Preview 아이콘을 누르면 미리보기로 UML을 바로 볼 수 있다.

집에서도 귀찮으면 WEB IDE로 개발을 하는데, 플러그인이 동기화가 안 되는 지 브라우저마다 설치된 것이 달라서 캡처를 해 둔다.