다이어그램을 쉽게 그리게 해주는 무료 툴 Draw.io 기초 사용법 교육 및 소개 (설치 x, 무료 O)

 제가 문서 작업을 진짜 너무 너무 너무 못하는데 이번에 아키텍처를 그려야 될 일이 있었습니다. 보통 제가 ppt로 그리는 실력은 아래와 같습니다. 제가 한 것 중에 TOP 급 수준입니다. ㅋㅋㅋ

 

위의 내용을 무료 툴인 Draw.io 로 만들어보았습니다. 문서 작업 최하위 티어인 저도 평균으로 보이게 해주는 마법의 도구입니다.

혼자서 쉽게 사용법을 익힐 수 있을만큼 직관적인 UI를 가지고 있습니다. 무엇보다 무료입니다.  그리고 설치가 필요없습니다. 간단하게 아래에서 소개하겠습니다. 

• 구글에서 drawio 로 검색합니다.

• 저장 공간을 선택합니다. 시연에선 Device를 선택해서 로컬에 저장하겠습니다. 일단 처음 작업하시니깐 Create New Diagram을 선택합니다. 

• 개발자라면 당연히 그려야 하는 시퀸스다이어그램, 플로우차트, ERD 등의 여러 템플렛이 있습니다. 저는 Cloud 아키텍처를 그려야 해서 Cloud를 선택합니다. 

• 원하시는 것을 선택하시고 Create 버튼을 누릅니다. 저장 경로와 저장 파일 형식을 물어봅니다. 일단 XML File(*.drawio) 확장자로 저장합니다. 그래야 나중에 언제든 다시 열어서 수정 등의 추가 작업을 하실 수 있습니다.  이미지로 필요하면 Save as > png로 추가 저장해서 사용하시면 됩니다.  

• 선택한 템플릿을 이리 저리 지워보고 옮겨 보고 가지고 놀아봅니다. 

• 왼쪽 상단 Search Shapes 에서 db 라고 검색해 봅니다. 그리고 원하는 디자인을 선택합니다. 더블클릭해서 DB라고 텍스트를 입력해 봅니다.

• 우측에서 텍스트의 크기와 색상 등을 변경해 봅니다. 

• user라고 검색하고 아무거나 추가합니다. 

• 도형을 클릭하면 화살표가 생기는데 화살표를 클릭해서 드래그 해봅니다. 그리고 화살표 모양도 바꾸어봅니다.

• 상단의 + 기호를 눌러서 text를 선택하고 입력해 봅니다.

          

• 이번에는 Rectangle (사각형)을 선택하고 색깔을 입히고, 뒤로 가게 배치를 해봅니다.

• 마지막으로 bigquery 라고 검색하고 디자인 중 아무거나 클릭해봅니다.

어때유 참 쉽쥬?  지금한 것만 응용해도 뭐든지 만들 수 있습니다. 그리고 없는 이미지는 drawio로 드래그하고 크기만 조정하면 쉽게 사용가능합니다. (앞광고, 뒷광고, 옆광고 그런거 아닙니다. 작업하다가 좋은 툴 발견해서 공유하는 겁니다.) 

• 아 마지막으로 File > Save as > png 형식으로 저장해서 확인해 봅니다.