SQL to ER Diagram: 무료 브라우저 기반 SQL 스키마 시각화

SQL to ER Diagram은 SQL 스키마 정의를 웹 브라우저 내에서 직접 대화형 엔티티-관계 다이어그램(ERD)으로 변환하는 무료 오픈 소스 도구입니다. CREATE TABLE 문을 로컬에서 처리함으로써, 이 도구는 민감한 스키마 데이터를 외부 서버에 업로드하지 않고도 테이블, 컬럼, 기본 키(primary keys), 외래 키(foreign keys)를 시각화할 수 있게 해줍니다.

로컬 우선 아키텍처 및 개인정보 보호

SQL to ER Diagram은 완전히 클라이언트 측에서 작동하여 데이터베이스 스키마가 서버에 업로드되거나 저장되지 않도록 보장합니다. 이러한 아키텍처는 계정 생성, 가입 또는 유료 결제 장벽의 필요성을 제거하여, 기존 데이터베이스 시각화 도구에 대한 개인정보 보호 중심의 대안을 제공합니다.

주요 기능

• 다중 방언 지원: 이 도구는 PostgreSQL, MySQL, SQLite, SQL Server용 표준 CREATE TABLE 및 ALTER TABLE DDL을 파싱합니다.
• 대화형 시각화: 사용자는 테이블을 드래그하여 레이아웃을 배치하고, 자동 정렬 기능을 사용하며, 메모나 그룹 상자를 추가할 수 있습니다.
• 내보내기 옵션: 다이어그램은 고해상도 PNG 또는 벡터 SVG 파일로 내보낼 수 있습니다.
• 상태 유지: 전체 프로젝트를 파일로 저장하거나 전체 스키마를 링크에 직접 인코딩하는 URL을 통해 공유할 수 있어, 백엔드 데이터베이스가 필요하지 않습니다.

기술적 구현 세부 사항

개발자 robhati는 프레임워크 없이 순수 JavaScript를 사용하여 이 도구를 구축했으며, 그 결과 gzipped 크기가 약 32KB에 불과합니다. 구현은 높은 성능과 스키마 편집의 정밀한 정확성에 초점을 맞추고 있습니다.

렌더링 엔진

수백 개의 테이블을 렌더링할 때 부드러움을 유지하기 위해, 이 도구는 DOM이나 SVG 대신 HTML5 <canvas> 요소를 사용합니다. 테이블은 뷰포트 컬링(viewport culling)이 적용된 캐시된 비트맵으로 래스터화되어, 대규모 스키마에 대한 성능을 최적화합니다.

정밀한 SQL 파싱

SQL 파서는 모든 토큰에 대해 소스 범위를 추적합니다. 이를 통해 도구는 "정밀한" 편집을 수행할 수 있습니다. 예를 들어, 사용자가 캔버스에서 테이블 이름을 직접 변경하면, 도구는 원래의 주석과 형식을 유지하면서 SQL 코드 내의 관련 식별자와 그 참조만 업데이트합니다.

JavaScript vs. WASM 실험

개발 과정에서 제작자는 Rust/WASM 버전을 실험했습니다. WASM 버전의 $O(n^2)$ 중첩 해결(overlap-resolution) 단계가 2.2배 더 빨랐지만, JS-WASM 경계 오버헤드 때문에 전체 파서는 약 37% 더 느려졌습니다. 결과적으로 최종 버전은 순수 JavaScript로 유지되었습니다.

커뮤니티 인사이트 및 대안

Hacker News 커뮤니티의 사용자들과 개발자들은 ER 다이어그램의 유용성과 이론적 특성에 대해 몇 가지 사항을 강조했습니다.

이론적 차이점

한 사용자는 데이터베이스 테이블과 엔티티 사이의 엄격한 구분을 언급하며, SQL만으로는 진정한 엔티티-관계 다이어그램을 생성하기에 충분한 정보를 제공하지 않는다고 지언했습니다. 엔티티는 근본적으로 테이블과 다르기 때문입니다.

다른 도구와의 비교

커뮤니티 구성원들은 몇 가지 대안 및 보완 도구를 제안했습니다:

• Mermaid.js: ER 다이어그램을 지원하지만, SQL to ER Diagram보다 시각적으로 덜 세련된 것으로 묘사됩니다.
• Azimutt: 데이터베이스 시각화용 또 다른 도구입니다.
• SQLGlot: 생성 전 기본 방언으로 변환하여 더 많은 SQL 방언을 지원할 수 있도록 SQLGlot과 같은 변환 레이어를 통합하라는 제안이 있었습니다.

사용자 경험

사용자들은 이 도구의 모바일 사용성을 높게 평가했으며, 특히 모바일 기기에서 팬(panning), 줌(zooming), 요소 선택이 매끄럽게 느껴진다고 언급했습니다.