LangStop

Canvas — Interact with Tables | ERD Generator Docs

The Canvas is the core workspace of the ERD Generator.
It enables fluid interaction with database tables, relationships, and layouts — optimized for clarity, performance, and scale.

Whether you are exploring a small schema or a large production database, the canvas adapts to your workflow.

🖱️ Drag & Drop Tables

Tables on the canvas are fully draggable, allowing you to visually organize your schema based on domain boundaries or logical flow.

How it works

  • Click and hold the table header
  • Drag the table to any position
  • Release to persist its placement instantly

UX behavior

  • Pixel-precise movement
  • No accidental drags during text selection
  • Smooth motion without layout shifts

💡 Group related tables to quickly reveal ownership, coupling, and boundaries.

🧭 Pan the Canvas

Panning allows free navigation across large diagrams without changing zoom level.

Supported interactions

  • Mouse: Click + drag on empty canvas space
  • Trackpad: Two-finger drag
  • Touch: Single-finger drag

Benefits

  • Maintains spatial awareness
  • Reduces cognitive load
  • Enables fast exploration of complex schemas

🔍 Zoom In & Out

Zooming supports both high-level architectural views and deep column-level inspection.

Zoom controls

  • Mouse wheel / trackpad pinch
  • Keyboard shortcuts:
    • + → Zoom in
    • - → Zoom out
    • 0 → Reset zoom

Smart zoom behavior

  • Zoom centers around cursor position
  • Tables, text, and edges scale consistently
  • Common zoom levels preserve readability

🧭 Fit Diagram to Screen

The Fit to Screen action automatically adjusts the canvas view so the entire diagram is visible within the viewport.

When to use it

  • After generating a new diagram
  • When tables are scattered across the canvas
  • After extensive dragging or zooming
  • Before screenshots or presentations

What it does

  • Calculates the diagram’s bounding box
  • Applies an optimal zoom level
  • Centers the diagram horizontally and vertically

This provides an instant clean starting point, especially for large or imported schemas.

💡 Fit to Screen does not modify table positions — it only adjusts the viewport.

🔗 Relationship Edge Highlighting

Relationships are visually emphasized to improve schema understanding.

Highlight behavior

  • Hovering a table highlights:
    • Incoming relationships
    • Outgoing relationships
  • Hovering an edge highlights:
    • Source table
    • Target table

This makes it easy to answer:

  • What depends on this table?
  • Which tables are affected by a change?

🏷️ Toggle Relationship Labels

Relationship labels (foreign key names, constraints) can be toggled on or off to control visual density.

Disable labels when

  • Reviewing overall architecture
  • Working with dense schemas
  • Creating screenshots or diagrams for presentations

Enable labels when

  • Validating foreign key definitions
  • Reviewing naming conventions
  • Debugging schema issues

⚙️ This is a visual preference only and does not affect exports.

⚡ Performance by Design

Canvas interactions are optimized for real-time responsiveness, even with large schemas.

Performance characteristics

  • GPU-accelerated transforms
  • No layout reflow during pan or drag
  • Isolated state updates to minimize re-renders

Schemas with dozens or hundreds of tables remain smooth and responsive.

♿ Accessibility & Cross-Device Support

The canvas follows accessibility-first interaction principles.

Accessibility considerations

  • High-contrast tables and edges
  • Zoom-safe typography
  • No reliance on color alone to convey meaning

Supported devices

  • Desktop (mouse + keyboard)
  • Trackpads
  • Touch-enabled devices

🧠 Best Practices

  • Start with Fit to Screen to understand the full layout
  • Zoom out to identify domains and boundaries
  • Arrange tables by ownership or feature area
  • Disable labels when exploring structure
  • Enable labels when validating relationships

🚀 Summary

The Canvas is designed to feel invisible when you use it — fast, predictable, and focused on understanding your data.

Every interaction is intentional, scalable, and built to support real-world database design workflows with confidence.