ERD Designer

ERD Designer is a free, open-source tool for visually designing database schemas within VSCode. Design your tables and relationships, generate DDL scripts, and export specification documents — all without leaving your editor.

Inspired by ERMaster, built for the modern development workflow.

Screenshots

Main canvas view with tables and relationships

Editing table columns using shared models	Creating relationships between tables

Customizing table and memo colors	Organizing tables by perspectives

Features

Visual Database Design

• Drag-and-drop table design — Create and arrange tables, define columns, and set constraints on an interactive canvas
• Relationship management — Define 1:1 and 1:N relationships visually with automatic foreign key synchronization
• Perspectives — Organize large schemas into multiple views (e.g., by module or feature) for better manageability
• Memo notes — Add foreground/background memo notes to annotate your design

Column Reuse & Sharing

• Column Share Model — Define a column once, reuse it across multiple tables. Type changes propagate automatically
• Column Groups — Bundle commonly used columns (e.g., created_at, updated_at) and apply them to tables in bulk

Import & Export

• DDL export — Generate CREATE TABLE scripts for PostgreSQL, MySQL, and MS SQL Server
• DDL import — Import existing DDL scripts to auto-generate ER diagrams
• Specification documents — Export table definitions as Excel files
• Image export — Export as PNG, SVG, or interactive HTML with pan/zoom and perspective switching

AI Integration (Experimental)

• MCP Server — Built-in Model Context Protocol server that enables AI assistants like Claude to read and modify your ER diagrams programmatically

Supported Databases

• PostgreSQL — Schema support, array types, GIN/GiST/BRIN indexes
• MySQL — CHARACTER SET / COLLATE, FULLTEXT / SPATIAL indexes, Auto Increment
• MS SQL Server — Schema support, clustered indexes, Identity columns

Getting Started

1. Create a new file with the .erd extension (e.g., my-database.erd)
2. Open the file in VS Code
3. The ERD Designer editor will automatically launch
4. Start designing your database schema!

How to Use

Creating Tables

1. Select Create Table mode from the toolbar
2. Click on the canvas where you want to place a new table
3. Define columns with types, constraints, and comments
4. Use shared column models for consistency across tables

Defining Relationships

1. Select Create Relation mode from the toolbar
2. Click on a source table, then click on a target table to create a relationship
3. Configure relationship types (1:1, 1:N)
4. Set foreign key constraints and naming conventions

Organizing Your Diagram

• Use perspectives to create different views of your schema
• Group related tables by feature or module
• Apply colors to tables and memos for visual organization

Use MCP Server (Experimental)

ERD Designer includes an experimental MCP (Model Context Protocol) Server that allows AI assistants to interact with your ERD files.

Setup

1. Enable MCP Server in VS Code Settings

   • Open VS Code Settings (Cmd+, on macOS)
   • Search for "ERD Designer"
   • Check "Enable MCP Server"

2. Configure MCP Server

   • Create or edit .vscode/mcp.json in your workspace
   • Add the following configuration:

   {
     "servers": {
       "erd-designer-mcp": {
         "type": "http",
         "url": "http://localhost:53753/mcp"
       }
     }
   }
   

3. Start Using

   • Once configured, AI assistants with MCP support can access and modify your ERD files
   • The server runs locally on port 53753 when enabled

Important Notes

• This feature is experimental and subject to change
• The MCP Server only runs when VS Code is active
• Only ERD files currently open in VS Code can be accessed and modified
• Ensure the port 53753 is not blocked by firewall settings

Sample File

Try ERD Designer with a ready-made sample:

• sample-ec_mysql.erd (Right-click and select "Save link as...", then open in VS Code)

Documentation

For detailed documentation and advanced features, please visit the Wiki.

Browser and Google Drive versions are also available — see the GitHub repository.

Requirements

• Visual Studio Code version 1.105.0 or higher

Known Issues

Please report issues on GitHub Issues.

Contributing

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

License

This extension is licensed under the Apache License 2.0. See the LICENSE file for details.