Introducción

es-ldmd (Español — Lenguaje de Modelado de Diagramas) es una herramienta web profesional para crear diagramas de entidad-relación (ER) utilizando un lenguaje de modelado específico de dominio escrito en español.

Está diseñada como una alternativa a herramientas como dbdiagram.io, con una interfaz moderna que incluye un editor de código con resaltado de sintaxis, una vista previa del diagrama en tiempo real y un panel de herramientas con validación de errores y asistente de IA local.

La aplicación se compone de 3 paneles principales redimensionables:

Editor de código — Donde escribes tu modelo en lenguaje es-ldmd
Vista de diagrama — Renderizado visual en tiempo real de las tablas y sus relaciones
Panel de herramientas — Lista de errores, chat IA y panel de exportación

┌─────────────────────────────────────────────────────┐
│            BARRA DE HERRAMIENTAS                    │
├───────────────┬────────────────┬─────────────────────┤
│               │                │                     │
│    EDITOR     │   DIAGRAMA     │   HERRAMIENTAS      │
│    CÓDIGO     │    CANVAS      │   + ERRORES         │
│   (Monaco)    │  (2D Render)   │   + CHAT IA         │
│               │                │   + EXPORTACIÓN     │
│               │                │                     │
└───────────────┴────────────────┴─────────────────────┘

Interfaz de Usuario

Barra de Herramientas

La barra de herramientas se ubica en la parte superior y proporciona acceso rápido a todas las acciones principales. Cada botón tiene un atajo de teclado asociado:

Acción	Atajo	Descripción
Nuevo	`Ctrl + N`	Crea un nuevo archivo en blanco
Guardar	`Ctrl + S`	Guarda el archivo actual en almacenamiento local
Borrar contenido	`Ctrl + Shift + D`	Limpia todo el contenido del editor
Abrir	`Ctrl + O`	Abre un archivo previamente guardado
Exportar	`Ctrl + Shift + E`	Abre el panel de exportación (SQL, imagen)
Descargar .esldmd	`Ctrl + E`	Descarga el archivo como .esldmd a tu computadora
Importar .esldmd	`Ctrl + Shift + U`	Importa un archivo .esldmd desde tu computadora
Alternar tema	`Ctrl + Shift + L`	Cambia entre tema oscuro y claro

Editor de Código

El editor utiliza Monaco Editor (el mismo motor de VS Code) y ofrece:

Resaltado de sintaxis — Colorea las palabras clave, tipos, cadenas y comentarios del lenguaje es-ldmd
Autocompletado — Sugiere palabras clave (Tabla, Grupo), tipos de datos (entero, texto, etc.) y opciones (no nulo, nota, etc.)
Plegado de código — Permite colapsar bloques delimitados por llaves
Cierre automático — Cierra automáticamente llaves, corchetes, paréntesis y comillas
Navegación desde errores — Al hacer clic en un error en el panel de errores, el editor se desplaza a la línea y columna correspondiente

Vista de Diagrama

El diagrama se renderiza en un Canvas 2D en tiempo real conforme escribes en el editor. Soporta las siguientes interacciones:

Zoom — Usa la rueda del ratón para acercar o alejar
Paneo — Haz clic y arrastra para mover el diagrama
Layout automático — 3 algoritmos disponibles:
- Izquierda-derecha — Dispone las tablas en cadena lineal
- Copo de nieve — Disposición radial desde la tabla más conectada
- Compacto — Organización densa en forma de rectángulo

El diagrama muestra iconos especiales en las columnas:

PK
— Llave primaria
FK
— Llave foránea
NN
— NOT NULL (no nulo)

Panel de Herramientas

El panel derecho contiene pestañas con diferentes herramientas:

Errores — Lista de errores de sintaxis y semánticos detectados en tu código, con nivel de severidad (error, advertencia, información)
Chat IA — Asistente de inteligencia artificial local que funciona directamente en el navegador
Exportación — Opciones para exportar tu modelo a SQL o como imagen

Lenguaje es-ldmd

El lenguaje es-ldmd te permite definir tablas de base de datos, sus columnas, tipos de datos, restricciones, relaciones y agrupaciones usando una sintaxis simple y legible en español.

A continuación se describe cada elemento del lenguaje en detalle con ejemplos prácticos.

Definir Tablas

Tabla simple

Una tabla se define con la palabra clave Tabla seguida del nombre y un bloque entre llaves con las columnas:

Tabla usuarios {
    id entero [incremento]
    nombre texto(100) [no nulo]
    email texto(255) [no nulo]
    activo lógico [no nulo]
    creado_en fecha_hora_zona [no nulo]
    primaria {
        id
    }
}

Tabla con esquema

