ERD Editor

데이터베이스 스키마를 눈으로 보며 설계하세요: 브라우저에서, IDE에서, 또는 코딩 에이전트에게 맡겨서

English | 한국어 | 中文 | 日本語

erd-editor.io 열기 — 브라우저에서 설치 없이 바로 쓰거나, VS Code, JetBrains IDE, Obsidian, Google Drive용으로 설치하세요.

어디서 작업하든 편집기 하나, .erd.json 파일 하나: 웹, Google Drive, VS Code, JetBrains IDE, Obsidian, 여러분의 앱 안, 그리고 코딩 에이전트의 손에서도.

기능

• 설계 — 테이블, 컬럼, 메모, 테이블 그룹, 네 가지 관계 카디널리티, ON DELETE와 ON UPDATE, 대체 키, 자동 배치
• 명명 표준 — 논리명과 물리명, 단어·용어·도메인 사전에서 정해지는 물리명과 데이터 타입, CSV 가져오기·내보내기와 검사를 갖춘 사전 탭
• 가져오기 — SQL DDL, GraphQL SDL, DBML, AML. 다이어그램을 바꾸거나 기존 다이어그램에 더합니다
• 내보내기 — 데이터베이스 8종의 DDL, 22개 언어·ORM의 코드, PNG와 SVG
• 탐색 — 명령 팔레트(Ctrl/Cmd+K), 찾기·바꾸기가 있는 탐색기 트리, Graph와 Flow 뷰
• 기록 — 실행 취소와 다시 실행, 편집 세션을 되감는 타임 트래블, 다른 파일과 비교하는 Diff 뷰어
• 25개 언어, 그리고 회색·강조색을 고르는 System·Light·Dark 테마
• 협업 — erd-editor.io의 실시간 세션, 그리고 옆에서 함께 편집하는 코딩 에이전트

데이터베이스: Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake, SQLite

코드: TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go, SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML, Mermaid, PHP, Doctrine, Rust, SeaORM, Swift, Zod, JSON Schema

기능별 사용법은 편집 가이드에 있습니다.

코딩 에이전트

Claude Code, Codex 등 MCP 클라이언트에게 스키마 변경을 부탁하고, 캔버스에서 바뀌는 모습을 지켜보세요.

@dineug/erd-editor-mcp는 에이전트에게 편집 작업마다 도구 하나를 줍니다. VS Code, Obsidian, JetBrains IDE가 그 다이어그램을 갖고 있으면 에이전트는 협업자 한 명으로 참여하고, 에이전트의 실행 취소는 자기 편집만 되돌립니다. 편집기가 없으면 디스크의 파일을 편집하고, 연결을 끈 편집기나 신뢰하지 않은 워크스페이스·프로젝트에서는 읽기만 하고 편집은 거부됩니다. Node.js 22.12 이상이 필요합니다. 프로젝트 폴더에서 명령 한 줄로 추가하세요:

# Claude Code
claude mcp add --transport stdio erd-editor -- npx -y @dineug/erd-editor-mcp
# Codex
codex mcp add erd-editor -- npx -y @dineug/erd-editor-mcp

다른 클라이언트 설정과 도구 목록은 README에 있습니다.

어디서 쓸 수 있나

IDE에서는 확장자가 .erd.json인 빈 파일을 만들어 여세요. Obsidian에서는 ERD Editor: Create new diagram을 실행하고, Google Drive에서는 새로 만들기 → 더보기 → ERD Editor를 고릅니다.

실시간 협업

ERD Editor는 모든 편집을 액션 스트림으로 주고받습니다. 그래서 브라우저 탭이나 분할한 편집기처럼 한 다이어그램을 여러 곳에서 열어도 동기화되고, 코딩 에이전트도 협업자 한 명으로 참여합니다.

erd-editor.io 사이드바의 협업 버튼에서 세션 시작을 고르고 링크를 공유하면, 링크를 연 모두가 함께 편집합니다. 링크가 유일한 열쇠이니 편집을 맡길 사람에게만 공유하세요. 세션은 호스트의 브라우저에 있고 호스트가 마지막 탭을 닫으면 끝나므로, 다이어그램이 필요한 게스트는 먼저 내보내야 합니다.

피어는 WebRTC로 연결되고, 다이어그램과 모든 편집은 AES-GCM으로 암호화됩니다. 시그널링 릴레이는 평문을 보지 못하고, 방 키는 브라우저가 어떤 요청에도 넣지 않는 URL 프래그먼트에 있습니다.

