Database Diagram
Interactive SVG-based ER diagram with pan, zoom, drag, minimap, auto-layout, and relationship visualization.
Overview
The Diagram section renders a fully interactive Entity-Relationship (ER) diagram for the current database. It visualizes all tables, their columns (with types and key indicators), and foreign key relationships as connected lines.
Diagram Features
- SVG rendering — Pure SVG-based diagram with crisp rendering at any zoom level
- Table cards — Each table is a draggable card showing the table name, all columns with their data types, and key indicators (PK for primary key, FK for foreign key)
- Relationship lines — Foreign key relationships are drawn as curved connector lines between related columns across tables
- Column highlighting — Primary key columns are highlighted in cyan; foreign key columns in amber
Navigation
| Action | How |
|---|---|
| Pan | Click and drag the background to pan the viewport |
| Zoom | Mouse wheel to zoom in/out (10% steps, 10%–300% range). Zoom toolbar buttons: zoom in, zoom out, fit all, reset to 100%. |
| Drag tables | Click and drag any table card to reposition it. Relationship lines update in real-time. |
| Minimap | A small overview in the corner showing the entire diagram. The viewport rectangle is interactive — drag it to navigate. Toggle minimap visibility. |
Auto-Layout (Sugiyama)
Click the Auto Layout button to automatically arrange all tables using the Sugiyama algorithm (layered graph layout). This positions tables in hierarchical layers based on their foreign key relationships, minimizing line crossings. Tables with many relationships are placed centrally.
Table Highlighting
Hover over or select a table to highlight it and all its direct relationships. Connected tables and their relationship lines are emphasized while unrelated tables are dimmed — making it easy to trace dependencies in complex schemas.
Context Menu
Right-click a table card in the diagram for quick actions:
- Open Table — Switch to the Content section for this table
- View Structure — Switch to the Structure section
- View Relations — Switch to the Relations section
- Copy Table Name — Copy the table name to clipboard
Cluster Backgrounds
Groups of closely related tables (clusters) are visually separated with subtle background regions, making it easier to identify logical groupings in large schemas.
Per-Tab State
Each connection tab maintains its own independent diagram state — zoom level, pan position, table positions, and minimap visibility are all persisted per tab.