Visual Canvas

The canvas is where you build and arrange your schema visually. It uses a high-performance renderer with auto-layout, multi-select, copy/paste, alignment, a minimap, and a side editor panel.

---

Layout

Area	Purpose
Header	Diagram menu (New, Open, Save, Share, Export), account
Sidebar (left)	Tabbed panels — Tables, Enums, Groups, Filters, AI Chat, Version History, Editor
Canvas (center)	The diagram itself — pan, zoom, drag tables
Edit Panel (right)	Per-entity editor when you select a table, column, ref, enum, or group
Minimap	Bottom-right overview + click-to-pan
Status Bar (bottom)	Element counts and current state

---

Working with tables

Add a table

• Click + New Table in the Tables sidebar tab, or
• Use the canvas context menu (right-click on empty space), or
• Press the keyboard shortcut for new table

A new empty table appears on the canvas with the editor panel open.

Edit a table

Click any table to select it. The edit panel on the right shows:

• Name, schema, alias, note, header color
• Columns — add, reorder (drag), edit, delete
• Indexes — name, type, unique flag, column list
• Foreign Keys — pending changes are queued and committed when you press the bottom Save button (one save commits the table + all FK changes atomically)

Move and arrange

• Drag a table to move it
• Multi-select with Shift+Click or Ctrl+Click, then drag to move several at once
• Align multiple selected tables — see Align & Distribute below
• Auto-layout for the whole diagram — see Auto-layout below

---

Foreign Keys (point-and-click)

To create a relationship visually:

1. Hover over a column on the source table
2. Click and drag to a column on the target table
3. The ref is created with the default cardinality (> many-to-one); you can edit it in the panel

You can also add FKs from the Foreign Keys section of the table editor.

FK changes are pending until you press the table's Save button — pending creates, updates, and deletes are committed in one atomic operation.

---

Save UX

For tables, FK and column changes are queued as pending. The visual hint:

Class	Meaning
fk-pending-create	New FK — not yet on the server
fk-pending-update	Existing FK changed — not yet committed
fk-pending-delete	Marked for delete — click trash again to restore

Press the bottom Save button on the editor to commit. Incomplete pending FKs (missing required fields) are skipped with a warning toast.

---

Zoom and pan

• Zoom: Ctrl+Scroll, or use the zoom buttons / dropdown
• Pan: drag empty canvas, or Shift+Scroll for horizontal pan
• Fit view: double-click the minimap, or use the menu

---

Minimap

The minimap in the bottom-right corner shows the entire diagram and your current viewport at a glance.

Two display modes based on canvas zoom:

Zoom level	Behavior
≥ 90% (zoomed in)	Standard fit — content bounds are shown to scale, viewport rectangle resizes with zoom
< 90% (zoomed out)	Box-scaling mode — table boxes shrink proportionally, viewport rectangle stays a fixed size in the center

Interactions:

• Click anywhere on the minimap to jump the canvas to that position
• Drag on the minimap to pan the canvas (hand-tool style)
• Double-click to fit the diagram to the view

The minimap stays in sync as you add, delete, or move tables — updates happen on drag-end so it doesn't lag during fast multi-select drags.

---

Auto-layout

Automatic layout rearranges every table on the canvas using the ELK.js layout engine — a graph layout algorithm developed for the Eclipse Layered Layout. It's good at producing readable, hierarchical diagrams with minimal edge crossings.

How to run:

• Diagram menu → Auto Layout (or use the keyboard shortcut shown in the menu)
• The whole diagram is re-laid out in a single operation

Auto-layout overwrites every table position. If you've manually arranged tables you care about, take a version snapshot first so you can restore.

---

Multi-select & bulk actions

• Shift+Click or Ctrl+Click to add to selection
• Ctrl+A to select all
• Drag empty space to box-select (when enabled)
• Right-click for context menu — duplicate, delete, group, color, etc.

---

Align & Distribute