flowchart TB
    subgraph clientA["Client A"]
        bcA["Broadcast Channel"]
        tabA1["Tab (leader)"]
        tabA2["Tab"]
        swA["Shared Worker"]
        idbA[("IndexedDB")]

        bcA <--> tabA1
        bcA <--> tabA2
        tabA1 <--> swA
        tabA2 <--> swA
        swA <--> idbA
    end

    subgraph clientB["Client B (guest)"]
        tabB1["Tab"]
    end

    relay["Signaling Relay (nostr / mqtt)"]

    tabA1 <-->|"WebRTC (AES-GCM)"| tabB1
    tabA1 -. "signaling" .-> relay
    tabB1 -. "signaling" .-> relay

임베딩

npm install @dineug/erd-editor

import '@dineug/erd-editor/erd-editor.js';

const editor = document.createElement('erd-editor');
// 편집기는 컨테이너를 채우고, 커스텀 엘리먼트는 기본이 inline입니다
Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });
document.body.appendChild(editor);

편집하지 않고 다이어그램을 보여 주기만 하려면 @dineug/erd-editor/erd-viewer.js를 가져오고 <erd-viewer src="diagram.erd.json" style="display: block; height: 480px"></erd-viewer>를 두세요. 스타일로 정한 상자 안에서 다이어그램을 이동하고 확대하고 검색할 수 있습니다. 패키지 루트를 가져오는 것만으로는 어느 엘리먼트도 정의되지 않습니다.

스크립트를 불러올 수 없는 페이지(위키나 사이트 빌더 등)에서는 대신 호스팅된 뷰어를 iframe으로 넣을 수 있습니다.

<iframe src="https://erd-editor.io/embed?src=https%3A%2F%2Fgithub.com%2Fdineug%2Ferd-editor%2Fblob%2Fmain%2Fdata%2Fembed-small.erd.json" width="100%" height="480" style="border: 0" loading="lazy" title="ERD Editor"></iframe>

이 한 줄은 이 저장소의 data/embed-small.erd.json을 보여 줍니다. erd-editor.io/embed의 빌더가 파일의 URL과 뷰어 옵션으로 이 줄을 만들어 줍니다. GitHub의 파일이나 gist는 여기서처럼 그 페이지에 보이는 주소를 그대로 줄 수 있습니다. 호스팅된 뷰어는 이 파일을 GitHub의 raw 호스트에서 가져오므로 공개 저장소와 공개 gist에서만 동작하며, raw 호스트는 각 파일을 5분 동안 캐시합니다. gist는 첫 번째 파일을 보여 줍니다. 그 밖의 서버에 둔 파일은 그 서버가 erd-editor.io의 교차 출처 요청(CORS)을 허용해야 합니다.

두 엘리먼트는 어떤 프레임워크에서도, 프레임워크 없이도 동작합니다. 속성과 엘리먼트 API는 packages/erd-editor를 보세요.

문서

• 편집 가이드 — 편집기의 모든 기능
• 엘리먼트 API — 여러분의 앱에 넣는 <erd-editor>; <erd-viewer>는 packages/erd-editor를 보세요
• MCP — MCP 서버와 도구
• 문서

패키지

pnpm 워크스페이스입니다. @dineug/erd-editor, @dineug/erd-editor-mcp, @dineug/erd-editor-yjs는 npm에 게시되고, 플러그인 셋은 각자의 스토어로 배포되며, app은 erd-editor.io이고, 나머지는 이 빌드들이 가져다 쓰는 비공개 라이브러리입니다.

개발

Node 22.22.1+, 24.11+ 또는 26+(.nvmrc는 22.23.2 고정), pnpm 10.34.3, Git 2.32+가 필요하고, IntelliJ 플러그인에는 JDK 17+도 필요합니다.

pnpm install
pnpm --filter @dineug/erd-editor exec playwright install --with-deps chromium # pnpm test용
pnpm --filter @dineug/erd-editor-app dev # 웹 앱
pnpm check # 포맷, 린트
pnpm test  # 모든 패키지의 타입 검사와 스펙
pnpm build

IntelliJ 플러그인은 packages/intellij-plugin에서 Gradle로 빌드하고, e2e 스위트는 pnpm test와 따로 돕니다. 변경마다 돌릴 검사, 커버리지, e2e 스위트, 커밋 규칙은 AGENTS.md에 있습니다.

기여

이슈와 풀 리퀘스트를 환영합니다. 커밋 메시지는 Conventional Commits를 따릅니다.

라이선스

MIT © SeungHwan-Lee