개발 도구 모음

ERD 그리기

브라우저 안에서만 처리됩니다. 입력한 내용과 선택한 파일은 서버로 전송되지 않습니다.

MySQL 백틱, PostgreSQL 큰따옴표, SQL Server 대괄호를 모두 읽습니다. ALTER TABLE … ADD FOREIGN KEY 도 관계로 잡습니다. 이 브라우저에 자동으로 저장됩니다.

다이어그램

테이블 4개 · 관계 5개 — 상자를 끌어 옮기고, 눌러서 고칠 수 있습니다

100% 빈 곳을 끌어 이동 · Ctrl+휠로 확대
usersPKidBIGINTemail *VARCHAR(255)name *VARCHAR(50)created_at *TIMESTAMPcategoriesPKidINTname *VARCHAR(50)FKparent_idINTpostsPKidBIGINTFKuser_id *BIGINTFKcategory_idINTtitle *VARCHAR(200)bodyTEXTpublished_atTIMESTAMPcommentsPKidBIGINTFKpost_id *BIGINTFKuser_id *BIGINTbody *TEXT

왼쪽에서 테이블을 고르거나 다이어그램에서 상자를 누르세요.

관계

  • categories.parent_id → categories.id
  • posts.user_id → users.id
  • posts.category_id → categories.id
  • comments.post_id → posts.id
  • comments.user_id → users.id
→

편집하면 DDL 을 다시 만들어 위 입력창에 넣습니다. 손으로 맞춘 줄바꿈이나 주석은 이때 사라집니다. 컬럼 순서는 ⋮⋮ 를 끌거나, 거기에 초점을 두고 ↑↓ 로 바꿉니다.

다이어그램은 이 브라우저에만 저장됩니다. 서버로 전송되지 않는 대신, 다른 기기나 브라우저에서는 보이지 않고 방문 기록을 지우면 함께 사라집니다. 오래 보관할 것은 SVG·PNG·.sql 로 내려받으세요.

사용법

  1. CREATE TABLE 문을 붙여넣습니다. 구문 강조가 되고, 아래 손잡이를 끌어 입력창을 키울 수 있습니다.
  2. 테이블 상자와 외래키 화살표가 바로 그려집니다. 상자를 끌어 옮기고, 빈 곳을 끌어 화면을 밀고, Ctrl+휠로 확대합니다.
  3. "편집" 탭 왼쪽 목록에서 테이블을 고르면 컬럼·설명을 고치고 관계를 더하거나 지울 수 있습니다. 컬럼 순서는 ⋮⋮ 를 끌어 바꿉니다.
  4. "DDL 내보내기" 탭에서 지금 상태를 CREATE TABLE 문으로 다시 뽑습니다. 그대로 실행할 수 있습니다.
  5. 테마를 바꿔 문서에 넣기 좋은 색으로 만들고, SVG · PNG · .sql 로 저장합니다.
  6. 잘못했으면 Ctrl+Z 로 되돌립니다. 여러 다이어그램을 두고 오갈 수 있습니다.

자주 묻는 질문

어떤 DDL 을 읽을 수 있나요?

MySQL 의 백틱, PostgreSQL 의 큰따옴표와 스키마 접두사, SQL Server 의 대괄호를 모두 읽습니다. 컬럼에 붙은 REFERENCES, 테이블 제약으로 쓴 FOREIGN KEY, 그리고 나중에 ALTER TABLE … ADD FOREIGN KEY 로 붙인 것까지 관계로 잡습니다. 복합 기본키와 복합 외래키도 됩니다. 인덱스·CHECK 제약·기본값처럼 ERD 에 그리지 않는 것은 건너뜁니다.

참조하는 테이블이 DDL 에 없으면 어떻게 되나요?

선을 그리지 않고 아래에 "읽지 못하거나 건너뛴 것" 으로 알려 줍니다. 스키마 일부만 붙여넣었을 때 흔히 생기는 상황인데, 조용히 빠뜨리면 다이어그램에 관계가 없는 것처럼 보여서 오해하기 쉽습니다.

그린 것을 다시 SQL 로 뽑을 수 있나요?

"DDL 내보내기" 탭에서 지금 상태를 CREATE TABLE 문으로 만들어 줍니다. 참조되는 테이블이 먼저 만들어지도록 순서를 맞추고, 순서로 풀 수 없는 관계(자기 참조나 두 테이블이 서로 참조하는 경우)는 ALTER TABLE 로 뒤에 빼기 때문에 그대로 실행할 수 있습니다. 표준 SQL · MySQL · PostgreSQL · SQL Server 중에 고를 수 있고, 예약어나 대소문자가 섞인 이름처럼 감싸야 하는 것만 따옴표를 씌웁니다. 전부 씌우면 PostgreSQL 에서 대소문자를 구분하게 되어 없던 문제가 생기기 때문입니다.

