개발자 다이어그램 툴 추천 : Excalidraw

힙해보이는 다이어그램을 쉽게 만들 수 있는 툴인 Excalidraw를 소개합니다.

개발자라고 하더라도 다이어그램, 구조설명등을 위해 그림을 그려야하는 경우가 많은데요.
일반적으로 PlantUML,draw.io, Enterprise Architecture 등 이미 많은 다이어그램툴들이 있지만, 좀더 멋지고 힙해보이는 아웃풋을 내고싶다면 Excalidraw를 추천드립니다.

Example

예시1. Docker Overview

우선 예시로 Docker 공식 페이지에 나와있는 그림을 제가 다시 그려봤는데요, 어렵지않게 아래와같은 이미지를 만들어 낼 수 있습니다.

이미지들은 Excalidraw의 라이브러리에서 가져와서 사용하였습니다.

예시2. Sequence Diagram

두번째로는 간단한 시퀀스 다이어그램을 작성하였습니다.
Excalidraw가 다이어그램 그리기에 최적화 되어있지는 않지만, Excalidraw libraries에서 필요한 이미지를 제공하고있어서 5분도 안걸린 것 같네요.

 

How To Use

https://excalidraw.com/

Excalidraw

위 웹페이지에 접속하면 바로 작업을 할 수 있습니다.

UI는 따로 설명해드리지 않아도 사용하기 어렵지 않을 만큼 직관적으로 구성되어있습니다.
상단의 모드 선택후 그림을 그릴 수 있고, 왼쪽 property 창에서 세부설정을 관리할 수 있습니다.

모드

1 : 선택모드
2,3,4 : 단순 도형 그리기
5, 6 : 화살표와 직선, 선 더블클릭시 꼭짓점 추가하여 곡선 그리기 가능

7 : 자유 그리기 모드
8 : 텍스트, 글꼴은 세가지 중 하나로 선택
폰트는 Virgil, 일반, Cascadia 세가지중 하나로 밖에 선택이 안됩니다.

9 : 사진 첨부

라이브러리

가장 우측의 책 모양을 선택하면 라이브러리 창이 나오는데, 여기서 다운로드해둔 항목들을 확인하고 쉽게 사용할 수 있습니다.

하단의 "Browse libraries"를 누르면 다른사람이 올려둔 라이브러리를 추가해 둘 수 있습니다.
파일로 저장하는것도 가능하지만 "Add to Excalidraw" 버튼을 클릭해서 바로 작업창에 추가할 수 있습니다.

저는 "Dev Ops Icon", "Shapes for UML & ER Diagrams" 등을 추가하여 사용중입니다.
따로 삭제하기전까지는 다시켜도 계속 유지되는것으로 보이네요.

Hot Key

Space : 누른 상태에서 드래그 시 화면이동
Alt : 항목 선택하여 드래그 시 선택한 항목 복사

Embedding

Excalidraw는 오픈소스 프로젝트입니다.
코드를 수정하여 직접 돌려볼 수도 있고, 도커를 이용한 self hosting 도 가능하다고 합니다.
그리고 React Component 로도 제공 된다고 하네요.

https://github.com/excalidraw/excalidraw

GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

노션, 옵시디언 등의 노트앱에서 Excalidraw를 사용할 수 있습니다.

Disadvantage

단점으로는 폰트를 변경할 수 없다는 점이 불편했습니다.
특히나 세가지 폰트 중 두개는 영어전용 폰트라서, 한글은 무조건 기본폰트로 나옵니다.
디자인때문에 사용하는 것인데, 큰 단점이 아닐 수 없네요.
대신 옵시디언에서는 font를 따로 설정할 수 있는 기능까지 제공한다고 하니, 폰트변경이 꼭 필요하다면 옵시디언을 이용하는 방법을 고려해보는것이 좋을것 같습니다.