소개

VSCode의 기능 향상 Draw.io Integration이 출시되어 VSCode에서 작화를 할 수 있게 되었습니다.
문장을 마크다운, 도형을 Draw.io를 사용해 문서화하면, 소스 코드를 포함한 모든 아티팩트를 VSCode로 완결할 수 있습니다. 또, 도형을 텍스트 형식인 svg로 작성하면 마크다운과 함께 git로 관리하는데 편리합니다.

그래서 Draw.io에서 svg 형식으로 이미지 파일을 만들고 마크 다운 (md 파일)에 포함하는 방법을 조사했습니다.


환경



OS
macOS Caralina 10.15.4

VScode
1.45.1

Draw.io Integration
0.6.6

VSCode 확장 Draw.io Integration 배포 방법

선인 분들이 정리해 주시고 있습니다. ⇒ VSCode에서 Draw.io를 사용할 수있게 된 것 같습니다!

Draw.io에서 svg 형식의 파일 만들기

.drawio.svg 또는 .dio.svg 확장자로 파일을 만들면 Draw.io와 연결되어 svg 형식의 파일을 만들고 만들 수 있습니다.

md 파일에 svg 포함

md 파일에 다음과 같이 만든 이미지(.drawio.svg)를 포함할 수 있습니다.
마크다운 구문 ![](ファイルパス) 또는 img 태그로 작성합니다.

md 파일 편집 화면에서 Draw.io 화면을 열면 ...

마크다운 구문에서 설명한 경우 이미지 파일을 cmd + 클릭으로 열 수 있습니다.


불행히도 텍스트 편집기가 열리고 svg 소스가 표시됩니다.


Draw.io Integration은 아직 출시되었기 때문에 버전 업하여 안정성과 VSCode와의 친화성이 올라갈 것으로 기대합니다.