시각 캔버스
캔버스는 스키마를 시각적으로 만들고 배치하는 작업 공간입니다. 고성능 렌더러 위에서 auto-layout, 다중 선택, copy/paste, align, minimap, 사이드 편집 패널을 제공합니다.
레이아웃
| 영역 | 용도 |
|---|---|
| Header | 다이어그램 메뉴(New, Open, Save, Share, Export), 계정 |
| 왼쪽 사이드바 | Tables, Enums, Groups, Filters, AI Chat, Version History, Editor 탭 |
| 중앙 캔버스 | 실제 다이어그램. pan, zoom, 테이블 드래그 |
| 오른쪽 편집 패널 | 선택한 테이블, 컬럼, ref, enum, 그룹 편집 |
| Minimap | 우하단 전체 보기와 click-to-pan |
| Status Bar | 요소 수와 현재 상태 |
테이블 작업
테이블 추가
- Tables 사이드바에서 + New Table 클릭
- 빈 캔버스 우클릭 컨텍스트 메뉴 사용
- 새 테이블 단축키 사용
새 빈 테이블이 캔버스에 생기고 편집 패널이 열립니다.
테이블 편집
테이블을 클릭하면 오른쪽 편집 패널에서 다음을 수정할 수 있습니다.
- 이름, schema, alias, note, header color
- Columns — 추가, 드래그 정렬, 편집, 삭제
- Indexes — 이름, 타입, unique 여부, 컬럼 목록
- Foreign Keys — 변경 사항은 pending 상태로 모이고 하단 Save를 누를 때 테이블 변경과 함께 원자적으로 커밋됩니다.
이동과 정렬
- 테이블을 드래그해 이동합니다.
Shift+Click또는Ctrl+Click으로 다중 선택 후 함께 이동합니다.- 여러 테이블을 선택한 뒤 Align & Distribute를 실행합니다.
- 전체 다이어그램은 Auto-layout을 사용할 수 있습니다.
Foreign Keys(point-and-click)
관계를 시각적으로 만들려면 다음 순서로 작업합니다.
- source 테이블의 컬럼 위에 마우스를 올립니다.
- target 테이블의 컬럼으로 드래그합니다.
- 기본 카디널리티
>(many-to-one)로 ref가 생성되며, 이후 패널에서 수정할 수 있습니다.
테이블 편집기의 Foreign Keys 섹션에서도 FK를 추가할 수 있습니다.
FK 변경은 테이블의 Save를 누르기 전까지 pending입니다. 생성, 수정, 삭제가 한 번의 원자적 작업으로 커밋됩니다.
Save UX
테이블에서는 FK와 컬럼 변경이 pending 큐에 쌓입니다.
| 클래스 | 의미 |
|---|---|
fk-pending-create | 새 FK. 아직 서버에 없음 |
fk-pending-update | 기존 FK 변경. 아직 커밋되지 않음 |
fk-pending-delete | 삭제 예정. trash를 다시 누르면 복원 |
편집기 하단 Save를 누르면 커밋됩니다. 필수 값이 빠진 pending FK는 warning toast와 함께 건너뜁니다.
Zoom과 pan
- Zoom:
Ctrl+Scroll, zoom 버튼, dropdown - Pan: 빈 캔버스 드래그 또는
Shift+Scroll로 가로 이동 - Fit view: minimap 더블클릭 또는 메뉴 사용
Minimap
우하단 minimap은 전체 다이어그램과 현재 viewport를 한눈에 보여줍니다.
| Zoom level | 동작 |
|---|---|
| ≥ 90% | content bounds를 실제 비율로 표시하고 viewport 사각형이 zoom에 따라 바뀜 |
| < 90% | box-scaling 모드. 테이블 박스는 비례 축소되고 viewport 사각형은 중앙 고정 크기 유지 |
상호작용
- minimap을 클릭하면 해당 위치로 이동합니다.
- minimap에서 드래그하면 hand-tool처럼 pan합니다.
- 더블클릭하면 다이어그램이 화면에 맞게 조정됩니다.
테이블 추가, 삭제, 이동 후 minimap은 동기화됩니다. 빠른 다중 선택 드래그 중에는 버벅이지 않도록 drag-end에서 갱신합니다.
Auto-layout
자동 레이아웃은 ELK.js 엔진으로 모든 테이블 위치를 다시 계산합니다. 계층형 그래프를 읽기 좋게 배치하고 edge crossing을 줄이는 데 적합합니다.
실행 방법
- Diagram menu → Auto Layout
- 메뉴에 표시된 단축키 사용
Auto-layout은 모든 테이블 위치를 덮어씁니다. 수동 배치가 중요하다면 먼저 버전 스냅샷을 만들어 두세요.
다중 선택과 bulk action
Shift+Click또는Ctrl+Click으로 선택에 추가Ctrl+A로 전체 선택- 빈 공간 드래그로 box-select(활성화된 경우)
- 우클릭 메뉴에서 duplicate, delete, group, color 등 실행
Align & Distribute
2개 이상의 테이블을 선택하면 한 번의 클릭으로 정렬할 수 있습니다.
| 작업 | 효과 |
|---|---|
| Align Left | 모든 테이블이 가장 왼쪽 x 좌표를 공유 |
| Align Right | 모든 테이블이 가장 오른쪽 x + width 좌표를 공유 |
| Center Horizontally | 평균 가로 중심에 맞춤 |
| Align Top | 가장 위 y 좌표에 맞춤 |
| Align Bottom | 가장 아래 y + height 좌표에 맞춤 |
| Center Vertically | 평균 세로 중심에 맞춤 |
| Distribute Horizontally | 가로 간격 균등(3개 이상 필요) |
| Distribute Vertically | 세로 간격 균등(3개 이상 필요) |
캔버스 툴바나 컨텍스트 메뉴에서 실행합니다. 관계선은 자동으로 다시 그려지고 새 위치가 저장됩니다.
Copy & Paste
선택한 테이블과 컬럼, 인덱스를 같은 다이어그램 또는 다른 다이어그램에 붙여 넣을 수 있습니다.
- Copy: 테이블 선택 →
Ctrl+C또는 컨텍스트 메뉴 → Copy - Paste:
Ctrl+V또는 컨텍스트 메뉴 → Paste
동작
- 붙여 넣은 테이블은 충돌을 피하기 위해 새 UUID를 받습니다.
- 이름은
users→users_copy,users_copy2처럼 자동 suffix가 붙습니다. - 위치는
+30, +30만큼 offset되어 원본과 완전히 겹치지 않습니다. - 가능한 경우 OS clipboard(
navigator.clipboard)를 사용하므로 다른 브라우저 탭의 다이어그램에도 붙여 넣을 수 있습니다.
복사한 테이블 사이의 FK는 함께 복제되지만, 선택 밖 테이블을 가리키는 FK는 복제되지 않습니다.
스티키 노트, 필터, 테이블 그룹
스키마 객체가 아닌 설계 결정이나 TODO는 스티키 노트로 남길 수 있습니다. 지금 보지 않을 테이블은 필터로 숨길 수 있고, 관련 테이블은 테이블 그룹으로 묶어 큰 다이어그램을 탐색하기 쉽게 만들 수 있습니다.
테이블 그룹은 유료 요금제가 필요합니다. 요금제를 참고하세요.
키보드 단축키
| 단축키 | 동작 |
|---|---|
Ctrl+N | 새 다이어그램 |
Ctrl+O | 다이어그램 열기 |
Ctrl+S | 저장 |
Ctrl+Z / Ctrl+Y | Undo / Redo |
Ctrl+A | 전체 선택 |
Ctrl+C / Ctrl+V | 선택 테이블 Copy / Paste |
Delete | 선택 항목 삭제 |
Escape | 선택 해제 / modal 닫기 |
Shift+? | 단축키 도움말 |
전체 목록은 앱의 shortcut help modal에서 볼 수 있습니다.
테마와 탭
헤더에서 dark/light 테마를 전환할 수 있으며 설정은 브라우저별로 저장됩니다.
편집기는 Golden Layout 기반 멀티 탭 레이아웃을 사용합니다. 여러 다이어그램을 탭으로 열고, 탭을 가장자리로 드래그해 split pane을 만들고, 최대 2×2 형태로 비교 작업을 할 수 있습니다. 탭은 lazy-load되므로 많은 다이어그램을 열어도 현재 focus된 탭만 렌더링됩니다.