draw.io는 설치 없이 브라우저에서 바로 사용하는 다이어그램 도구입니다. ERD 전용 도형과 까마귀발 커넥터가 기본으로 들어 있어서, 회원 가입도 결제도 없이 테이블 구조를 그릴 수 있습니다.
draw io erd 사용법은 게시판의 회원·게시글·댓글 테이블을 예제로 확인합니다. ERD 도형을 켜고 컬럼을 채운 뒤 까마귀발 관계선을 연결하고, 완성한 그림을 PNG나 SVG로 내보내는 순서입니다.
시작하기: 저장 위치부터 고르기
브라우저에서 app.diagrams.net에 접속하면 첫 화면에서 파일을 어디에 저장할지 묻습니다. Google Drive, OneDrive, 기기, 브라우저 중에서 고르면 됩니다.
혼자 그리고 이미지만 뽑을 계획이면 기기 저장이 간단하고, 팀과 파일을 주고받을 계획이면 Drive나 OneDrive를 고르는 편이 낫습니다. 브라우저 저장은 지금 사용하는 브라우저 안에만 남기 때문에, 캐시를 지우면 파일도 함께 사라진다는 점을 기억해 두면 됩니다.
저장 위치를 정하고 새 다이어그램을 만들면 빈 캔버스가 열립니다. 왼쪽이 도형 목록, 가운데가 캔버스, 오른쪽이 서식 패널입니다.
ERD 도형 찾기
기본 도형 목록에는 사각형과 화살표만 보이는데, ERD용 도형은 따로 켜야 합니다. 두 가지 방법이 있습니다.
빠른 쪽은 검색입니다. 왼쪽 도형 검색창에 table을 입력하면 컬럼 행이 들어간 엔터티 테이블 도형이 바로 나옵니다. 그대로 캔버스에 끌어다 놓으면 됩니다.
라이브러리를 통째로 켜려면 도형 목록 맨 아래의 More Shapes를 누르고, Software 항목에서 Entity Relation에 체크한 뒤 Apply를 누릅니다. 이렇게 하면 ERD용 테이블 도형과 함께 까마귀발 커넥터가 왼쪽 목록에 추가됩니다. 관계선을 매번 직접 설정하지 않아도 되니 ERD를 자주 그린다면 이쪽을 켜 두면 편합니다.
draw io 테이블 그리기
도형을 캔버스에 놓았다면 이제 내용을 채울 차례입니다.
테이블 이름 입력. 도형의 제목 부분을 더블클릭하면 이름을 입력할 수 있습니다. 게시판 예제라면 members, posts, comments가 됩니다.
행 선택 방법. draw.io의 테이블 도형은 클릭 횟수에 따라 선택 범위가 달라집니다. 한 번 클릭하면 테이블 전체, 행 위를 한 번 더 클릭하면 그 행의 셀, 세 번째 클릭에서 행 전체가 선택됩니다. 처음에는 헷갈리지만 이 규칙만 익히면 컬럼 편집이 훨씬 빨라집니다.
컬럼 추가. 행을 선택한 상태에서 오른쪽 서식 패널의 Arrange 탭을 열면 Insert Row Above와 Insert Row After 버튼이 있습니다. 키보드로는 행을 선택하고 Ctrl+Enter를 누르면 그 행이 복제되는데, 컬럼을 연달아 추가할 때는 이 방법이 가장 빠릅니다.
컬럼 삭제. 여기서 한 가지 주의할 점이 있습니다. 행을 선택하고 Delete 키를 누르면 행의 내용만 지워지고 빈 행은 그대로 남습니다. 행 자체를 없애려면 Arrange 탭의 행 삭제 버튼을 사용해야 합니다.
기본키 표시. draw.io의 테이블 도형에는 기본키 전용 표시가 따로 없어서, 컬럼 이름 옆에 PK, FK를 직접 입력하거나 글씨를 굵게 처리해 구분합니다. 팀 안에서 표기만 통일해 두면 읽는 데 문제가 없습니다.
게시판 예제의 회원 테이블이라면 id(PK), email, nickname, created_at 네 줄이 들어갑니다. 같은 방식으로 게시글과 댓글 테이블도 만들어 둡니다.
관계선 긋기: 까마귀발 표기 고르는 법
테이블 세 개가 준비되면 관계를 연결합니다.
선을 그을 때는 시작할 도형 위에 마우스를 올리고 테두리의 화살표나 파란 점에서 끌어 상대 도형에 놓습니다. 이때 어디에 놓느냐에 따라 두 가지로 연결됩니다. 테이블 이름 위에 놓으면 테이블 바깥에 붙는 연결이 되고, 특정 행 위에 놓으면 그 행에 고정되어 테이블을 옮겨도 선이 그 컬럼을 따라다닙니다. 외래 키 컬럼을 정확히 가리키고 싶다면 행에 연결하는 쪽이 좋습니다.
기호를 까마귀발로 바꾸는 방법은 두 가지입니다. Entity Relation 라이브러리를 켜 두었다면 목록에 있는 까마귀발 커넥터를 그대로 끌어다 사용하면 됩니다. 이미 그은 선을 바꾸려면 선을 선택하고 오른쪽 Style 탭에서 시작점과 끝점 목록을 열어 고릅니다. 까마귀발 모양은 목록 아래쪽에 모여 있습니다.
기호는 세 가지 요소를 조합해 만듭니다. 동그라미는 0, 짧은 선은 1, 갈라진 발 모양은 다수입니다. 회원과 게시글이라면 회원 쪽은 선 두 개(정확히 1), 게시글 쪽은 동그라미와 까마귀발(0 이상)이 됩니다. 어떤 조합이 무엇을 뜻하는지 헷갈린다면 ERD 표기법 총정리에 네 가지 조합이 모두 정리되어 있습니다.
SQL로 테이블 도형 한 번에 만들기
컬럼이 많은 테이블을 하나씩 입력하는 대신, CREATE TABLE 문을 붙여넣어 도형을 만드는 방법도 있습니다. drawio sql로 검색하면 나오는 그 기능입니다.
메뉴에서 Arrange → Insert → Advanced → SQL을 고르거나, 툴바의 + 아이콘에서 Advanced → SQL을 선택하면 입력 창이 열립니다. 여기에 SQL을 붙여넣고 실행하면 컬럼이 채워진 엔터티 도형이 한 번에 생성됩니다.
CREATE TABLE members (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL UNIQUE,
nickname VARCHAR(50) NOT NULL,
created_at DATETIME NOT NULL
);
CREATE TABLE posts (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
member_id BIGINT NOT NULL,
title VARCHAR(200) NOT NULL,
content TEXT NULL,
created_at DATETIME NOT NULL
);만들어진 도형은 컬럼까지 채워져 있지만 관계선은 그려지지 않습니다. 배치를 정리하고 관계선은 위에서 설명한 방식으로 직접 연결하면 됩니다. 컬럼을 직접 입력하는 시간을 줄여 주는 기능입니다.
보기 좋게 정리하기
테이블과 관계선이 다 들어갔다면 배치를 다듬습니다.
정렬과 간격. 여러 도형을 선택하고 Arrange 탭을 열면 왼쪽 맞춤, 가운데 맞춤 같은 정렬 버튼과 간격을 고르게 맞추는 배분 버튼이 있습니다. 눈대중으로 맞추는 것보다 결과가 깔끔합니다.
스타일 복사. 테이블 하나의 색과 테두리를 정한 다음, 그 도형을 선택하고 Alt+C로 스타일을 복사한 뒤 다른 도형을 선택해 Alt+V로 붙여넣으면 같은 서식이 적용됩니다. 테이블이 열 개가 넘어가면 이 단축키가 시간을 많이 줄여 줍니다.
기본 스타일 지정. 마음에 드는 서식을 정한 도형을 선택하고 Ctrl+Shift+D를 누르면 이후 새로 만드는 도형이 그 서식으로 생성됩니다. 처음에 한 번 정해 두면 도형마다 색을 다시 고르지 않아도 됩니다.
세부 조정. 도형을 선택하고 Ctrl+E를 누르면 스타일 문자열을 직접 편집할 수 있습니다. 서식 패널에 없는 값을 조정하거나, 같은 스타일을 다른 도형에 그대로 옮길 때 사용합니다.
PNG·SVG로 내보내기
완성한 다이어그램은 File → Export as에서 형식을 골라 내보냅니다. PNG, JPEG, SVG, PDF를 지원하니 위키나 회의 자료에는 PNG, 확대나 인쇄가 필요하면 SVG나 PDF를 고르면 됩니다.
내보내기 창에는 다이어그램 데이터를 파일에 포함하는 옵션이 있습니다. 이 옵션을 켜면 PNG나 SVG 파일 자체가 다시 draw.io에서 열려 편집 가능한 다이어그램으로 인식됩니다. 이미지 파일만 주고받는 팀이라면 원본을 따로 관리하지 않아도 되니 켜 두는 편이 좋습니다.
파일 공유는 저장 위치에 따라 달라집니다. Google Drive나 OneDrive에 저장했다면 그 서비스의 공유 기능을 사용하면 되고, 기기에 저장했다면 파일을 직접 전달하면 됩니다.
시간을 아끼는 팁 세 가지
도형 복제. 같은 형태의 테이블을 여러 개 만들 때는 도형을 선택하고 Ctrl+D를 누르면 복제됩니다. 컬럼 구성이 비슷한 테이블은 복제한 다음 이름과 몇 줄만 고치는 쪽이 빠릅니다.
스크래치패드 활용. 도형 목록 위쪽의 스크래치패드에 자주 사용하는 도형을 끌어다 놓으면, 다음 다이어그램에서 그대로 꺼내 사용할 수 있습니다. 팀의 표준 서식을 적용한 테이블 도형을 하나 만들어 넣어 두면 매번 서식을 맞출 필요가 없습니다. 다만 스크래치패드의 내용은 브라우저에 저장되므로, 브라우저 데이터를 지우면 함께 사라집니다.
커스텀 라이브러리로 저장. 스크래치패드 편집 버튼을 눌러 Export를 선택하면 XML 파일로 내보낼 수 있습니다. 이 파일을 팀에 공유하면 모두가 같은 도형 세트로 그릴 수 있습니다.
테이블이 많아질 때: 페이지로 나누기
캔버스 아래쪽에는 페이지 탭이 있습니다. 플러스 버튼으로 페이지를 추가하면 파일 하나 안에 여러 장의 다이어그램을 둘 수 있습니다.
테이블이 스무 개를 넘어가면 한 장에 전부 그리는 것보다 회원, 주문, 정산처럼 도메인별로 페이지를 나누는 쪽이 읽기 좋습니다. 파일은 하나로 유지되니 공유할 때도 파일 하나만 전달하면 됩니다. 페이지를 넘나드는 관계는 각 페이지에 짧은 메모를 남겨 어느 페이지의 어떤 테이블과 연결되는지 작성해 두면 나중에 헷갈리지 않습니다.
자주 사용하는 단축키
draw io 다이어그램 작업에서 반복되는 동작에는 대부분 단축키가 있습니다. ERD를 그릴 때 손이 자주 가는 것만 추리면 이 정도입니다.
| 단축키 | 하는 일 |
|---|---|
| Ctrl+Enter | 선택한 행 복제 |
| Ctrl+D | 선택한 도형 복제 |
| Alt+C / Alt+V | 스타일 복사 / 붙여넣기 |
| Ctrl+E | 스타일 문자열 직접 편집 |
| Ctrl+Shift+D | 현재 도형의 서식을 기본값으로 지정 |
| Ctrl+Shift+R | 기본 서식 해제 |
행 복제와 스타일 복사 두 가지만 손에 익어도 테이블 열 개짜리 다이어그램을 만드는 시간이 눈에 띄게 줄어듭니다.
drawio erd 그리기에서 자주 겪는 상황
행을 지웠는데 빈 줄이 남습니다. Delete 키는 내용만 지우기 때문입니다. Arrange 탭의 행 삭제 버튼을 사용해야 행 자체가 없어집니다.
테이블을 옮겼더니 관계선이 엉뚱한 곳에 붙습니다. 선을 테이블 이름 위에 놓으면 테이블 바깥에 연결되고, 특정 행에 놓으면 그 행을 따라다닙니다. 외래 키 컬럼을 정확히 가리켜야 한다면 선 끝을 그 행에 다시 놓으면 됩니다.
도형마다 서식이 제각각입니다. 기준이 될 테이블 하나를 정해 Ctrl+Shift+D로 기본 서식으로 지정해 두고, 이미 그려 둔 도형은 Alt+C와 Alt+V로 맞추면 금방 정리됩니다.
자주 묻는 질문
draw.io는 무료인가요?
무료입니다. 브라우저에서 app.diagrams.net에 접속하면 회원 가입 없이 바로 사용할 수 있고, 도형 라이브러리와 내보내기 기능에 별도 요금이 붙지 않습니다. 데스크톱 앱도 무료로 배포됩니다.
ERD 전용 도형이 따로 있나요?
있습니다. 왼쪽 도형 검색창에 table을 입력하면 엔터티 테이블 도형이 바로 나오고, 도형 목록 아래 More Shapes에서 Software 항목의 Entity Relation 라이브러리를 켜면 ERD용 도형과 까마귀발 커넥터가 함께 추가됩니다.
까마귀발 표기는 어떻게 그리나요?
Entity Relation 라이브러리에 까마귀발 커넥터가 미리 준비되어 있어서 끌어다 사용하면 되고, 이미 그은 선을 바꾸려면 선을 선택한 뒤 Style 탭의 시작점과 끝점 목록에서 고르면 됩니다. 까마귀발 모양은 목록 아래쪽에 모여 있습니다.
작성한 파일은 어디에 저장되나요?
처음 시작할 때 고른 위치에 저장됩니다. Google Drive, OneDrive, 기기, 브라우저 중에서 선택할 수 있고, 저장 위치는 나중에 다른 이름으로 저장하면서 바꿀 수 있습니다. 클라우드에 저장하면 그 서비스의 공유 기능으로 팀에 공유할 수 있습니다.
Entity Relation 라이브러리에서 테이블과 관계선을 직접 만들 수 있습니다. 컬럼이 많다면 SQL 붙여넣기로 테이블 도형을 먼저 생성하고 관계선만 연결하는 편이 빠릅니다. 결과는 PNG나 SVG로 내보낼 수 있습니다.
이미 CREATE TABLE 문이 있는 상태라면 WorksCove ERD에 붙여넣어 관계선까지 자동으로 그려진 다이어그램과 테이블 명세서를 만드는 방법도 있습니다. 전체 과정은 SQL을 ERD로 변환하기에 있고, 다른 무료 도구가 궁금하다면 무료 ERD 도구 비교도 함께 보시면 됩니다.