diagrams.net (Draw.io)을 VS Code에서 시작, 구성도 작성, 저장
소개
Draw.io는 diagrams.net이라는 이름으로 마이그레이션하는 것 같습니다.
htps //w w.ぢあgらms. 네 t / b ぉ g / ゔ ぇ ぢ 아 g ms 네 t
기사에서는 Draw.io라고 합니다.
draw.io 는 web판, desktop 앱(electron)등등...여러 가지 있습니다만,
이 기사에서는 VS Code의 사용에 대해 언급합니다.
덧붙여서 개인적으로는 웹 서비스로서의 draw.io ( htps : // 어 p.ぢあgらms. 네 t/ ) 보다,
VS Code Integration을 사용하는 것이 더 좋습니다.
(좋은 점 · 사용하기 어려운 점은 나중에 언급합니다)
require
사전에 설치를 부탁드립니다
사전에 설치를 부탁드립니다
Visual Studio Code에서 사용

구성도 작성
Layers 패널 표시

Layers에는 기본적으로 Back Groud 레이어가 있습니다.

라이브러리 추가


배경 레이어 그리기

네트워크 레이어 그리기

상단 레이어 그리기

작업 저장
cat <ファイル名>.drawio
그러면 파일에 메타데이터가 쓰여진 것을 알 수 있습니다 그림 내보내기
구성도를 작성해 보는 흐름은 이상입니다.
암암 다이어그램을 남기고 공유합시다!
라이브러리를 추가하는 방법에 대해서는 별도로 작성하겠습니다.
VS Code Integration의 좋은 점과 사용하기 어려운 점
좋은 점
사용하기 어려운 점
appendix
Reference
이 문제에 관하여(diagrams.net (Draw.io)을 VS Code에서 시작, 구성도 작성, 저장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nassy20/items/4c19380fa6a338bd4f09텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)