Code diagram tool - drawio

Code diagram?

code diagram은 어떠한 코드가 주어졌을 때 흐름과 구조를 파악할 수 있는 구조다.

하나의 소스코드 내에서 알고리즘이 어떻게 구현되는지 시각적으로 확인할 수 있다.

 

대형 프로젝트의 경우 클래스와 함수, 구조체 등 복잡한 관계로 연결되어 작동하게 된다.

이런 상황에서 데이터의 흐름이 어떻게 진행되는지 시각적으로 아는데 code diagram이 도움 된다.

 

GVINS라는 하나의 알고리즘을 drawio로 code diagram을 작성한 적이 있다.

그때는 웹에서 Github와 연동해서 했는데 잘 작동하지 않아 상당히 불편했었다.

하지만 이번에 vscode에 drawio 비공식적 extention을 지원하는 걸 알았고 사용해 보았다.

 

진짜 너무 좋다.

1. 편의성
   vscode환경에서 화면 분할로 코드를 띄워놓고 옆에서 code diagram을 동시에 작성한다.
   기능은 모두 들어가 있으며, 파일을 불러와 load 하던 번거로운 작업이 단번에 해결되었다.
   설치와 사용법 익히는데 1분이면 된다.
2. 버전 관리
   기존 웹에서 쓰던 방식은 github과 잘 연동이 안 돼서 버전 관리에 애로사항이 있었다.
   하지만 vscode extention을 사용해서 repository 폴더에 파일을 하나 만들어주며 버전 관리가 쉬워졌다.
3. 확장성
   최고의 장점. draw.io에서 다이어 그램을 그리는 곳을 캔버스라고 해보자. 캔버스가 무한 확장된다.
   export 했을 때 글씨가 깨지지 않는다.

 

설치

1. VSCODE extention에서 draw를 검색하면 바로 상단에 뜬다.

2. install 버튼 누르기

 

사용법

파일 생성

1. File - Open Folder - 작업을 원하는 폴더로 진입

2. New File 생성 이름은 -> [원하는 이름].drawio.png

3. 생성한 파일 더블클릭

 

draw.io와 code 창 분할 모습

도형과 화살표 그리기

좌측 General 탭에서 다양한 도형을 import 할 수 있다.

도형을 캔버스에 올렸으면 커서를 도형 쪽에 붙여보자.

커서를 붙이면 옆에 다양한 도형 툴바가 활성화된다.

활성화된 툴바에서 도형을 선택하면 화살표가 연결된 도형이 바로 생성된다.

 

다양한 shape 플러그인 추가하기

왼쪽 탭에는 기본적으로 몇 개의 shape 샘플들이 추가되어 있다.

하지만 더 많은 shape를 원한다면 왼쪽 하단의 [+ more shapes] 버튼을 클릭해 보자.

많은 shape 템플릿들이 구비되어 있다.

 

원하는 shape의 체크박스를 표시하고 apply를 해주면 탭에 추가가 되어있다.

심심하지 않은 diagram을 구성할 수 있을 듯하다.

diagram export

File 탭에서 export 가능하다.

파일을 수정할 때는 drawio.png 확장자였다.

순수한 png, svo, drawio 확장자로 export가 가능하다.

 

png로 export 하면 배경이 투명하고 다이어 그램만 보이는 이미지가 된다.

 

svg로 export하면 벡터 그래픽을 표현하기 위한 XML 기반의 파일이 된다.

 

drawio로 export하면 draw.io에서 편집 가능한 파일이 된다.

 

SVG에 대해 궁금하다면 아래 블로그에서 참고하자.

SVG 구조, 렌더링 성능 알고 쓰기