Editor Overview

A comprehensive guide to the ERDHub editor interface — where you design, visualize, and refine your database schemas.

Layout

The editor is divided into three main areas:

Area	Position	Description
DSL Code Editor	Left	Write your schema using ERDHub's DSL syntax
ERD Canvas	Center	Interactive diagram that updates in real time
Schema Panel	Right	Browse and inspect tables, enums, relationships, and groups

All three stay in sync. Changes in the DSL editor are reflected on the canvas and schema panel instantly.

DSL Code Editor (Left Pane)

The left pane is a full-featured code editor powered by CodeMirror. It provides:

• Syntax highlighting for the ERDHub DSL
• Auto-completion for keywords, table names, and column types
• Error markers with inline diagnostics when your DSL has syntax issues
• Undo/redo history within the editing session
• Line numbers and code folding

Toggle the left pane with Cmd+[ (Mac) or Ctrl+[ (Windows/Linux) to give the canvas more room when you are focused on the visual layout.

ERD Canvas (Center)

The canvas is the visual heart of the editor. It renders your schema as an interactive entity-relationship diagram.

Navigation

• Pan — Click and drag on the canvas background to move around
• Zoom — Scroll to zoom in and out (range: 0.1x to 2x)
• Dot grid — A subtle dot grid background helps with spatial orientation

Canvas Toolbar

The toolbar at the top of the canvas provides quick access to common actions:

Control	Description
Layout dropdown	Choose an auto-layout algorithm (see below)
Add sticky note	Place a free-form text note on the canvas
Export dropdown	Export as PNG, SVG, or SQL
Minimap toggle	Show or hide the minimap overlay

Auto-Layout Algorithms

When your diagram gets complex, auto-layout arranges tables automatically:

• Left-Right — Hierarchical layout that flows from left to right. Best for schemas with clear parent-child relationships.
• Snowflake — Star topology that places a central table in the middle with related tables radiating outward. Ideal for star or snowflake schemas common in analytics databases.
• Compact — Grid-based layout that minimizes whitespace. Good for large schemas where you want everything visible at once.

Select a layout from the toolbar dropdown. Tables snap into place and you can drag individual tables to fine-tune positions afterward.

Minimap

Toggle the minimap to see a bird's-eye overview of your entire diagram in the corner of the canvas. Click on the minimap to jump to a specific area — useful for navigating large schemas.

Creating Relationships on Canvas

You can create relationships visually without writing DSL:

1. Hover over a column in a table node — a handle appears on the side of the column
2. Click and drag from that handle toward a column on another table
3. Release on the target column's handle
4. The relationship is created and the corresponding Ref line is added to your DSL automatically

Sticky Notes

Sticky notes let you annotate your diagram with free-form text:

1. Click Add sticky note in the canvas toolbar
2. A yellow note appears on the canvas
3. Double-click the note to edit its text
4. Drag it anywhere on the canvas

Use sticky notes for design decisions, TODO reminders, or documentation that does not belong in the schema itself.

Table Groups

Table groups let you visually cluster related tables inside a colored rectangle:

• Define groups in DSL with the TableGroup syntax
• Groups render as colored rectangles behind the member tables on the canvas
• Helpful for marking domains (e.g., "Auth", "Billing", "Content") in large schemas

Schema Panel (Right Pane)

The right pane gives you a structured, browsable view of your schema. It has tabs for:

Tab	Contents
Tables	All tables with their columns, types, and constraints
Enums	All enum types and their values
Relationships	All foreign key relationships between tables
Groups	All table groups

Search and Filter

Use the search bar at the top of the schema panel to filter by name. This is especially useful in large schemas with dozens of tables.

Click to Navigate

Click any table or enum in the schema panel to:

• Scroll the canvas to center on that element
• Jump the editor cursor to the corresponding DSL definition

Toggle the right pane with Cmd+] (Mac) or Ctrl+] (Windows/Linux).

Dark Mode

Toggle dark mode from the editor interface to switch between light and dark themes. The theme applies to the DSL editor, canvas, and schema panel.

TIP

Dark mode is great for long editing sessions and reduces eye strain in low-light environments.

Next Steps

• Keyboard Shortcuts — learn all the shortcuts
• Import & Export — bring in SQL or export your diagram
• DSL Reference — full syntax guide