MongoDB Architect VS Code Extension

Visual MongoDB schema modeler for VS Code. Design database schemas with an intuitive drag-and-drop interface directly in your editor.

✨ Key Features

🎨 Visual Schema Design

• Drag-and-drop interface - Intuitive canvas-based schema design powered by React Flow
• Collection nodes - Visual representation of MongoDB collections with expandable/collapsible fields
• Color-coded field types - Each data type has a distinct color for easy identification
• Custom collection icons - Choose from 10+ icons (Storage, Folder, DataObject, etc.)
• Nested field visualization - Full support for nested objects and arrays with expandable UI
• Connection handles - Visual connection points for creating relationships (hidden for nested types)

📦 Field Management

• 8 MongoDB field types - ObjectId, String, Number, Boolean, Date, Array, Object, Mixed
• Nested structures - Define complex nested objects and arrays of objects
• Array types - Support for typed arrays (Array<String>, Array<Object>, etc.)
• Required fields - Mark fields as required with visual indicators (*)
• Field descriptions - Add optional descriptions and default values
• Smart field editor - Dedicated dialogs for adding/editing fields and nested schemas

🔍 Search & Filter

• Collection search - Search fields directly in collection nodes with auto-expand for nested matches
• Properties panel search - Filter fields in the right panel by name or type
• Real-time filtering - See results as you type
• Nested search - Searches through all levels of nested fields

📥 Import JSON to Schema

• Automatic schema generation - Paste JSON sample data to auto-generate field definitions
• Type inference - Automatically detects ObjectIds, Dates, primitives, nested objects, and arrays
• Array merging - Analyze multiple documents to capture all possible fields
• Smart duplicate prevention - Avoids adding duplicate fields during import

📤 Export Capabilities

• Mongoose schemas - Generate complete Mongoose schema definitions
• TypeScript interfaces - Export TypeScript type definitions
• JSON Schema - Standard JSON schema format
• Full export - Combined Mongoose + TypeScript in one file
• Single or batch export - Export individual collections or all at once
• Copy or download - Copy to clipboard or download as files

🔗 Relationship Mapping

• Visual connections - Drag from one field to another to create relationships
• 3 relationship types - One-to-One (1:1), One-to-Many (1:N), Many-to-Many (N:N)
• Color-coded relationships - Each relationship type has a distinct color
• Field-level relationships - Connect specific fields between collections
• Relationship editing - Modify relationship types in properties panel

🎯 Collection Management

• Add/edit/delete - Full CRUD operations for collections
• Inline name editing - Click the edit icon to rename collections
• Customizable appearance - Choose icons and organize on canvas
• Properties panel - Comprehensive editing in the right sidebar
• Delete protection - Confirmation dialogs prevent accidental deletions

🌓 Theme & UI

• Auto theme sync - Automatically adapts to your VS Code theme (light/dark)
• Responsive panels - Resizable properties panel with collapse/expand
• Fullscreen mode - Maximize canvas for large schemas
• Keyboard shortcuts - Delete key to remove selections
• Auto-save - Changes are automatically saved to .mongoarch files

✅ Validation & Quality

• Schema validation - Built-in validation for schema integrity
• Duplicate prevention - Prevents duplicate field names at each level
• Type safety - TypeScript-powered with full type checking
• Error handling - Clear error messages and validation feedback

🚀 Usage

Creating a New Schema

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run MongoDB Architect: New Schema
3. Choose a location and name for your .mongoarch file
4. The visual editor opens automatically

Opening an Existing Schema

Simply open any .mongoarch file in VS Code, and the MongoDB Architect editor will launch automatically.

Working with Collections

Adding Collections

1. Click the "Add Collection" button in the top header
2. A new collection node appears on the canvas
3. Click the edit icon (✏️) in the collection header to rename it
4. Choose a custom icon from the properties panel (optional)

Adding Fields

1. Select a collection by clicking on it
2. In the right Properties Panel, click "Add" button
3. Fill in field details:
   • Name - Field name (e.g., "email", "username")
   • Type - Choose from 8 types (String, Number, ObjectId, etc.)
   • Required - Check to mark as required
   • Description - Optional field documentation
   • Default Value - Optional default value

