mcp-drawdb Server

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-relay

Then 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

Documentation