소개

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

extenstion Draw.io VS Code Integration

Visual Studio Code에서 사용

<파일 이름>.drawio 파일을 만들고 vscode에서 열기

그러면 다음과 같은 GUI가 시작되어야합니다

구성도 작성

Layers 패널 표시

Draw.io GUI 메뉴 View → Layers

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

라이브러리 추가

GUI 왼쪽 하단의 More Shapes ...를 누릅니다

좋아하는 라이브러리를 선택하십시오 (이번에는 GCP 선택)

그러면 GUI의 왼쪽에 라이브러리가 추가됩니다.

배경 레이어 그리기

배경 레이어에 그리는 것은 그림 배경입니다.

쓰기가 끝나면 키를 클릭하여 배경을 잠그십시오

네트워크 레이어 그리기

+를 클릭하여 네트워크 레이어를 만듭니다

네트워크 그리기

쓰기가 끝나면 잠그십시오

상단 레이어 그리기

+를 클릭하여 상위 레이어를 만듭니다

상위 레이어 그리기

작업 저장

Draw.io GUI 메뉴 File → Save

cat <ファイル名>.drawio 그러면 파일에 메타데이터가 쓰여진 것을 알 수 있습니다

그림 내보내기

Draw.io GUI 메뉴 File → Export ...에서 원하는 형식으로 내보내기

구성도를 작성해 보는 흐름은 이상입니다.
암암 다이어그램을 남기고 공유합시다!
라이브러리를 추가하는 방법에 대해서는 별도로 작성하겠습니다.

VS Code Integration의 좋은 점과 사용하기 어려운 점

좋은 점

drawio 파일을 클릭하기 만하면 시작됩니다

라이브러리도 동시 관리하기 쉽다

drawio 파일이 compress되지 않으므로 변경 사항을 git 관리하기 쉽습니다

사용하기 어려운 점

VS Code를 light 테마로 변경해야합니다.

dark 테마라고 편집중과 출력시로 외형이 다르다

appendix

GitHub

htps : // 기주 b. 코 m / 헤이 t / vs 코데 - d 라우 오

draw.io에 관하여

htps : //에서 sk. d 등 w. 이오 / 술집 rt / 칭찬

htps : // 기주 b. 코 m / jg 등 ph / d 라우 오

이 기사에 따라 CLI에서 draw.io를 실행하여 이미지를 내보낼 수 있습니다.

h tps:// 퀵했다. 작은 m / U 4 타 3 / MS / 646 ~ C46b ~ f68b380cb