YBERD - ERD Editor

ERD Editor는 단일 HTML 파일로 동작하는 오프라인 ERD 설계 도구입니다.
Chrome / Edge에서 로컬 파일로 열어 사용하며, PC 파일에 직접 저장할 수 있습니다.

주요 기능 한눈에 보기

📁 파일 관리

File System Access API로 PC 파일 직접 저장
미저장 변경 감지 → ● 상태바 표시
localStorage 자동 백업 (크래시 복구)
JSON 내보내기/가져오기

📐 테이블·컬럼

eXERD 스타일 인라인 그리드 편집
단일클릭 선택 / 더블클릭 셀 편집
⠿ 드래그로 컬럼 순서 변경
Ctrl+C/V 컬럼 복사/붙여넣기 (크로스 테이블)

🔗 관계선

도트 드래그로 FK 연결 → 자동 동기화
클릭 시 연결 컬럼 하이라이트
우클릭 → 카디널리티 변경 (1:1 / 1:N / 0:N)
크로우풋 + 레이블 표시

📥 가져오기

테이블 설계 MD (트리 형식) 파싱
SQL DDL — MSSQL / MySQL / PostgreSQL / Oracle
FK 관계 자동 연결
AUTO_INCREMENT / IDENTITY 자동 인식

🛠 Constraints

PK FK NN UQ AI
PK 설정 → NOT NULL 자동
FK 연결 → 타입/NN 자동 동기화
AI (Auto Increment) DBMS별 변환

≡ 템플릿

🔑 seq + 타임스탬프
📝 감사 컬럼 (reg_id/dt, mod_id/dt)
🗑 논리삭제 (del_yn/dt/id)
🚦 YN 플래그 (use_yn, del_yn)

파일 열기 / 저장

📄 New

미저장 변경사항 있으면 경고 후 새 ERD 시작
DBMS 선택 후 생성

📂 열기 (Ctrl+O)

Chrome/Edge — 파일 선택 대화상자, fileHandle 보관
이후 Ctrl+S로 같은 파일에 자동 덮어쓰기
Firefox/Safari — 파일 입력 폴백

💾 저장 (Ctrl+S)

연결된 파일 있으면 → 즉시 덮어쓰기
연결 없으면 → 다른이름으로 저장 대화상자
저장 후 localStorage에도 백업

⎙ 다른이름저장

새 파일명으로 저장
이후 그 파일로 자동저장 연결

🕘 최근 파일

새로고침 후 상단에 "최근 파일에 다시 연결" 배너 표시 (Chrome/Edge)
최근 연 파일을 최대 5개까지 기록
툴바 🕘 버튼 또는 배너의 "다른 최근 파일..." → 목록에서 선택해 연결
[연결] — 파일 탐색기 없이 권한 확인만으로 재연결
항목별 ✕ 제거, 또는 "전체 기록 삭제"

📥 드래그 & 드롭으로 열기

ERD JSON 파일을 창에 끌어다 놓으면 바로 열림
Chrome/Edge — 자동으로 파일 연결 + 최근 파일로 등록
Firefox/Safari — 내용만 불러오고, 저장 시 다른이름저장 필요

자동 복구

브라우저가 강제 종료되거나 탭이 닫혀도 localStorage에 자동 백업됩니다.
다음 실행 시 "자동저장된 작업을 불러왔습니다" 토스트가 뜨면 직전 작업이 복구된 것입니다.
상태바의 ● (빨간 점)은 미저장 변경사항이 있음을 의미합니다.

파일과 연결된 적이 있다면(Chrome/Edge), 새로고침 시 최근 파일 재연결 배너가 함께 표시되어 파일 탐색기를 거치지 않고 같은 파일로 바로 이어서 작업할 수 있습니다.

캔버스 조작

줌

마우스 휠 — 커서 위치 기준 줌 인/아웃
툴바 ＋ / － 버튼
Fit — 모든 테이블이 화면에 맞게
1:1 — 100% 원래 크기로 초기화

패닝 (이동)

Space + 드래그

🗺 미니맵

우측 패널 하단에 고정 표시
현재 뷰포트 위치 파란 사각형으로 표시
클릭/드래그 → 해당 위치로 즉시 이동
헤더 클릭 또는 툴바 🗺로 접기/펼치기

검색

툴바 검색창 — 테이블명·컬럼명·논리명 포함
결과 클릭 → 해당 테이블로 이동 + 하이라이트
↑/↓ 키로 결과 탐색, Enter 선택, Esc 닫기

다중 선택

