Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

VScode에서 Draw.io를 사용하기

2020.06.04
핫한

아래는 Qiita에 개재된 「VS Codeでフローチャートの描きができた」를 번역한 내용입니다.
다소 의역이 있어 어색한 부분이 있어도 양해 부탁드립니다. 🙉

시작하며

VSCode에서 간단하게 Draw.io를 사용할 수 있게 되었기에 도입방법과 사용방법을 기록으로서 남겨보려 합니다.

Draw.io는?

Draw.io는 draw.io에 접속만으로 플로우차트나 네트워크 관계도, ER 다이어그램과 같은 것을 다양한 템플릿을 사용하여 간단하게 그릴 수 있는 서비스입니다.

Draw.io로 작성한 것은 PNG나 JPEG 등의 이미지 형식뿐만 아니라 SVG나 XML과 같은 다양한 확장자로 저장할 수 있습니다. 아래의 그림과 같이 사용하는 툴입니다.

zu1.png

VS Code에서 사용할 수 있습니다

앞서 소개한 Draw.io를 VSCode에서 사용할 수 있게 되었습니다!
Github: https://github.com/hediet/vscode-drawio
MarketPlace: Draw.io VS Code Integration

아주 손쉽게 GUI 인터페이스로 사용할 수 있어 사용방법에 고민하지 않고 직감적으로 다양한 것들을 그릴 수 있습니다!
브라우저로 작성해도 크게 문제는 없었지만, VSCode로 사용할 수 있다는 점은 꽤 가치 있다고 생각합니다.

도입 방법

Draw.io Integration에서 설치버튼, VSCode의 확장기능 검색에서 「Draw.io Integration」로 검색하여 설치할 수 있습니다.

설치 후 적용을 위해 VSCode를 다시 실행하는 편이 좋습니다.

사용 방법

확장자로 .drawio혹은 .dio로 파일을 생성하는 것으로 바로 이용 가능합니다.
파일을 만들어 열면 draw.io의 화면이 나옵니다.

zu2.gif

조작 방법

직관적인 조작이 가능하다고 생각하여 설명이 많이 부족할지도 모릅니다.
좌측의 shape부터 필요한 것을 드래그하는 것으로 바로 사용할 수 있습니다.

또한, 도형에 마우스를 호버하면 릴레이션을 연결할 수도 있습니다.

zu3.gif

아이콘을 추가

다양한 서비스의 아이콘을 추가하여 사용할 수 있습니다!
Shapes의 아래에 있는 [+ More Shapes...]를 선택하여 사용하고 싶은 아이콘을 선택해주세요.
AWS나 GCP, Azure의 아이콘이나 Kubernetes의 아이콘을 사용할 수 있습니다.

저장하는 방법

위에서 작성한 도형을 저장할 때는 상단의 메뉴에서
[File]→[Export as]→(원하는확장자) 순으로 선택하여 간단하게 저장할 수 있습니다.

zu4.gif

마치며

간단하게 도입부터 사용까지 진행해보았습니다.
엔지니어는 자주 도형을 그리는 경우가 많기에 꼭, 한번 사용해보세요 !

참고

Github: https://github.com/hediet/vscode-drawio
MarketPlace: Draw.io VS Code Integration

역주

저도 가끔씩 draw.io에서 간단한 시퀀스나 도형을 활용 했었는데,
이제 VScode에서 플러그인을 사용할 수 있네요. 이번 기회에 한 번 사용해 봐야겠네요 🚀

0개의 댓글

로그인을 하시면 댓글을 작성할 수 있어요 !
목록으로 가기