mcp-drawdb
MCP server for drawdb — lets AI assistants (Claude Code, Cursor, etc.) directly read and modify database diagrams in your browser.
Documentation
mcp-drawdb
MCP server for drawdb — lets AI assistants (Claude Code, Cursor, etc.) directly read and modify database diagrams in your browser.
How It Works
Claude Code ──stdio──► npx mcp-drawdb ──ws──► Relay (embedded) ◄──ws── Browser (drawdb)- npx mcp-drawdb starts a WebSocket relay server internally (auto port 23432–23442), then connects as a client. If a relay is already running, it reuses it.
- drawdb in the browser auto-scans ports 23432–23442 to find the relay, exposes diagram state to tools
- The relay routes messages between Claude Code and the browser
No separate relay process needed — everything runs inside the MCP bridge.
Quick Start
1. Configure Claude Code
Add to your `claude_desktop_config.json` or `.claude/settings.json`:
{
"mcpServers": {
"drawdb": {
"command": "npx",
"args": ["mcp-drawdb"]
}
}
}2. Open drawdb.icen.ai
Open drawdb.icen.ai in your browser. You'll see a green MCP dot in the header when connected.
> Gray dot? The relay may be on a different port. The browser auto-scans 23432–23442, so just wait a moment. You can also click the MCP dot to manually set the WebSocket URL.
3. Done
Claude Code can now read and modify your diagrams. Try:
"List all tables in the diagram"
"Add a users table with id, email, name"
"Create a relationship from users.id to posts.user_id"
"Export SQL for MySQL"Tools (14)
| Tool | Description |
|---|---|
| `ping` | Test connection to the browser |
| `list_tables` | List all tables with fields |
| `get_diagram` | Full diagram overview: tables, fields, layout (x/y/w/h), relationships, database type |
| `add_table` | Add a table with fields, color, comment |
| `update_table` | Rename table, add/drop/alter fields with full property control |
| `delete_table` | Delete a table (cascades to relationships) |
| `add_relationship` | Add FK with cardinality (`1:1`, `1:n`, `n:1`, `n:m`) and constraint rules |
| `delete_relationship` | Delete a relationship |
| `set_layout` | Reposition tables on canvas |
| `set_database` | Switch database type (mysql, postgresql, sqlite, mariadb, transactsql, oraclesql, generic) |
| `get_issues` | Validate diagram: duplicate names, missing PKs, type mismatches, etc. |
| `export_sql` | Generate DDL SQL for the target database |
| `clear_diagram` | Remove all tables and relationships |
| `undo` | View last action on the undo stack |
Environment Variables
| Variable | Default | Description |
|---|---|---|
| `RELAY_URL` | *(embedded)* | Connect to an external relay instead of starting one |
| `PORT` | `23432` | Starting port for the relay (auto-increments up to 23442) |
| `HOST` | `0.0.0.0` | Relay listen address |
| `CORS_ORIGIN` | `*` | CORS origin for the relay HTTP endpoint |
Field Properties
When using `add_table`, `update_table`, each field supports:
| Property | Type | Description |
|---|---|---|
| `name` | string | Column name |
| `type` | string | SQL type (INT, VARCHAR, TEXT, DATETIME, ENUM, ...) |
| `primary` | boolean | Primary key |
| `unique` | boolean | Unique constraint |
| `nullable` | boolean | Allow NULL (false = NOT NULL) |
| `increment` | boolean | Auto increment |
| `unsigned` | boolean | Unsigned (numeric types) |
| `default_value` | string | Default value |
| `check` | string | CHECK constraint expression |
| `comment` | string | Column comment |
| `size` | string | Type size/precision (e.g. "255" for VARCHAR(255)) |
| `values` | string[] | Allowed values for ENUM/SET |
FAQ
HTTPS and `ws://localhost`? All major browsers exempt localhost from mixed content checks. `ws://localhost` works from `https://drawdb.icen.ai` without `wss://`.
Port 23432 is occupied? The relay auto-detects ports 23432–23442. The browser scans all ports automatically, so it will find the relay wherever it is.
Standalone Relay
For advanced setups (Docker, shared server), you can run the relay separately:
npx mcp-drawdb-relayThen configure the bridge with `RELAY_URL`:
{
"mcpServers": {
"drawdb": {
"command": "npx",
"args": ["mcp-drawdb"],
"env": {
"RELAY_URL": "ws://your-server:23432"
}
}
}
}Requirements
- Node.js >= 18
- drawdb with MCP integration (browser-side WebSocket client)
- A running browser tab with drawdb open
License
MIT
Frequently asked questions
What is mcp-drawdb?
mcp-drawdb is MCP server for drawdb — lets AI assistants (Claude Code, Cursor, etc.) directly read and modify database diagrams in your browser.
How do I install mcp-drawdb?
Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.
Is mcp-drawdb open source?
Yes — it is hosted on GitHub at https://github.com/tovarsh/mcp-drawdb.
Related MCP tools
The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra
A MCP for Claude Desktop / Claude Code / Windsurf / Cursor to build n8n workflows for you
MCP server to provide Figma layout information to AI coding agents like Cursor
This is MCP server for Claude that gives it terminal control, file system search and diff file editing capabilities
Browser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser
A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.
Run your own MCP server? See who uses it and what to fix.
Measure it with TrackMCP