draw.io 완벽 가이드: 설치 없이 무료로 순서도·플로우차트 그리는 법

기획서를 쓰다 보면 "이 흐름을 그림으로 보여줘야 하는데" 하는 순간이 꼭 옵니다. 로그인 절차, API 호출 시퀀스, DB 테이블 관계 같은 것들은 글로 설명하면 장황하지만 다이어그램 하나면 단번에 이해됩니다. 문제는 도구입니다. 값비싼 유료 프로그램을 깔자니 부담스럽고, 파워포인트로 도형을 일일이 끌어다 그리자니 시간이 너무 듭니다.

이럴 때 가장 먼저 추천하는 도구가 draw.io(현재 공식 명칭 diagrams.net) 입니다. 설치가 필요 없고, 완전 무료이며, 회원가입조차 강제하지 않습니다. 이 글에서는 draw.io가 무엇인지부터 실무에서 바로 쓸 수 있는 사용법, 그리고 자주 겪는 실수까지 차근차근 정리하겠습니다.

1. draw.io는 어떤 도구인가

draw.io는 브라우저에서 동작하는 무료 다이어그램 편집기입니다. 접속 주소는 https://app.diagrams.net/ 이며, 별도 설치 없이 웹페이지를 여는 순간 바로 작업을 시작할 수 있습니다.

지원하는 다이어그램의 범위가 상당히 넓습니다.

• 순서도(Flowchart): 업무 프로세스, 알고리즘 흐름
• 네트워크 다이어그램: 서버·라우터·방화벽 구성도
• UML: 클래스 다이어그램, 시퀀스 다이어그램
• ER 다이어그램: 데이터베이스 테이블 관계 설계
• BPMN: 비즈니스 프로세스 모델링
• 회로도: 전자 회로 설계

즉 개발자, 기획자, 인프라 엔지니어가 다루는 거의 모든 도식을 한 도구로 해결할 수 있습니다. 웹 버전 외에 데스크톱 앱(Windows/macOS/Linux)도 있어, 인터넷 없이 오프라인에서 쓰고 싶다면 설치형을 받으면 됩니다.

2. 시작하기: 저장 위치 선택부터

draw.io에 처음 접속하면 다이어그램을 어디에 저장할지 먼저 묻습니다. 이 선택이 이후 작업 흐름을 좌우하므로 중요합니다.

• Google Drive / OneDrive: 클라우드에 자동 저장. 여러 기기에서 이어 작업할 때 편리
• Device(기기): 내 컴퓨터에 .drawio 파일로 저장. 별도 계정 연동 불필요
• GitHub / GitLab: 저장소에 다이어그램을 버전 관리하며 저장

처음 써본다면 Device 를 선택하는 것을 추천합니다. 계정 연동 없이 가장 빠르게 시작할 수 있고, 나중에 클라우드로 옮기는 것도 어렵지 않습니다. 저장 위치를 고른 뒤 "Create New Diagram(새 다이어그램)" 을 누르면 빈 캔버스와 함께 템플릿 선택 창이 뜹니다.

3. 핵심 사용법 5단계

draw.io의 화면은 크게 세 영역입니다. 왼쪽은 도형 팔레트, 가운데는 캔버스, 오른쪽은 선택한 요소의 속성 패널입니다. 이 구조만 익히면 나머지는 직관적입니다.

1단계 — 도형 배치: 왼쪽 팔레트에서 원하는 도형을 캔버스로 드래그합니다. 순서도라면 시작/종료는 둥근 사각형, 처리는 사각형, 분기는 마름모를 씁니다.

2단계 — 텍스트 입력: 도형을 더블클릭하면 바로 글자를 적을 수 있습니다.

3단계 — 연결선 긋기: 도형 위에 마우스를 올리면 가장자리에 파란 화살표가 나타납니다. 이걸 끌어다 다른 도형에 놓으면 연결선이 생깁니다.

4단계 — 스타일 조정: 오른쪽 속성 패널에서 색상, 선 굵기, 글꼴을 바꿉니다. 여러 도형을 한꺼번에 선택해 일괄 변경도 가능합니다.

5단계 — 정렬: 도형들을 드래그하면 빨간 가이드선이 나타나 자동으로 줄을 맞춰줍니다.

draw.io는 텍스트 기반 정의도 지원합니다. 예를 들어 메뉴에서 Extras → Edit Diagram 을 열면 XML로 다이어그램을 직접 편집할 수 있습니다. 간단한 노드 구조를 코드로 빠르게 만들고 싶을 때 유용합니다.

<!-- 로그인 흐름을 XML로 정의한 예시 -->
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- 시작 노드 -->
    <mxCell id="start" value="시작" style="rounded=1;"
            vertex="1" parent="1">
      <mxGeometry x="120" y="40" width="100" height="40" as="geometry"/>
    </mxCell>
    <!-- 분기 노드 -->
    <mxCell id="check" value="비밀번호 일치?" style="rhombus;"
            vertex="1" parent="1">
      <mxGeometry x="100" y="140" width="140" height="80" as="geometry"/>
    </mxCell>
    <!-- 두 노드를 잇는 화살표 -->
    <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;"
            edge="1" parent="1" source="start" target="check">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

위 XML을 Edit Diagram 창에 붙여넣으면 "시작" 둥근 도형과 "비밀번호 일치?" 마름모가 화살표로 연결되어 그려집니다. 손으로 그리기 번거로운 반복 구조를 만들 때 이 방식이 빠릅니다.

4. 다이어그램 유형별 활용