Shift+클릭 — 테이블 추가/제외 토글
빈 캔버스 드래그 — 영역 안 테이블 모두 선택
Ctrl+A — 전체 선택
선택된 테이블 드래그 → 전체 함께 이동
플로팅 툴바 — 정렬·균등배치·일괄삭제
Delete — 선택된 테이블 일괄 삭제, Esc — 선택 해제

🧭 Auto Layout

FK 관계를 기반으로 계층형 자동 배치
참조되는(부모) 테이블이 왼쪽, 참조하는(자식) 테이블이 오른쪽
관계가 없는 고립 테이블은 첫 번째 열에 배치
실행 후 자동으로 Fit 줌 적용

📝 메모 박스

툴바 + Note — 캔버스에 메모 박스 추가
드래그로 이동, 우하단 모서리로 크기 조절
색상 도트 클릭 → 6가지 색상 선택
✕ 버튼 또는 선택 후 Delete로 삭제
테이블과 별개로 자유 텍스트 기록 (DDL에는 포함 안 됨)
⧉ 복제 — 대상 페이지를 선택해 복사본 추가 (다른 페이지로 복사 가능)

📑 페이지 탭

캔버스 하단 탭 — 테이블/노트를 페이지별로 분류
[전체] 탭 — 모든 페이지를 한 화면에 표시
+ 버튼으로 새 페이지 추가
탭 우클릭 — 이름변경 / 색상 / 삭제
새 테이블·노트는 현재 활성 페이지에 자동 배정
Table 패널 또는 다중선택 툴바에서 페이지 이동
다른 페이지에 연결된 관계선은 화면에서 숨겨짐

테이블

헤더 조작

단일클릭 — 테이블 선택
더블클릭 — 물리명/논리명 편집 (클릭 위치로 구분)
드래그 — 테이블 위치 이동
컬러 도트 클릭 → 헤더 색상 8종 선택

헤더 아이콘

⊞ — 인덱스 탭 열기
⧉ — 테이블 복제 (Ctrl+D)
☰ — Table 속성 탭 열기 (페이지 지정 포함)
✕ — 테이블 삭제

컬럼 인라인 편집

단일클릭 → 행 선택 (패널에 속성 표시)
더블클릭 → 클릭한 셀만 편집 모드 진입 (물리명/논리명/타입 각각 독립적으로 활성화)
Esc 또는 다른 곳 클릭 → 편집 종료

컬럼 그리드 구성

⠿ — 드래그로 순서 변경
KEY — PK/FK/I 배지 표시
물리명 — 실제 컬럼명
논리명 — 한국어 설명
타입 — DBMS별 datalist 자동완성 + 직접입력 (MSSQL/MySQL/PG 목록 자동 전환)
NN — NOT NULL 체크박스

컬럼 복사/붙여넣기

컬럼 선택 후 Ctrl+C 또는 ⎘ 버튼
Ctrl+V — 현재 선택된 테이블에 붙여넣기
이름 충돌 시 _2, _3 자동 처리
PK/FK는 붙여넣기 시 자동 해제
다른 테이블에도 자유롭게 붙여넣기 가능

우측 패널 — Column 탭

Constraints

PK Primary Key
FK Foreign Key
NN Not Null
UQ Unique
AI Auto Increment (IDENTITY / SERIAL)

기타 속성

Domain — 설계 도메인 메모 (DDL 주석에 포함)
Default Value — 기본값 (프리셋 선택 또는 직접입력)
Comment — 컬럼 설명 (DDL 주석에 포함)
FK Relations — 연결된 FK 관계 표시/삭제

FK 관계 연결

컬럼 행 오른쪽의 ● 도트를 드래그해서 다른 테이블의 컬럼 도트에 놓으면 FK 관계가 생성됩니다.
연결 시 FK 컬럼명·타입·FK플래그·NOT NULL이 자동 동기화됩니다.

관계선 조작

단일클릭 — 연결된 컬럼 양쪽 하이라이트
우클릭 — 카디널리티/삭제 팝업
같은 선 재클릭 → 선택 해제
다른 곳 클릭 → 선택 해제

카디널리티

1:N — 기본값. FK쪽 크로우풋, PK쪽 이중바
1:1 — 양쪽 이중바
0:N — FK쪽 크로우풋 + 선택적 원
관계선 우클릭 팝업에서 변경

테이블 설계 MD 가져오기

트리 형식의 테이블 설계 문서를 붙여넣으면 ERD를 자동으로 생성합니다.
── 뒤 텍스트는 논리명으로 파싱됩니다. FK (tb_table) 형식으로 관계도 자동 연결됩니다.

