draw.io : 다이어그램 편집 도구

draw.io (현재 명칭: diagrams.net)은 온라인 및 오프라인에서 다양한 구조/흐름/도식 다이어그램을 만들고 편집할 수 있는 도구입니다.

 

online service : https://www.drawio.com/

draw.io

 

draw.io Desktop : https://github.com/jgraph/drawio-desktop/releases/tag/v28.1.2

Release 28.1.2 · jgraph/drawio-desktop

 

기본 개요

• draw.io는 HTML5 + JavaScript 기반의 웹 앱이자 데스크탑 앱으로 제공됩니다.
• 온라인 버전은 브라우저에서 바로 실행 가능하며, 로그인이나 계정 없이도 그림을 그릴 수 있습니다.
• 데스크탑 앱(윈도우, macOS, 리눅스)은 Electron 프레임워크 기반으로 동작합니다.
• 저장 방식이 유연함 — 로컬 저장, 클라우드 저장 (Google Drive, OneDrive, GitHub, GitLab 등) 가능합니다.
• 다양한 파일 포맷으로 내보내기/가져오기 지원합니다. (PNG, JPEG, SVG, PDF 등)
• Visio (.vsdx 등) 파일과의 호환성도 있습니다. (가져오기/내보내기)
• 기업 및 협업 환경에 통합 가능 — Confluence, Jira, Notion, MediaWiki 등에 플러그인 형태로 내장 가능합니다

기능 & 주요 특징

기능	설명
다양한 다이어그램 유형 지원	플로우차트, 조직도, ERD, UML, 네트워크 다이어그램, 마인드맵, 인포그래픽 등
템플릿 라이브러리	미리 정의된 템플릿을 골라 시작 가능
자동 배치 / 정렬 / 정리 기능	연결선 자동 정리, 정렬 기능 등이 있어 도식이 깔끔해짐
검색 / 툴박스 탐색	shapes 라이브러리, 기능 메뉴 등을 검색창(Omnibox)으로 빠르게 접근 가능
계층 / 레이어 기능	복잡한 다이어그램을 레이어로 분리하여 관리 가능
Shape metadata / 태그 / 사용자 정의 속성	도형에 메타데이터 부여하거나 태그를 활용해 논리적 그룹화 가능
복수 사용자 동시 편집 / 협업	클라우드 저장소와 연동하거나 도구 내에서 공유 가능 환경 (플러그인 통합 시)

 

사용 예 (Use Cases)

• 시스템 아키텍처 설계 / 네트워크 구성도
• 엔터티 관계도 (ERD), 시퀀스 다이어그램, UML 모델링
• 비즈니스 플로우 / 업무 프로세스 모델링
• 조직도 / 계층 구조 시각화
• 마인드맵 / 아이디어 정리
• 인포그래픽 / 보고서용 시각 자료
• UI 흐름도 (user flows) / 와이어프레임
• 클라우드 아키텍처 다이어그램 (AWS, Azure 등) stonetusker.com+2draw.io+2

장점 / 단점

장점

• 무료 / 개방성: 기본 기능은 무료로 제공됨
• 유연한 저장: 클라우드 + 로컬 + 외부 저장소 연동 가능
• 다양한 플랫폼 지원: 브라우저, 데스크탑, 통합 플러그인
• 빠른 시작 가능: 로그인 없이 바로 다이어그램 작성 가능
• 강한 호환성: 여러 포맷 및 다른 다이어그램 툴들과의 호환성
• 협업 가능성: 조직 내 문서 시스템과 통합 시 협업 가능

단점 / 주의점

• 일부 고급 기능은 사용자가 직접 설정해야 함
• 복잡한 다이어그램에서는 성능 저하 가능성
• 아주 세밀한 커스텀 도형 작업은 제한될 수 있음
• 통합 플러그인 사용 시 라이선스 / 버전 호환성 문제 발생 가능
• 2024년 8월, Atlassian 제품(Jira/Confluence)에 대한 라이선스 조정 이슈가 있었다는 보고가 있음

 

아래 그림은 최근에 작성했던 소프트웨어의 순서도(Flowchart) 인데, 작성할 때는 고통스러워도 어떤 설계 문서보다도 소프트웨어 구조를 잘 설명할 수 있는 도식도입니다. 시퀀스 차트 나 DB ERD 등도 중요하겠지만 소프트웨어의 로직 흐름과 각종 예외를 한장의 그림으로 가장 잘 나타낼 수 있습니다.

소프트웨어 로직이 복잡하고 예외가 많을 수록 진가를 발휘합니다. 약 1.5일 정도 소요됐는데 당시에는 눈도 아프고 손목 통증 때문에 고생을 했었네요.