같은 도구지만 목적에 따라 쓰는 도형 세트가 다릅니다. 왼쪽 팔레트 하단의 "More Shapes(추가 도형)" 에서 필요한 카테고리를 켜면 됩니다.

• 순서도: 기본 Flowchart 도형으로 충분. 분기(마름모)에는 항상 Yes/No 같은 조건 라벨을 붙입니다.
• ER 다이어그램: Entity Relation 도형을 켜면 테이블 형태 도형이 나옵니다. PK/FK 표기를 챙기세요.
• 네트워크 구성도: Networking → Cisco/AWS/Azure 아이콘 세트를 활성화하면 실제 장비 아이콘으로 그릴 수 있습니다.
• UML 시퀀스: 객체 간 메시지 흐름을 세로 생명선(lifeline)으로 표현합니다.

5. 흔히 하는 실수와 해결법

실수 1 — 연결선이 도형을 따라오지 않음 도형을 옮겼는데 화살표가 엉뚱한 곳에 남는 경우가 있습니다. 이는 연결선이 도형의 "고정 지점"이 아니라 캔버스의 좌표에 묶였기 때문입니다. 연결선을 그을 때 도형 가장자리의 파란 십자(X) 표시가 아니라 도형 중앙(테두리가 초록색으로 강조될 때)에 놓아야 도형을 따라 움직입니다.

실수 2 — 저장한 줄 알았는데 사라짐 Device 저장 모드에서는 브라우저 탭을 닫으면 작업 내용이 날아갈 수 있습니다. File → Save(또는 Ctrl+S)로 .drawio 파일을 직접 내려받아 두거나, 클라우드 저장 모드를 쓰세요.

실수 3 — PNG로 내보냈더니 화질이 깨짐 래스터 이미지(PNG)는 확대하면 흐려집니다. 문서·발표용으로 크게 쓸 거라면 벡터 포맷인 SVG 또는 PDF 로 내보내는 것이 좋습니다.

실수 4 — 글꼴이 다른 PC에서 깨짐 특수 글꼴을 쓰면 받는 사람 PC에 그 글꼴이 없을 때 레이아웃이 틀어집니다. 공유용은 기본 글꼴을 쓰거나, SVG로 내보낼 때 글꼴 임베드 옵션을 켜세요.

6. 파일 저장·공유·내보내기

작업이 끝나면 File → Export as 메뉴에서 용도에 맞는 형식을 고릅니다.

• PNG/JPG: 블로그·채팅에 빠르게 붙일 때
• SVG: 확대해도 안 깨지는 벡터, 웹 문서용
• PDF: 인쇄·정식 문서용
• HTML / XML: 다른 도구로 재편집하거나 공유할 때

특히 .drawio 원본 파일을 따로 보관해 두면 나중에 언제든 다시 열어 수정할 수 있으므로, 내보낸 이미지와 원본을 함께 관리하는 습관을 들이는 것이 좋습니다. 팀 작업이라면 GitHub 저장소에 .drawio 파일을 올려 변경 이력을 추적하는 방식이 깔끔합니다.

7. AI에게 물어볼 때 (프롬프트 팁)

다이어그램 구조를 머릿속으로 짜는 단계에서 ChatGPT나 Claude의 도움을 받으면 작업이 훨씬 빨라집니다. draw.io는 XML(mxGraphModel)을 직접 붙여넣을 수 있으므로, AI에게 아예 붙여넣을 코드를 받아 시작하는 전략이 효율적입니다. 아래 프롬프트 예시를 활용해 보세요.

예시 1 — 흐름 설계 요청

회원가입 절차를 순서도로 그리려고 한다.
이메일 입력 → 중복 확인 → 인증메일 발송 → 인증 완료 → 가입 완료 단계가 있다.
각 단계에서 실패했을 때의 분기까지 포함해서,
draw.io에 바로 붙여넣을 수 있는 mxGraphModel XML로 만들어줘.

예시 2 — ER 다이어그램 초안

블로그 서비스의 DB를 설계 중이다.
users, posts, comments 테이블이 있고 관계는 1:N이다.
각 테이블의 주요 컬럼과 PK/FK를 정리한 뒤,
draw.io Entity Relation 형식으로 그릴 수 있게 구조를 설명해줘.

예시 3 — 기존 도식 개선

아래 순서도 XML을 draw.io에서 그렸는데 분기 조건 라벨이 빠져 있다.
각 마름모 분기에 Yes/No 라벨을 추가하고,
가독성을 위해 노드 간격을 더 넓게 조정한 XML로 다시 만들어줘.
(여기에 XML 붙여넣기)

이처럼 "draw.io에 붙여넣을 수 있는 XML로 줘" 라는 조건을 명시하는 것이 핵심입니다. AI가 추상적인 설명 대신 곧바로 작업 가능한 결과물을 내놓게 만들기 때문입니다. 좋은 프롬프트는 좋은 결과물의 절반입니다. 어떤 정보를, 어떤 형식으로 받을지 명확히 지정하는 연습을 하면 도구 활용 속도가 눈에 띄게 빨라집니다.

요약

draw.io는 설치·비용·회원가입 부담 없이 순서도부터 ER 다이어그램, 네트워크 구성도까지 그릴 수 있는 만능 무료 도구입니다. 저장 위치를 먼저 정하고, 도형 배치 → 연결 → 스타일 조정의 흐름만 익히면 누구나 금방 쓸 수 있습니다. 연결선이 도형을 따라오게 만드는 요령, 벡터(SVG/PDF)로 내보내는 습관, 그리고 AI에게 mxGraphModel XML을 요청해 초안을 빠르게 받는 전략까지 챙기면 작업 효율이 크게 올라갑니다.