VisuaSchema Designer

Canvas Navigation

Navigate and interact with the schema canvas using multiple interaction modes:

Interaction Modes

• Pan Mode - Click and drag the canvas to move around. Activate by pressing P or clicking the pan button in the toolbar. Hold CTRL/CMD and drag to pan without activating pan mode.
• Select Mode - Draw a rectangle to select multiple collections. Activate by pressing S or clicking the select button in the toolbar.
• Zoom - Use CTRL/CMD + Mouse Wheel to zoom in/out. Click the zoom reset button or use the percentage indicator to return to 100%.
• Grid Toggle - Show or hide the background grid for better alignment using the grid button in the toolbar.

Mouse Interactions

• Single Click (Collection) - Select a collection and view its properties in the right panel
• CTRL/CMD + Click - Multi-select collections
• Drag Collection - Move a collection card. Multi-selected collections move together.
• Right Click - Open context menu for collection actions (change color, find links, delete)
• Double Right Click - Zoom out from the clicked point
• Left Click - Zoom in to the clicked point (when CTRL/CMD is held)

Adding Collection Cards

Add collections to your schema canvas using multiple methods:

Methods to Add Collections

• Drag and Drop - Drag collections from the left panel onto the canvas. Select multiple collections with CTRL/CMD + Click and drag them all at once.
• Auto-Generate - Click the Auto Generate button to import all collections from the database at once, automatically arranged and linked.
• Create New Collection - Click "Create Collection" in the left panel to add an empty collection card that you can customize.

Collection Card Features

• Field Display - Each collection card shows fields with their BSON types (string, number, object, array, etc.)
• Nested Fields - Expand/collapse nested objects and arrays to view their structure
• Color Coding - Assign custom header colors to collections for visual organization
• Resize - Drag the bottom edge of a collection card to resize it
• Bring to Front - Click a collection to bring it to the front of overlapping cards

Creating Relationships

Connect collections to visualize relationships between your data models:

Manual Relationship Creation

• Select Collection - Click a collection to select it and view its properties in the right panel
• Add Relation - Click the + button in the Relations section of the right panel
• Configure Connection - In the modal, select the target collection and specify source/target fields
• Connection Types - Choose between 1-1 (one-to-one), 1-N (one-to-many), or N-N (many-to-many) relationships

Automatic Relationship Detection

• Find Links (Single Collection) - Right-click a collection and select "Find Links" to auto-detect relationships with other collections on the canvas
• Find Links (All Collections) - Use the Auto Arrange and Create Relations button to detect all possible relationships across all collections
• Detection Logic - Automatically identifies _id references, foreign key patterns, and embedded document relationships
• Remove Links - Right-click a collection and select "Remove Links" to delete all its relationships

Managing Relationships

• View Relations - Select a collection to see all its relationships listed in the right panel with source and target fields
• Delete Relation - Click the trash icon next to a relationship in the right panel to remove it
• Visual Feedback - Relationship lines are drawn dynamically and update as you move collection cards

Auto-Generation Features

Automatically generate and organize your schema with intelligent automation:

Auto-Generation Options

• Auto Generate - Imports all collections from the database, analyzes sample documents to extract schemas, and automatically detects relationships
• Auto Arrange (Grid) - Arranges collections in a simple grid layout without creating relationships
• Auto Arrange (Connected Groups) - Uses graph theory to intelligently group related collections together and minimize line crossings for optimal layout
• Clear Canvas - Removes all collections from the canvas (requires confirmation)

Sample Size Configuration

When auto-generating schemas, VisualLeaf analyzes sample documents from each collection (default: 100 documents) to infer field types and structure. This ensures accurate schema detection while maintaining performance.

Export & Save Options

Save and export your schema diagrams in multiple formats:

Save Options

• Save to Database - Save the schema definition to the database for later retrieval and editing
• Auto-Save - The canvas state (zoom, pan, collection positions) is automatically saved to local storage when you switch tabs
• Schema Naming - Click the edit icon next to the schema name to rename it. Only alphanumeric characters, spaces, underscores, hyphens, and periods are allowed.

Export Formats

• Export as PNG - Export the entire schema as a color PNG image. The canvas is automatically fitted to include all collections before export.
• Export as B&W PNG - Export as a black and white PNG image, ideal for printing or documentation
• Export as JSON - Download the complete schema definition as a JSON file, including collections, fields, relationships, and layout information

Import Schema

• Import JSON - Click the Import button to load a previously exported JSON schema file. The schema is restored with all collections, relationships, and positions.

Keyboard Shortcuts

Note: On macOS, use Cmd instead of Ctrl

Context Menu Actions

Right-click on a collection card to access these quick actions:

• Change Color - Assign a custom header color to the collection. Choose from 11 preset colors or reset to default.
• Find Links - Automatically detect and create relationships between this collection and other collections on the canvas
• Remove Links - Delete all relationship lines connected to this collection
• Delete Collection - Remove the collection from the canvas (does not delete from database)

Multi-Selection: When multiple collections are selected, context menu actions (color change, find links, remove links, delete) apply to all selected collections.

Pro Tips

• Start with Auto-Generate - Use the Auto Generate button to quickly import all collections and detect relationships, then fine-tune the layout and connections manually.
• Use Color Coding - Assign colors to related collections (e.g., all user-related collections in blue, all product collections in green) for better visual organization in complex schemas.
• Export for Documentation - Export your schema as a B&W PNG for technical documentation or as JSON to share the complete schema definition with your team.
• Multi-Select for Efficiency - Use CTRL/CMD + Click to select multiple collections, then drag them together or apply bulk operations via the context menu.
• Zoom for Detail - Use CTRL + Mouse Wheel to zoom in when working with collections that have many fields. The zoom is centered on your cursor position.
• Panel Management - Collapse the left and right panels to maximize canvas space when working with large schemas. Your panel state is preserved when switching tabs.

Related Features

• JSON Schema Activity - Create and edit detailed JSON schemas with validation rules and BSON type definitions for individual collections
• Collection Activity - View and query the actual data in your collections to verify the schema matches reality
• Index Management - Optimize your schema by creating indexes based on the field relationships you discover in the visual designer