mcp-drawdb

mcp-drawdb

Documentación en chino

Servidor MCP para drawdb — permite que los asistentes de IA (Claude Code, Cursor, etc.) lean y modifiquen directamente diagramas de bases de datos en tu navegador.

Cómo Funciona

Claude Code  ──stdio──►  npx mcp-drawdb  ──ws──►  Relay (embedded)  ◄──ws──  Browser (drawdb)

• npx mcp-drawdb inicia un servidor de retransmisión WebSocket internamente (puerto automático 23432–23442) y luego se conecta como cliente. Si ya hay una retransmisión en ejecución, la reutiliza.
• drawdb en el navegador escanea automáticamente los puertos 23432–23442 para encontrar la retransmisión y expone el estado del diagrama a las herramientas
• La retransmisión enruta mensajes entre Claude Code y el navegador

No se necesita un proceso de retransmisión separado: todo se ejecuta dentro del puente MCP.

Inicio Rápido

1. Configurar Claude Code

Añade a tu claude_desktop_config.json o .claude/settings.json:

{
  "mcpServers": {
    "drawdb": {
      "command": "npx",
      "args": ["mcp-drawdb"]
    }
  }
}

2. Abrir drawdb.icen.ai

Abre drawdb.icen.ai en tu navegador. Verás un punto MCP verde en el encabezado cuando estés conectado.

¿Punto gris? La retransmisión puede estar en un puerto diferente. El navegador escanea automáticamente 23432–23442, así que solo espera un momento. También puedes hacer clic en el punto MCP para configurar manualmente la URL de WebSocket.

3. Listo

Claude Code ahora puede leer y modificar tus diagramas. Prueba:

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

Herramientas (14)

Herramienta	Descripción
ping	Prueba la conexión con el navegador
list_tables	Lista todas las tablas con sus campos
get_diagram	Vista general completa del diagrama: tablas, campos, diseño (x/y/w/h), relaciones, tipo de base de datos
add_table	Añade una tabla con campos, color y comentario
update_table	Renombra tablas, añade/elimina/modifica campos con control completo de propiedades
delete_table	Elimina una tabla (en cascada a las relaciones)
add_relationship	Añade FK con cardinalidad (1:1, 1:n, n:1, n:m) y reglas de restricción
delete_relationship	Elimina una relación
set_layout	Reposiciona tablas en el lienzo
set_database	Cambia el tipo de base de datos (mysql, postgresql, sqlite, mariadb, transactsql, oraclesql, generic)
get_issues	Valida el diagrama: nombres duplicados, PK faltantes, discrepancias de tipo, etc.
export_sql	Genera SQL DDL para la base de datos de destino
clear_diagram	Elimina todas las tablas y relaciones
undo	Muestra la última acción en la pila de deshacer

Variables de Entorno

Variable	Valor por defecto	Descripción
RELAY_URL	(integrado)	Conéctate a una retransmisión externa en lugar de iniciar una
PORT	23432	Puerto inicial para la retransmisión (se incrementa automáticamente hasta 23442)
HOST	0.0.0.0	Dirección de escucha de la retransmisión
CORS_ORIGIN	*	Origen CORS para el endpoint HTTP de la retransmisión

Propiedades de Campos

Al usar add_table, update_table, cada campo admite:

Propiedad	Tipo	Descripción
name	string	Nombre de la columna
type	string	Tipo SQL (INT, VARCHAR, TEXT, DATETIME, ENUM, ...)
primary	boolean	Clave primaria
unique	boolean	Restricción única
nullable	boolean	Permitir NULL (false = NOT NULL)
increment	boolean	Autoincremento
unsigned	boolean	Sin signo (tipos numéricos)
default_value	string	Valor por defecto
check	string	Expresión de restricción CHECK
comment	string	Comentario de la columna
size	string	Tamaño/precisión del tipo (p. ej., "255" para VARCHAR(255))
values	string[]	Valores permitidos para ENUM/SET

Preguntas Frecuentes

¿HTTPS y ws://localhost? Todos los navegadores principales eximen a localhost de las comprobaciones de contenido mixto. ws://localhost funciona desde https://drawdb.icen.ai sin wss://.

¿El puerto 23432 está ocupado? La retransmisión detecta automáticamente los puertos 23432–23442. El navegador escanea todos los puertos automáticamente, por lo que encontrará la retransmisión dondequiera que esté.

Retransmisión Independiente

Para configuraciones avanzadas (Docker, servidor compartido), puedes ejecutar la retransmisión por separado:

npx mcp-drawdb-relay

Luego configura el puente con RELAY_URL:

{
  "mcpServers": {
    "drawdb": {
      "command": "npx",
      "args": ["mcp-drawdb"],
      "env": {
        "RELAY_URL": "ws://your-server:23432"
      }
    }
  }
}

Requisitos

• Node.js >= 18
• drawdb con integración MCP (cliente WebSocket en el navegador)
• Una pestaña del navegador abierta con drawdb

Licencia

MIT