다이어그램에서 직접 고칠 수 있나요?

됩니다. 상자를 누르면 "편집" 탭에 그 테이블의 컬럼이 표로 나옵니다. 이름과 타입을 고치고 PK · NOT NULL · UNIQUE 를 켜거나 끄고, 순서를 바꾸거나 지울 수 있습니다. 테이블과 관계도 더하고 지울 수 있습니다. 고치면 DDL 을 다시 만들어 위 입력창에 넣습니다 — 진실의 원천을 DDL 하나로 두어야 그림과 SQL 이 어긋나지 않기 때문입니다. 대신 손으로 맞춘 줄바꿈이나 주석은 이때 사라집니다.

테이블이나 컬럼에 설명을 달 수 있나요?

됩니다. 편집 탭에서 테이블 설명과 컬럼 설명을 넣으면 다이어그램과 DDL 양쪽에 반영됩니다. 표준 SQL·PostgreSQL 은 COMMENT ON TABLE / COMMENT ON COLUMN 문장으로, MySQL 은 정의 안의 COMMENT 절로 내보냅니다. 붙여넣는 쪽도 두 표기를 모두 읽습니다. 테이블 설명은 상자 머리글 오른쪽에 표시되고, 컬럼 설명은 마우스를 올리면 나옵니다.

테마는 무엇이 다른가요?

기본 테마는 사이트 색을 그대로 따라가서 화면에서 보기 좋습니다. 문서나 발표 자료에 넣을 때는 어두운 색이 그대로 나오면 곤란하므로 "흰 종이", "흑백(인쇄용)" 을 준비했습니다. "청사진" 과 "자정" 은 취향에 따라 고르면 됩니다. 저장한 SVG·PNG 에도 고른 테마 색이 그대로 들어갑니다.

되돌리기는 변경 내역과 뭐가 다른가요?

되돌리기(Ctrl+Z)는 방금 한 동작을 취소하는 것이고 브라우저를 닫으면 사라집니다. 변경 내역은 "어느 시점으로 돌아갈까" 를 고르는 목록이고 저장됩니다. 되돌리기는 짧은 시간 안의 연속 입력을 한 덩어리로 묶으므로, Ctrl+Z 한 번에 방금 친 단어가 통째로 지워집니다.

작업하던 것이 저장되나요?

이 브라우저의 저장 공간(localStorage)에 자동으로 저장됩니다. 다이어그램을 여러 개 두고 이름을 붙여 오갈 수 있고, 상자를 옮긴 위치도 함께 남습니다. 서버로 전송하지 않는 대신 다른 기기나 브라우저에서는 보이지 않고, 방문 기록을 지우면 함께 사라집니다. 오래 보관할 것은 SVG · PNG · .sql 로 내려받으세요.

변경 내역은 어떻게 남나요?

스키마가 실제로 달라졌을 때만 남깁니다. 공백이나 주석만 바뀐 것은 남기지 않고, 짧은 시간 안의 연속 수정은 하나로 합칩니다. 글자마다 항목이 생기면 목록이 수천 줄이 되어 쓸모가 없기 때문입니다. 각 항목에는 "테이블 추가 posts", "컬럼 변경 users" 처럼 무엇이 달라졌는지 적혀 있어서 어느 시점으로 돌아갈지 고를 수 있습니다. 되돌린 것도 내역에 남으므로 되돌리기를 다시 취소할 수 있습니다.

배치가 이상합니다.

외래키 방향을 따라 참조되는 테이블을 왼쪽에, 참조하는 테이블을 오른쪽에 놓습니다. 관계가 복잡하면 선이 겹칠 수 있는데, 자동 배치로 모든 경우를 예쁘게 만들 수는 없어서 상자를 직접 끌어 옮길 수 있게 했습니다. 옮긴 위치는 저장 결과에도 그대로 반영됩니다.

PNG 로 저장하면 글꼴이 달라 보입니다.

PNG 는 SVG 를 이미지로 다시 그려 만드는데, 이때 브라우저가 웹폰트를 쓰지 않고 시스템 글꼴로 그립니다. 글자 모양이 화면과 조금 다를 수 있습니다. 문서에 넣을 때 선명함이 중요하면 SVG 로 저장하세요. 크기에 상관없이 깨지지 않고 글꼴도 보는 쪽 환경을 따릅니다.

스키마가 서버로 전송되나요?

되지 않습니다. 파싱과 그리기, 저장까지 전부 브라우저 안에서 일어납니다. DDL 에는 테이블·컬럼 이름처럼 시스템 구조가 그대로 드러나므로, 남의 서버에 올리지 않아도 되도록 만들었습니다.