2P by GN⁺ | ★ favorite | 댓글 1개
  • SQL 스키마를 붙여넣으면 브라우저 안에서 테이블, 컬럼, 키, 관계를 즉시 ERD로 시각화함
  • PostgreSQL, MySQL, SQLite, SQL Server 문법의 CREATE TABLEALTER TABLE DDL을 파싱하며 기본 키·외래 키와 unique, not-null 제약을 처리함
  • 테이블 드래그, 자동 배치, 메모 추가, 확대·축소, 더블클릭 이름 변경 등 인터랙티브 편집을 지원함
  • 결과물은 고해상도 PNG, 벡터 SVG, 프로젝트 파일, URL에 다이어그램을 인코딩한 공유 링크로 내보낼 수 있음
  • 계정, 가입, 설치가 필요 없고 SQL 스키마가 서버에 업로드되거나 저장되지 않아 로컬 실행에 초점을 둠

SQL 붙여넣기, 스키마 보기

  • 왼쪽 편집기에 CREATE TABLE 문을 넣으면 SQL 스키마가 ER 다이어그램으로 표시됨
  • 예시 스키마는 작은 전자상거래 구조이며 users, addresses, products, orders, order_items, reviews의 6개 테이블7개 관계로 구성됨
  • 테이블을 드래그할 수 있고, 스크롤로 확대·축소할 수 있으며, 더블클릭으로 이름을 바꾸고 완료 후 내보낼 수 있음
  • 예시 스키마를 불러오는 기능이 있으며, 화면에는 확대 비율 122%가 표시됨
  • 모든 처리는 브라우저에서 100% 로컬로 실행되고, 스키마는 브라우저 밖으로 나가지 않음

SQL to ER Diagram — 무료 온라인 ERD 생성기

  • SQL to ER Diagram은 SQL 스키마를 브라우저 안에서 인터랙티브 ERD로 바꾸는 무료 오픈소스 도구임
  • CREATE TABLE 문을 붙여넣으면 테이블, 컬럼, 기본 키, 외래 키, 관계를 즉시 시각화함
  • PostgreSQL, MySQL, SQLite, SQL Server에서 작동함
  • 테이블 드래그, 자동 레이아웃 정렬, 메모 추가, PNG 또는 SVG 내보내기를 지원함
  • 아무것도 업로드되지 않으며, 스키마는 사용자의 기기에 남음

자주 묻는 질문

  • SQL에서 ER 다이어그램을 만들려면 편집기에 SQL CREATE TABLE 문을 붙여넣으면 되고, 도구가 인터랙티브 ERD를 즉시 렌더링함
    • 테이블을 드래그해 배치한 뒤 PNG 또는 SVG로 내보낼 수 있음
  • 지원 SQL 방언은 PostgreSQL, MySQL, SQLite, SQL Server이며, 표준 CREATE TABLEALTER TABLE DDL을 파싱함
    • 기본 키, 외래 키, unique, not-null 제약을 처리함
  • SQL to ER Diagram은 완전히 무료이며 오픈소스이고, 계정이나 가입이 필요 없음
  • 모든 작업은 브라우저에서 로컬로 실행되며, SQL 스키마는 서버에 업로드되거나 저장되지 않음
  • 다이어그램은 고해상도 PNG, 벡터 SVG, 전체 프로젝트 파일, URL에 다이어그램을 인코딩한 공유 링크로 내보낼 수 있음
  • 설치가 필요 없으며, 데스크톱과 모바일의 웹 브라우저에서 실행됨

댓글과 토론

