Interactive ER Diagram Generator Generate beautiful, interactive Entity-Relationship (ER) diagrams from your database schemas with a clean, modern design inspired by Eraser.io.

This extension provides powerful ER diagram generation capabilities:

Clean, Modern Design - Compact tables with professional styling inspired by Eraser.io Smart Relationships - Automatically detects and visualizes foreign key relationships Precise Port Connections - Links connect from specific fields to target IDs Color-Coded Themes - Automatic color themes based on table types (users, chat, workspaces, etc.) Interactive & Draggable - Pan, zoom, and rearrange tables with smooth interactions Auto-Layout - Smart positioning of tables with layered digraph layout

![alt text](https://github.com/anyagh19/modelmapper/raw/HEAD/image.png)

Tip: The diagram is fully interactive - drag tables, zoom in/out, and explore relationships!

Requirements

This extension requires:

VS Code version 1.60.0 or higher Node.js 14.x or higher (for development) Internet connection (to load GoJS library from CDN)

Installation

Open VS Code
Press Ctrl+P / Cmd+P to open Quick Open
Type ext install your-publisher.modelmapper
Press Enter and reload VS Code

Usage

Generate ER Diagram from Schema

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) Type: Model Mapper: Generate ER Diagram Select your schema file or provide schema data View your interactive ER diagram in a new webview panel

Supported Schema Format

The extension works with standard schema objects: javascriptconst schemas = [ { modelName: "users", fields: { id: { type: "pk" }, name: { type: "string" }, email: { type: "string" }, createdAt: { type: "timestamp" } } }, { modelName: "posts", fields: { id: { type: "pk" }, title: { type: "string" }, content: { type: "text" }, userId: { type: "string", ref: "users" } } } ];

Color Themes

Tables are automatically color-coded based on their names:

Blue - User/Team/Auth related tables Green - Chat/Message/Invite related tables Slate - Workspace/Folder/File related tables Auto - Other tables get assigned rotating colors

Extension Settings

This extension contributes the following settings:

modelmapper.enable: Enable/disable this extension modelmapper.autoLayout: Automatically layout diagram on generation (default: true) modelmapper.compactMode: Use compact table design (default: true) modelmapper.showCardinality: Show relationship cardinality labels (default: true)

Known Issues

Large schemas (50+ tables) may take a few seconds to render GoJS requires internet connection for CDN library loading Custom field types may not be recognized automatically

If you encounter any issues, please report them on GitHub Issues. Release Notes 1.0.0 Initial release of Interactive ER Diagram Generator

Generate ER diagrams from schema objects Compact Eraser.io-inspired design Automatic relationship detection Color-coded table themes Interactive pan, zoom, and drag functionality GoJS-powered rendering with smooth animations

Detailed Features

Automatic Relationship Detection The extension automatically detects foreign key relationships by looking for ref properties in your field definitions. It creates visual connections from the foreign key field to the referenced table's ID field. Compact Design Specifications

Table width: 120-180px Header font: 11px semi-bold Field name font: 10px regular Field type font: 9px monospace Row height: 18px Optimized padding and margins throughout

Interactive Features

Pan: Click and drag the canvas background Zoom: Use mouse wheel or pinch gesture Move Tables: Drag individual tables to reposition Select: Click on tables or relationships to select them Undo/Redo: Full undo manager support

Extension Commands This extension contributes the following commands:

modelmapper.generateERDiagram: Generate ER Diagram from current schema modelmapper.exportToPNG: Export diagram as PNG image (coming soon) modelmapper.exportToSVG: Export diagram as SVG (coming soon)

For Developers

Building from Source bash# Clone the repository git clone https://github.com/anyagh19/modelmapper.git cd modelmapper

Install dependencies

npm install

Compile TypeScript

npm run compile

Watch for changes

npm run watch

Package extension

vsce package Project Structure

modelmapper/
├── src/
│   ├── extension.ts          # Extension entry point
│   ├── erGenerator.ts         # ER diagram generation logic
│   └── types.ts               # TypeScript type definitions
├── images/
│   └── icon.png               # Extension icon
├── package.json               # Extension manifest
├── tsconfig.json              # TypeScript configuration
└── README.md                  # This file

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository

Create your feature branch (git checkout -b feature/AmazingFeature) Commit your changes (git commit -m 'Add some AmazingFeature') Push to the branch (git push origin feature/AmazingFeature) Open a Pull Request

Please ensure your code follows the existing style and includes appropriate tests. Following Extension Guidelines This extension follows the official VS Code extension guidelines:

Extension Guidelines Extension Manifest Contribution Points

Resources

Visual Studio Code Extension API GoJS Documentation Eraser.io - Design inspiration

License

This project is licensed under the MIT License - see the LICENSE file for details. Acknowledgments

Design inspiration from Eraser.io Powered by GoJS diagramming library Built for the VS Code community

Support

Issues: GitHub Issues Discussions: GitHub Discussions Email: aniketmarkad19@gmail.com

Show Your Support If you find this extension helpful, please consider:

⭐ Starring the GitHub repository 📢 Sharing with your colleagues 💬 Leaving a review on the VS Code Marketplace ☕ Buying me a coffee

Enjoy creating beautiful ER diagrams! 🎉

ModelMapper

anya