Puedes definir tablas dentro de un esquema usando la notación esquema.nombre_tabla:

Tabla public.usuarios {
    id entero [incremento]
    nombre texto(100) [no nulo]
    primaria {
        id
    }
}
Tabla ventas.pedidos {
    id entero [incremento]
    total decimal [no nulo]
    primaria {
        id
    }
}

Tipos de Datos

El lenguaje es-ldmd soporta los siguientes tipos de datos, que se convierten automáticamente al tipo SQL correspondiente al exportar:

Tipos simples

Tipo es-ldmd	Descripción	Ejemplo
`entero`	Número entero	`edad entero`
`entero_grande`	Entero grande (64 bits)	`poblacion entero_grande`
`entero_pequeño`	Entero pequeño (16 bits)	`cantidad entero_pequeño`
`texto`	Texto de longitud variable sin límite	`biografia texto`
`decimal`	Número decimal de precisión exacta	`precio decimal`
`flotante`	Número de punto flotante	`temperatura flotante`
`lógico`	Valor lógico verdadero/falso (alias: `logico`, `log`)	`activo lógico`
`fecha`	Fecha (sin hora)	`nacimiento fecha`
`hora`	Hora del día	`apertura hora`
`fecha_hora`	Fecha y hora sin zona horaria	`creado_en fecha_hora`
`fecha_hora_zona`	Fecha y hora con zona horaria	`modificado_en fecha_hora_zona`
`json`	Datos JSON	`metadata json`
`jsonb`	Datos JSON binario (PostgreSQL)	`config jsonb`
`uuid`	Identificador único universal	`id uuid`

Tipos parametrizados

Algunos tipos aceptan parámetros entre paréntesis para especificar longitud o precisión:

Tipo es-ldmd	Resultado SQL	Ejemplo
`texto(n)`	`VARCHAR(n)`	`nombre texto(100)`
`caracter(n)`	`CHAR(n)`	`codigo caracter(3)`

Nota: texto sin parámetros se convierte a TEXT, pero texto(n) se convierte a VARCHAR(n).

Tipos especiales

Tipo es-ldmd	PostgreSQL	MariaDB	Ejemplo
`listado(tipo)`	`TIPO[]`	`JSON`	`etiquetas listado(texto)`
`mapa(clave, valor)`	`JSON`	`JSON`	`propiedades mapa(texto, texto)`
`enum('v1','v2')`	`ENUM('v1','v2')`	`ENUM('v1','v2')`	`estado enum('activo','inactivo')`

Tipos no reconocidos (passthrough)

Si utilizas un tipo que no está en el diccionario de conversión, se preservará exactamente igual en la salida SQL. Esto te permite usar tipos específicos de tu motor de base de datos:

Tabla ejemplo {
    datos bytea        // Se conserva como "bytea" en SQL
    punto geometry     // Se conserva como "geometry" en SQL
}

Opciones de Columna

Las opciones de columna se definen entre corchetes [ ] después del tipo de dato. Puedes combinar múltiples opciones separándolas con comas:

Opción	Descripción	SQL generado
`no nulo`	La columna no acepta valores nulos	`NOT NULL`
`incremento`	Auto-incremento para columnas enteras. En PostgreSQL convierte el tipo a `SERIAL`/`BIGSERIAL`/`SMALLSERIAL`. En MariaDB agrega `AUTO_INCREMENT`.	`SERIAL` / `AUTO_INCREMENT`
por_defecto: `expr`	Valor por defecto. La expresión SQL entre backticks se pasa literalmente como cláusula DEFAULT.	`DEFAULT expr`
`nota: 'texto'`	Comentario descriptivo de la columna	`COMMENT ON COLUMN ...`

Tabla productos {
    id entero [incremento]
    nombre texto(200) [no nulo]
    precio decimal [no nulo]
    descripcion texto [nota: 'Descripción del producto para el catálogo']
    disponible lógico [no nulo, por_defecto: `true`]
    creado_en fecha_hora_zona [no nulo, por_defecto: `NOW()`]
    primaria {
        id
    }
}

Llaves Primarias

Las llaves primarias se definen usando el bloque primaria dentro de la tabla. Este bloque soporta tanto llaves simples (una columna) como compuestas (múltiples columnas):

Llave primaria simple

Define la llave primaria usando el bloque primaria dentro de la tabla:

Tabla usuarios {
    id entero [incremento]
    nombre texto(100)
    primaria {
        id
    }
}

Llave primaria compuesta

Para llaves primarias compuestas (más de una columna), usa el bloque primaria:

Tabla inscripciones {
    id_estudiante entero [no nulo]
    id_curso entero [no nulo]
    fecha_inscripcion fecha [no nulo]
    primaria {
        id_estudiante
        id_curso
    }
}