Working with Nested Fields

1. Add a field with type "Object" or "Array"
2. For Arrays, choose the item type (e.g., String, Object)
3. For Object types or Array<Object>, click "Edit Schema" icon
4. Add nested fields in the dedicated editor
5. Fields expand/collapse with chevron icons

Import JSON to Schema

1. Select a collection
2. Click "Import JSON" in the properties panel
3. Paste your JSON sample data:

   {
     "_id": "507f1f77bcf86cd799439011",
     "name": "John Doe",
     "email": "john@example.com",
     "age": 30,
     "tags": ["developer", "admin"],
     "address": {
       "city": "New York",
       "zip": "10001"
     }
   }
   

4. Click "Import Fields" - fields are auto-generated with correct types

Creating Relationships

1. Hover over a field to see connection handles (small circles)
2. Drag from a source handle (right side) to a target handle (left side)
3. A relationship edge appears
4. Select the edge to change relationship type (1:1, 1:N, N:N) in properties panel

Note: Nested Object/Array fields don't show handles as they represent embedded data, not relationships.

Searching Fields

Search in Collection Node

1. Click the search icon (🔍) in collection header
2. Type to filter fields in real-time
3. Nested fields matching the query auto-expand
4. Click X to clear search or exit search mode

Search in Properties Panel

1. Use the search box below the "Add" button
2. Filter by field name or type
3. Shows count: "Showing X of Y fields"

Exporting Schemas

1. Click "Export" in the top header (web mode only)
2. Choose export format:
   • Mongoose - Schema definitions for Mongoose ODM
   • TypeScript - Interface definitions
   • JSON Schema - Standard JSON format
   • All - Combined export
3. Select specific collection or export all
4. Copy to clipboard or Download as file

Keyboard Shortcuts

• Delete - Delete selected collection or relationship
• Ctrl+S - Save file (automatic in VS Code)
• Enter - Confirm inline editing
• Escape - Cancel inline editing

Saving

The schema is automatically saved as you make changes to the .mongoarch file. No manual save needed!

File Format

MongoDB Architect uses .mongoarch files, which are JSON files containing:

{
  "version": "1.0",
  "nodes": [...],
  "edges": [...]
}

Requirements

• VS Code 1.85.0 or higher

Extension Settings

This extension contributes the following settings:

• Currently no configurable settings

Known Issues

Please report issues on GitHub

🎯 Use Cases

Database Design & Planning

• Schema prototyping - Quickly sketch out database structures before implementation
• Team collaboration - Visual schemas are easier to discuss and review than code
• Documentation - Living documentation that stays in sync with your project

Development Workflows

• Rapid API development - Design schemas first, then export to Mongoose/TypeScript
• Microservices - Design individual service databases visually
• Migration planning - Visualize schema changes and relationships

Learning & Teaching

• MongoDB education - Visual tool for teaching database design concepts
• Code generation - Learn Mongoose/TypeScript by seeing generated code
• Best practices - Understand relationships and schema patterns

Data Modeling

• Reverse engineering - Import JSON from existing data to visualize structure
• Schema optimization - Visualize and refine nested structures
• Relationship analysis - See all connections between collections at a glance

📊 Supported Field Types

🔄 Relationship Types

Release Notes

0.0.1

Initial release of MongoDB Architect

• ✅ Visual schema editor for MongoDB
• ✅ Support for .mongoarch files
• ✅ Collection and field management with 8 field types
• ✅ Nested objects and arrays support
• ✅ Relationship visualization (1:1, 1:N, N:N)
• ✅ Import JSON to auto-generate schemas
• ✅ Export to Mongoose, TypeScript, JSON Schema
• ✅ Search and filter fields (collection + properties panel)
• ✅ Custom collection icons (10+ options)
• ✅ Auto-save and theme synchronization
• ✅ Resizable panels and fullscreen mode

Contributing

Contributions are welcome! Please see our GitHub repository for more information.

Created by Naman Khater

License

MIT