🚀 나는 supabase-markdown을 만들었습니다 — 모든 스키마에 걸쳐 전체 Supabase ERD를 생성하는 도구 (Visualizer가 할 수 없기 때문에)

Source: Dev.to

소개

여러분 안녕하세요 👋

Supabase Visualizer를 사용해 본 적이 있다면, 정말 편리하지만 한 가지 제한이 있다는 것을 알게 될 겁니다:

한 번에 하나의 스키마만 볼 수 있습니다.

작은 프로젝트라면 괜찮지만, 앱이 성장하면서 public, storage, auth, graphql_public 그리고 사용자 정의 스키마와 같이 여러 스키마가 생기면 전체 데이터베이스 구조를 한눈에 파악하기가 불가능합니다. “전체 보기”가 절실히 필요했기에 직접 만들었습니다.

🔥 supabase-markdown 소개

GitHub:

npm으로 설치:

pnpm add -D supabase-markdown

🧠 어떤 문제를 해결하나요?

Supabase Visualizer는 한 번에 하나의 스키마만 표시할 수 있어 데이터베이스의 실제 구조를 이해하기 어렵습니다. supabase-markdown을 사용하면 다음을 얻을 수 있습니다:

• 하나의 파일
• 하나의 다이어그램
• 모든 테이블
• 모든 스키마에 걸쳐
• 모든 관계를 한 번에 표시

이제 아래와 같은 단일 통합 ERD를 생성할 수 있습니다.

예시 ERD (Mermaid)

erDiagram
  accounts ||--o{ posts : account_id
  posts ||--o{ post_hashtags : post_id
  hashtags ||--o{ post_hashtags : hashtag_id
  profiles ||--|| accounts : id
  storage.objects ||--o{ public_posts : image_id

한 곳에 모두 모여 있습니다. 스키마를 클릭해서 이동할 필요가 없습니다.

🛠️ 작동 원리

Supabase는 이미 전체 스키마 정보를 다음 명령을 통해 제공합니다:

supabase gen types typescript

생성된 TypeScript 파일에는 다음 정의가 포함됩니다:

• 테이블
• 컬럼
• 열거형(enum)
• 관계
• 외래 키
• 스키마

supabase-markdown은 해당 파일을 파싱하여 다음을 출력합니다:

• 전체 Markdown 문서
• 스키마를 넘나드는 통합 ERD
• 스키마별로 그룹화된 테이블 목록
• 완전 정적 출력 (GitHub, Notion, 문서 사이트에 최적)