DBML ER Viewer

A powerful VS Code extension that provides a live visual diagram of your DBML (Database Markup Language) files and securely exposes your live schema to AI assistants via a built-in Model Context Protocol (MCP) server.

Features

1. Live DBML Visualization

   • Automatically parses your active .dbml file as you type.
   • Renders a beautiful Entity-Relationship Diagram (ERD) using Mermaid.js directly inside a VS Code Webview.

2. Bundled MCP Server

   • Spins up a local MCP server in the background using stdio transport.
   • Syncs your active editor's DBML content in real-time.
   • Exposes a dbml://current-schema resource so AI assistants (like Claude or Cursor) can perfectly understand your database schema without you having to copy-paste your code.

How to Run the Extension

1. Open this project in VS Code.
2. Press F5 to launch the Extension Development Host.
3. In the new VS Code window, open or create a .dbml file.
4. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and select Show DBML Viewer.
5. Edit your .dbml code and watch the diagram update instantly!

How to Connect to AI (MCP Setup)

Because this extension bundles an MCP server, you can give your AI agents live access to your database schema.

Claude Desktop

Add the following to your Claude configuration file (~/.claude_desktop_config.json on Linux/Mac):

{
  "mcpServers": {
    "dbml-diagram-viewer": {
      "command": "node",
      "args": [
        "/path/to/your/dbml-viewer/out/mcp/server.js"
      ]
    }
  }
}

Cursor IDE

1. Open Cursor Settings (Ctrl + ,).
2. Navigate to Features -> MCP.
3. Click + Add New MCP Server.
4. Type: command
5. Name: dbml-diagram-viewer
6. Command: node /path/to/your/dbml-viewer/out/mcp/server.js

Once connected, you can ask your AI: "Write a SQL query joining the tables from my dbml://current-schema" and it will magically know exactly what you've designed!

For details on how the extension is built, see the docs/ folder.