React Flow Diagram Interactions
Diagram Navigation
Basic Navigation Controls
Pan and Zoom
Pan: Click and drag to move around the diagram
Zoom In: Use mouse wheel or zoom controls
Zoom Out: Use mouse wheel or zoom controls
Fit to Screen: Click "Fit to Screen" to see entire diagram
Reset View: Return to default zoom and position
Navigation Shortcuts
Mouse Wheel: Zoom in/out
Ctrl + Mouse Wheel: Fine zoom control
Space + Drag: Pan around diagram
Double Click: Zoom to specific area
Right Click: Context menu
View Controls
Zoom Controls
Zoom In Button: Increase zoom level
Zoom Out Button: Decrease zoom level
Zoom to Fit: Fit entire diagram to screen
Zoom to Selection: Zoom to selected nodes
Reset Zoom: Return to default zoom
View Options
Full Screen: Toggle full screen mode
Minimap: Show/hide minimap
Grid: Show/hide background grid
Snap to Grid: Enable/disable grid snapping
Ruler: Show/hide measurement ruler
Node Interactions
Node Selection
Selecting Nodes
Single Click: Select individual table node
Ctrl + Click: Add/remove nodes from selection
Shift + Click: Select range of nodes
Drag Selection: Select multiple nodes with drag box
Select All: Select all visible nodes
Node Selection States
Unselected: Default node appearance
Selected: Highlighted with selection border
Multi-Selected: Part of multi-selection
Focused: Currently focused node
Hovered: Mouse hover state
Node Information
Viewing Node Details
Click Node: Click on table node to highlight
Details Panel: Node information panel appears
Table Information: View complete table details
Column List: See all table columns
Constraints: View table constraints
Node Information Panel
Table Name: Database table name
Table Description: Purpose and description
Column Count: Number of columns
Primary Key: Primary key information
Foreign Keys: Foreign key relationships
Indexes: Performance indexes
Node Editing
Editing Node Properties
Double Click Node: Enter edit mode
Edit Form: Modify table properties
Save Changes: Apply modifications
Cancel Changes: Discard modifications
Node Context Menu
Edit Table: Modify table properties
Add Column: Add new column to table
Delete Table: Remove table from schema
Duplicate Table: Create copy of table
Export Table: Export table definition
Node Positioning
Manual Positioning
Drag to Move: Drag nodes to custom positions
Snap to Grid: Align nodes to grid
Auto-Align: Automatically align nodes
Lock Position: Prevent accidental movement
Unlock Position: Allow node movement
Layout Options
Auto Layout: Automatically arrange nodes
Manual Layout: Position nodes manually
Hierarchical Layout: Arrange in hierarchy
Circular Layout: Arrange in circle
Force-Directed Layout: Physics-based layout
Relationship Interactions
Relationship Visualization
Relationship Lines
Solid Lines: Primary relationships
Dashed Lines: Secondary relationships
Thick Lines: Strong relationships
Thin Lines: Weak relationships
Colored Lines: Different relationship types
Relationship Labels
Relationship Type: One-to-one, one-to-many, many-to-many
Cardinality: Relationship cardinality indicators
Constraint Name: Foreign key constraint names
Cascade Rules: Update/delete behavior
Relationship Selection
Selecting Relationships
Click Line: Select relationship line
Hover Line: Highlight relationship
Multi-Select: Select multiple relationships
Select by Type: Select relationships by type
Select by Table: Select relationships by table
Relationship Information
Source Table: Origin table
Target Table: Destination table
Relationship Type: Connection type
Constraint Details: Foreign key details
Cascade Behavior: Update/delete rules
Relationship Editing
Editing Relationships
Right Click Line: Open context menu
Edit Relationship: Modify relationship properties
Change Type: Modify relationship type
Update Constraints: Modify foreign key constraints
Save Changes: Apply modifications
Relationship Context Menu
Edit Relationship: Modify relationship properties
Delete Relationship: Remove relationship
Change Type: Modify relationship type
Add Constraint: Add additional constraints
Export Relationship: Export relationship definition
Layout Controls
Auto Layout
Layout Algorithms
Hierarchical Layout: Top-down hierarchy
Force-Directed Layout: Physics-based positioning
Circular Layout: Circular arrangement
Grid Layout: Grid-based arrangement
Tree Layout: Tree structure layout
Layout Options
Direction: Layout direction (top-down, left-right)
Spacing: Node spacing and padding
Alignment: Node alignment options
Level Separation: Distance between levels
Node Separation: Distance between nodes
Manual Layout
Manual Positioning Tools
Alignment Tools: Align nodes horizontally/vertically
Distribution Tools: Distribute nodes evenly
Grouping Tools: Group related nodes
Ungrouping Tools: Separate grouped nodes
Lock Tools: Lock/unlock node positions
Layout Assistance
Snap to Grid: Align to background grid
Snap to Node: Align to other nodes
Guidelines: Show alignment guidelines
Rulers: Show measurement rulers
Grid Settings: Configure grid properties
Layout Management
Layout Presets
Default Layout: Standard layout configuration
Compact Layout: Space-efficient layout
Wide Layout: Spread-out layout
Custom Layout: User-defined layout
Saved Layouts: Previously saved layouts
Layout Persistence
Save Layout: Save current layout
Load Layout: Load saved layout
Reset Layout: Return to default layout
Export Layout: Export layout configuration
Import Layout: Import layout configuration
Export Options
Image Export
Export Formats
PNG: High-quality raster image
JPG: Compressed raster image
SVG: Scalable vector image
PDF: Print-ready document
WebP: Modern web image format
Export Settings
Resolution: Image resolution settings
Background: Background color/transparency
Quality: Image quality settings
Size: Export dimensions
Crop: Crop to specific area
Data Export
Export Formats
JSON: Structured data format
XML: Extensible markup language
CSV: Comma-separated values
SQL: Database schema script
GraphML: Graph markup language
Export Options
Include Metadata: Include additional information
Include Styles: Include visual styling
Include Layout: Include positioning data
Compressed: Compress exported data
Formatted: Pretty-print exported data
Sharing Options
Share Links
Public Link: Shareable public URL
Private Link: Password-protected URL
Temporary Link: Time-limited access
Embed Code: Embed in web pages
QR Code: Generate QR code for mobile
Collaboration Features
Real-time Sharing: Live collaboration
Comment System: Add comments to diagram
Version Control: Track diagram versions
Permission Management: Control access levels
Activity Log: Track changes and activity
Advanced Features
Diagram Customization
Visual Customization
Node Styling: Customize node appearance
Edge Styling: Customize relationship lines
Color Schemes: Apply color themes
Font Settings: Customize text appearance
Icon Sets: Use custom icons
Layout Customization
Node Shapes: Different node shapes
Edge Styles: Different line styles
Background: Custom background
Grid Settings: Customize grid appearance
Animation: Enable/disable animations
Performance Optimization
Large Diagram Handling
Virtualization: Handle large numbers of nodes
Clustering: Group related nodes
Level of Detail: Show/hide details based on zoom
Progressive Loading: Load diagram progressively
Caching: Cache diagram data
Performance Settings
Render Quality: Balance quality vs performance
Animation Speed: Control animation speed
Update Frequency: Control update frequency
Memory Usage: Optimize memory usage
CPU Usage: Optimize CPU usage
Accessibility Features
Keyboard Navigation
Tab Navigation: Navigate with keyboard
Arrow Keys: Move selection
Enter Key: Activate selected node
Escape Key: Cancel current operation
Shortcuts: Keyboard shortcuts
Screen Reader Support
ARIA Labels: Accessibility labels
Alt Text: Alternative text descriptions
Focus Indicators: Visual focus indicators
High Contrast: High contrast mode
Text Scaling: Scalable text
Last updated
Was this helpful?