MD 형식 예시

테이블명 (단독 줄, 영문/숫자/언더스코어)
├── col_name TYPE [PK] [NOT NULL] [UNIQUE] [DEFAULT x] [FK (tb_ref)] -- 논리명
섹션 헤더의 (한국어명)은 테이블 논리명으로 자동 추출
코드 블록(```)은 있어도 없어도 동작

SQL DDL 가져오기

지원 DBMS

MSSQL — [schema].[table], IDENTITY
MySQL — 백틱, AUTO_INCREMENT, COMMENT
PostgreSQL — 큰따옴표, SERIAL/BIGSERIAL
Oracle — 큰따옴표, GENERATED ALWAYS AS IDENTITY

인식 구문

CREATE TABLE + 컬럼 정의
테이블 레벨 PRIMARY KEY / FOREIGN KEY
ALTER TABLE … ADD FOREIGN KEY
NOT NULL, UNIQUE, DEFAULT, COMMENT

가져올 때 페이지 분할 (대량 테이블 대응)

테이블이 많은 DDL/MD를 한 페이지에 모두 넣으면 캔버스가 무거워집니다. 가져오기 팝업 하단의 페이지 분할 옵션으로 여러 페이지에 나눠 담을 수 있습니다.

안 함

현재 활성 페이지(또는 "전체"면 기본 페이지)에 전부 가져옴
기존 동작과 동일

자동 분할 (관계+이름 기준)

FK로 연결된 테이블끼리 먼저 묶음 (관계 클러스터)
한 클러스터가 20개를 넘으면 테이블명 접두사로 다시 세분화 (예: tb_member_* → "member" 페이지)
관계 없는 고립 테이블은 이름이 비슷한 것끼리 자동으로 합쳐짐
가져오기 직후 첫 번째 새 페이지로 자동 전환

개수로 분할

입력한 순서대로 지정 개수씩 잘라 "가져오기 1, 2, 3…" 페이지 생성
관계/이름 분석 없이 단순 분배 — 가장 빠름

미리보기

옵션 선택 시 우측에 예상 페이지 수가 즉시 표시됨
실제 생성 전 미리 확인 가능

SQL DDL 출력

DBMS별 변환

MSSQL — [name], IDENTITY(1,1)
MySQL — 백틱, AUTO_INCREMENT
PostgreSQL — 큰따옴표, SERIAL/BIGSERIAL
Oracle — 큰따옴표, GENERATED ALWAYS AS IDENTITY, NUMBER 타입 자동 변환
타입 자동 변환 (NVARCHAR→VARCHAR2, INT→NUMBER 등)

Schema prefix

툴바 schema 입력란에 값 입력
DDL 출력 시 [dbo].[table] 형태로 적용
컬럼명에는 적용되지 않음

주석 처리

테이블 논리명·코멘트 → 상단 주석
컬럼 -- 논리명 | [도메인] | 코멘트

출력 내용

CREATE TABLE (컬럼, PK, UNIQUE)
-- Foreign Keys (ALTER TABLE ADD FK)
-- Indexes (CREATE INDEX)

키보드 단축키

단축키	기능
`Ctrl+S`	저장 (파일 연결 없으면 다른이름저장)
`Ctrl+O`	파일 열기
`Ctrl+Z`	실행 취소 (최대 50단계)
`Ctrl+Y` / `Ctrl+Shift+Z`	다시 실행
`Ctrl+C`	선택된 컬럼 복사 (텍스트 선택 없을 때)
`Ctrl+V`	컬럼 붙여넣기
`Ctrl+D`	선택된 테이블 복제
`Ctrl+A`	모든 테이블 선택
`Shift+클릭`	테이블 다중 선택 토글
`Delete`	다중 선택된 테이블 일괄 삭제
`Space + 드래그`	캔버스 패닝 (이동)
`Esc`	편집 모드 종료 / 팝업 닫기

마우스 조작

동작	기능
테이블 헤더 드래그	테이블 이동
테이블 헤더 더블클릭	테이블명 편집
컬럼 행 단일클릭	컬럼 선택 (패널 갱신)
컬럼 행 더블클릭	셀 단위 편집 모드 진입
⠿ 핸들 드래그	컬럼 순서 변경
● 도트 드래그	FK 관계 연결
관계선 단일클릭	컬럼 하이라이트
관계선 우클릭	카디널리티/삭제 팝업
미니맵 클릭/드래그	뷰포트 이동

❓ YBERD 도움말