When 2 or more tables are selected, you can snap them into alignment with one click. Ainecto supports six align operations and two distribute operations:

Operation	Effect
Align Left	All tables share the leftmost x position
Align Right	All tables share the rightmost x + width position
Center Horizontally	All tables share the average horizontal center
Align Top	All tables share the topmost y position
Align Bottom	All tables share the bottommost y + height position
Center Vertically	All tables share the average vertical center
Distribute Horizontally	Equal horizontal gaps (requires ≥3 tables)
Distribute Vertically	Equal vertical gaps (requires ≥3 tables)

Use the canvas toolbar or the context menu after selecting multiple tables. Relationship lines are redrawn automatically and the new positions are saved.

---

Copy & Paste

Copy any selected tables (and their columns and indexes) and paste them — into the same diagram or another one.

• Copy: select tables → Ctrl+C (or context menu → Copy)
• Paste: Ctrl+V (or context menu → Paste)

Behavior:

• Pasted tables get new UUIDs so they don't collide with the originals
• Names are auto-suffixed: users → users_copy, users_copy2, etc.
• Position is offset by +30, +30 so pasted tables don't perfectly overlap the source
• Ainecto uses the OS clipboard (navigator.clipboard) when available, so you can copy from one diagram and paste into another in a different browser tab

Foreign keys between copied tables are not duplicated automatically — re-create them after pasting if you need the same shape.

---

Sticky Notes

Add freeform notes to the canvas to document design decisions, TODOs, or context that doesn't belong on a specific table. See Sticky Notes for details.

---

Filters

Hide tables you don't care about right now to simplify the view. Filters can be saved with a name and re-applied later. See Filters for details.

---

Table Groups

A table group is a colored container that visually groups related tables on the canvas. Groups don't change the schema — they're a layout / organization tool — but they make large diagrams much easier to navigate.

Create a group:

1. Multi-select 2 or more tables (Shift+Click)
2. Right-click → Group selected (or use the toolbar)
3. Pick a name and color

Move a group: dragging the group header moves all member tables together.

Edit a group: click the group header → the editor panel shows the group's name, color, and member list. You can rename, recolor, add/remove members, or ungroup entirely.

Visibility: groups can be collapsed to compact form, hidden via filters, or shown only via the Groups sidebar tab.

Table groups require a paid plan. See Plans.

---

Keyboard shortcuts

Shortcut	Action
Ctrl+N	New diagram
Ctrl+O	Open diagram
Ctrl+S	Save diagram
Ctrl+Z / Ctrl+Y	Undo / Redo
Ctrl+A	Select all
Ctrl+C / Ctrl+V	Copy / Paste selected tables
Delete	Delete selected
Escape	Deselect / close modal
Shift+?	Show shortcut help

The full list is in the in-app shortcut help modal.

---

Themes

Toggle dark / light theme from the header. Your preference is saved per browser.

---

Tabs & Split Panes

The editor uses a flexible multi-tab layout (powered by Golden Layout) so you can work with multiple diagrams or panels side-by-side.

What you can do:

• Open multiple diagrams in tabs — each diagram lives in its own tab; switch with a click
• Drag a tab to split — grab a tab and drop it on the left, right, top, or bottom edge of another tab area to create a split pane
• 4-pane split — keep splitting until you have a 2×2 grid of independent diagrams (or more) visible at once
• Detach into a separate window — drag a tab out of the browser to pop it into its own window for multi-monitor setups
• Drop panels back together — drag any tab back onto another to merge

Why it matters:

• Compare two diagrams side-by-side without switching tabs
• Have a reference schema open while editing another
• Run the AI Chat panel in one pane and see the canvas update live in another
• Pin the version history view in a corner while you experiment

Tabs are lazy-loaded — opening 20 diagrams in tabs doesn't load all 20 at once; each diagram only renders when you focus its tab. This keeps the editor responsive even with many open diagrams.