Esto genera: PRIMARY KEY (id_estudiante, id_curso)

Índices

El bloque indices permite definir índices en una o más columnas:

Tabla pedidos {
    id entero [incremento]
    id_cliente entero [no nulo]
    fecha fecha [no nulo, por_defecto: `CURRENT_DATE`]
    estado texto(20) [no nulo]
    primaria {
        id
    }
    indices {
        id_cliente
        fecha
        estado
    }
}

Cada columna listada en el bloque genera un índice individual: CREATE INDEX ... ON pedidos (id_cliente), etc.

Llaves Foráneas

El bloque foranea define relaciones entre tablas. La sintaxis es:

foranea {
    columna_local tabla_referenciada(columna_referenciada)
}

Ejemplo básico

Tabla pedidos {
    id entero [incremento]
    id_cliente entero [no nulo]
    primaria {
        id
    }
    foranea {
        id_cliente clientes(id)
    }
}

Con acciones de cascada

Puedes especificar acciones de eliminación y actualización en cascada usando corchetes:

Tabla pedidos {
    id entero [incremento]
    id_cliente entero [no nulo]
    primaria {
        id
    }
    foranea {
        id_cliente clientes(id) [eliminación en cascada, actualización en cascada]
    }
}

Esto genera: ON DELETE CASCADE ON UPDATE CASCADE

Múltiples columnas referenciadas

Puedes referenciar múltiples columnas de la tabla destino:

foranea {
    fk_col tabla_destino(col1, col2, col3)
}

Notas de Tabla

Puedes agregar una nota descriptiva a cualquier tabla usando la palabra clave Notaal final del bloque de la tabla:

Tabla clientes {
    id entero [incremento]
    nombre texto(100) [no nulo]
    email texto(255) [no nulo]
    primaria {
        id
    }
    Nota: 'Tabla principal de clientes del sistema de ventas'
}

Las notas se incluyen como comentarios COMMENT ON TABLE en la salida SQL.

Grupos

Los grupos permiten organizar visualmente las tablas en el diagrama. No afectan la estructura de la base de datos, solo la presentación:

Tabla usuarios {
    id entero [incremento]
    nombre texto(100) [no nulo]
    primaria {
        id
    }
}
Tabla roles {
    id entero [incremento]
    nombre texto(50) [no nulo]
    primaria {
        id
    }
}
Tabla permisos {
    id entero [incremento]
    descripcion texto(200)
    primaria {
        id
    }
}
Grupo autenticacion {
    usuarios
    roles
    permisos
}

En el diagrama, las tablas agrupadas se muestran dentro de un rectángulo con el nombre del grupo, y se les asigna automáticamente un color distintivo.

Comentarios

Puedes agregar comentarios de una línea usando //:

// Este es un comentario
// Los comentarios se ignoran durante el análisis
Tabla usuarios {
    id entero [incremento]      // Identificador único
    nombre texto(100)           // Nombre completo del usuario
    primaria {
        id
    }
}
// Fin del modelo

Conversión de Tipos a SQL

Al exportar tu modelo a SQL, cada tipo del lenguaje es-ldmd se convierte automáticamente al tipo correspondiente del motor de base de datos seleccionado:

Tipo es-ldmd	PostgreSQL	MariaDB
`entero`	INTEGER	INTEGER
`texto`	TEXT	TEXT
`texto(n)`	VARCHAR(n)	VARCHAR(n)
`caracter(n)`	CHAR(n)	CHAR(n)
`entero_grande`	BIGINT	BIGINT
`entero_pequeño`	SMALLINT	SMALLINT
`decimal`	DECIMAL	DECIMAL
`flotante`	FLOAT	FLOAT
`lógico` / `logico` / `log`	BOOLEAN	BOOLEAN
`fecha`	DATE	DATE
`hora`	TIME	TIME
`fecha_hora`	TIMESTAMP	TIMESTAMP
`fecha_hora_zona`	TIMESTAMPTZ	TIMESTAMPTZ
`json`	JSON	JSON
`jsonb`	JSONB	JSON
`uuid`	UUID	UUID
`listado(tipo)`	TIPO[]	JSON
`mapa(c, v)`	JSON	JSON
`enum('a','b')`	ENUM('a','b')	ENUM('a','b')

Importante: Si un tipo no está en esta tabla, se preserva exactamente igual en la salida SQL (passthrough). Esto permite usar tipos nativos de tu motor como bytea, geometry, cidr, etc.

Exportación

Exportar a SQL

La exportación a SQL genera código DDL (CREATE TABLE) listo para ejecutar en tu motor de base de datos. Las opciones disponibles son:

Motor de base de datos — PostgreSQL o MariaDB (afecta la conversión de tipos)
IF NOT EXISTS — Agrega IF NOT EXISTS a cada CREATE TABLE
DROP TABLE — Agrega DROP TABLE IF EXISTS antes de cada tabla
Esquema — Incluye el nombre del esquema si fue definido

El SQL generado incluye:

Definiciones de columnas con tipos convertidos
Restricciones PRIMARY KEY, NOT NULL, UNIQUE
Llaves foráneas con acciones de cascada
Índices
Comentarios (notas de tabla y columna)

Exportar como imagen

Descarga el diagrama como imagen PNG directamente desde el canvas. La imagen incluye todas las tablas, relaciones y grupos visibles en el diagrama.

Archivo .esldmd

Puedes guardar y compartir tus modelos como archivos .esldmd:

Descargar (Ctrl + E) — Guarda el contenido actual como un archivo .esldmd en tu computadora
Importar (Ctrl + Shift + U) — Carga un archivo .esldmd desde tu computadora al editor

Gestión de Archivos

La aplicación guarda tus archivos en el almacenamiento local del navegador (localStorage). Esto significa que tus datos persisten entre sesiones sin necesidad de un servidor.

Operaciones disponibles

Crear — Crea un nuevo archivo vacío con nombre personalizado
Guardar — Guarda los cambios del archivo actual (genera una nueva versión)
Abrir — Lista todos los archivos guardados y permite seleccionar uno
Renombrar — Cambia el nombre de un archivo existente
Eliminar — Elimina permanentemente un archivo y todas sus versiones

Sistema de versiones

Cada vez que guardas, se crea una nueva versión con marca de tiempo. Puedes consultar el historial de versiones de cada archivo. Las versiones se almacenan como snapshots completos del contenido.

Preferencias

La aplicación recuerda tu último archivo abierto y tu preferencia de tema (oscuro/claro) entre sesiones.

Chat IA

La aplicación incluye un asistente de inteligencia artificial que ejecuta un modelo de lenguaje directamente en tu navegador usando la tecnología WebLLM.

Características

100% local — El modelo se ejecuta en tu dispositivo, ningún dato sale de tu navegador
Sin servidor — No requiere conexión a internet ni APIs externas después de la carga inicial del modelo
Contexto del código — El asistente tiene acceso al código actual del editor para dar respuestas contextuales

Cómo usarlo

Abre la pestaña Chat IA en el panel de herramientas (derecha)
Espera a que el modelo se cargue (solo la primera vez puede tomar unos segundos)
Escribe tu pregunta o indicación en el campo de texto
El asistente puede ayudarte a generar código es-ldmd, explicar errores o sugerir mejoras

Ejemplo Completo

A continuación se muestra un modelo completo de una tienda en línea que utiliza todas las características del lenguaje:

// ─────────────────────────────────────
// Modelo: Tienda en línea
// ─────────────────────────────────────
Tabla clientes {
    id entero [incremento]
    nombre texto(100) [no nulo]
    email texto(255) [no nulo]
    telefono texto(20)
    activo lógico [no nulo, por_defecto: `true`]
    creado_en fecha_hora_zona [no nulo, por_defecto: `NOW()`]
    primaria {
        id
    }
    indices {
        email
    }
    Nota: 'Clientes registrados en la tienda'
}
Tabla productos {
    id entero [incremento]
    nombre texto(200) [no nulo]
    precio decimal [no nulo]
    stock entero [no nulo, por_defecto: `0`]
    categoria texto(50)
    primaria {
        id
    }
    indices {
        nombre
        categoria
    }
    Nota: 'Catálogo de productos disponibles'
}
Tabla pedidos {
    id entero [incremento]
    id_cliente entero [no nulo]
    fecha fecha_hora_zona [no nulo, por_defecto: `NOW()`]
    total decimal [no nulo]
    estado enum('pendiente','enviado','entregado') [no nulo, por_defecto: `'pendiente'`]
    primaria {
        id
    }
    foranea {
        id_cliente clientes(id) [eliminación en cascada]
    }
    indices {
        id_cliente
        fecha
    }
}
Tabla detalle_pedidos {
    id entero [incremento]
    id_pedido entero [no nulo]
    id_producto entero [no nulo]
    cantidad entero [no nulo, por_defecto: `1`]
    precio_unitario decimal [no nulo]
    primaria {
        id
    }
    foranea {
        id_pedido pedidos(id) [eliminación en cascada]
        id_producto productos(id)
    }
}
// ─── Organización visual ───
Grupo tienda {
    productos
    clientes
}
Grupo ventas {
    pedidos
    detalle_pedidos
}

es-ldmd v0.1.0 — Editor de Diagramas Entidad Relación

← Volver al editor