Hacker News 의견들
  • 몇 달 전 v0로 함께 만든 도구 https://v0-yaerd.vercel.app가 떠오름
    Laravel 마이그레이션 파일을 해석해서 ERD를 만들 수 있는 도구를 못 봐서 만들었고, 이후 기본적인 SQL 지원도 프롬프트로 추가했음

  • 도구는 아주 멋지지만, SQL만으로는 ER 다이어그램을 만들 수 없다고 봄
    엔터티테이블은 근본적으로 다르고, 매우 비슷하긴 해도 SQL만으로는 ER 다이어그램을 만들 만큼의 정보가 부족함
    이 도구가 쓸모없다거나 이런 종류의 다이어그램이 도움이 안 된다는 뜻은 아니고, 다소 원론적인 얘기라 다른 사람들은 동의하지 않을 수도 있음

    • 엔터티와 테이블이 대체로 서로 대응된다는 점이 수많은 ORM의 기본 원리 아닌가 싶음
      물론 DDL이 엔터티의 생명주기에 대해 많은 걸 말해주지는 않지만, 관계·필드·카디널리티를 그래프로 표현하는 정도가 기준이라면 충분해 보임
    • 더 정확히 말하면, Chen의 정의 기준으로 SQL에서 뽑아낸 ER 다이어그램은 가장 낮은 수준의 물리적 다이어그램이고, 여기서 논리적/개념적 다이어그램을 재구성할 수는 없음
      요즘은 이 차이를 신경 쓰는 사람이 많지 않은 듯함
    • SQL에서 ER로 바꾸는 용도는 처음 보는 데이터베이스를 파악하기 위한 것임
      이미 DB는 존재하지만 ERD가 없고, 문서도 거의 없을 수 있음
      그래서 탐색 도구에 가깝고, 이상적으로는 뷰를 만들고 메모를 붙일 수 있어야 함
      테이블 수가 엄청 많거나 외래 키가 빠진 테이블이 많을 때 전체 ERD를 한 번에 보지 않아도 되기 때문임
    • 차이를 좀 더 설명해주면 좋겠음
      실무적으로는 거의 서로 바꿔 쓸 수 있지만, 개념적으로는 엔터티와 관계 위에 더 풍부한 의미 계층이 있을 수도 있어 보임
      예를 들면 관계에 대한 설명이나 엔터티에 붙는 추가 주석 같은 것들임
    • 좀 더 자세히 설명해주면 좋겠음
      엔터티는 항상 테이블과 1:1 관계라고 이해하고 있었고, 예시가 있으면 큰 도움이 될 듯함
  • 모바일 사용성은 100점 만점에 1000점임
    패닝, 확대/축소, 선택, 이동이 너무 매끄러워서 내가 착각하는 줄 알았음

    • 전체 코드베이스가 솔직히 신선함: https://github.com/royalbhati/sqltoerdiagram/blob/main/src/m...
      복잡한 문제를 단순한 해법으로 정제해내는 개발자를 좋아하는데, 이 개발자는 정말 뛰어남
      개발자에게 줄 수 있는 더 높은 칭찬이 떠오르지 않음
    • 처음 든 생각은 다이어그램 부분을 별도 라이브러리로 떼어내야 한다는 것이었음
      ERD 말고도 이 다이어그램 기능을 쓸 곳이 많아 보임
    • 정말 좋음
      더블 탭으로 편집해도 확대/축소 수준이 초기화되지 않음
      지금까지 본 모바일 친화 사이트 중 확실히 손꼽히는 수준임
    • Safari 모바일에서 텍스트 필드를 누르면 확대되는 것만 아쉬운데, 이건 다들 겪는 문제임
  • 대단한 건 아니고 작은 도구지만 다른 사람들에게도 유용할 것 같았음
    데이터베이스 스키마를 시각화해야 하는 일이 계속 있었는데, 대부분의 도구가 유료 장벽, 필수 가입, SQL을 남의 서버로 보내야 하는 문제를 갖고 있었음
    백엔드 없음, 계정 없음, 데이터가 내 기기를 떠나지 않음
    구현하면서 재미있었던 부분도 있음: DOM/SVG 대신 테이블을 캐시된 비트맵으로 래스터화하고 뷰포트 컬링을 써서 화면에 수백 개 테이블이 있어도 부드럽게 유지함
    SQL 파서는 모든 토큰의 소스 범위를 추적해서 테이블 이름 변경 같은 편집이 관련 식별자와 참조만 정확히 바꾸고, 주석과 포맷은 그대로 둠
    URL에 전체 스키마가 들어가며, 공유는 스키마를 URL 자체에 직렬화하는 방식이라 백엔드·저장 상태·계정이 필요 없음
    Rust/WASM 버전도 실험했지만 JS↔WASM 경계 비용이 계산 절약분보다 커서 파서가 약 37% 느렸고, 다만 O(n^2) 겹침 해소 패스는 약 2.2배 빨랐음
    결국 순수 JavaScript로 유지했고, 프레임워크 없이 gzip 기준 약 32KB임

    • 제목에는 무료라고 되어 있는데, 그렇다면 어떤 자유 소프트웨어 라이선스를 쓰는지 궁금함
      라이선스가 명시되지 않았다면 오픈소스일 수는 있어도 자유 소프트웨어는 아님
    • URL에 전체 스키마가 들어간다면 URL 길이 제한 때문에 문제가 되지 않을까 싶음
      “모든 송신자와 수신자는 프로토콜 요소 안에서 최소 8000 옥텟 길이의 URI를 지원하는 것이 권장된다.”
      https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5
    • 정말 잘 만들었음
      반응형이고 깔끔하며, 가입 장벽 없는 온보딩 경험이 훌륭함
  • “엔터티 vs 테이블” 구분은 실제로 존재하지만, 기존 스키마를 빠르게 시각화하고 싶은 대다수 개발자에게는 이 정도면 충분하다고 봄
    여기서는 완벽함이 유용함의 적
    대부분은 ORM 추상화를 만들려는 게 아니라 무엇이 무엇과 연결되어 있는지 보고 싶을 뿐임

  • https://explain.dalibo.com/가 떠오름
    쿼리 실행 계획을 시각화하는 도구이고, SQL 쿼리 최적화에 써본 도구 중 가장 유용한 것 중 하나였음
    민감한 데이터에 쓰려면 아래쪽의 완전 오프라인 v2 버전을 내려받는 게 좋음

  • 직선과 90도 꺾인 선 옵션도 있으면 좋겠음
    휘어진 선은 별로 좋아한 적이 없지만, 보기에는 멋지고 잘 만들었음

    • 할 일 목록에 추가하겠음
  • 이 SVG들을 CLI로 생성하는 방법이 있는지 궁금함
    정말 마음에 들고, 비슷한 기능을 하는 VSCode의 Postgres 확장도 좋았지만 VSCode에 묶여 있음
    역시 저장소에 넣어둘 수 있는 내보내기 가능한 CLI 옵션이 없음

  • https://github.com/ondras/wwwsqldesigner를 쓰고 있는데, 비교 대상으로 고려할 만하다고 봄

    • V8CGI의 그 Ondras인가?
      그 프로젝트를 정말 좋아했고, 최초의 서버 사이드 JS 구현 중 하나였음
      혹시 나만 팔로워였을지도 모르지만, Ondřej, 작업물 정말 좋았음
  • 괜찮지만 GitHub에 LICENSE 파일이 없음: https://github.com/royalbhati/sqltoerdiagram