Herramienta de desarrollo • ERD • Laravel
DBCanvas: Diseña tu Base de Datos de Forma Visual
DBCanvas es una PWA para diseñar diagramas entidad-relación visualmente con Vue Flow. Genera migraciones, Eloquent Models y Factories de Laravel 12 automáticamente desde el diagrama — sin escribir código a mano.
Diseñar el esquema de una base de datos suele empezar de dos formas: escribiendo migrations directamente en código (y rezando para que las FK estén bien) o dibujando cajas en un draw.io genérico que nadie más sabe leer. Ambos enfoques tienen el mismo problema: el modelo mental está en tu cabeza, no en una herramienta que el equipo pueda consultar.
DBCanvas es un canvas interactivo para diseñar diagramas entidad-relación visualmente. Construido con Quasar y Vue Flow, funciona como una PWA instalable y tiene un propósito claro: el diagrama que diseñas no es un PNG, es una fuente de verdad estructurada que la librería laravel-v12-lib-database-designs consume para generar el código de Laravel por ti.
¿Por qué diseñar el esquema de una base de datos cuesta tanto?
Cuando arrancas un proyecto nuevo, la primera decisión técnica suele ser el modelo de datos. Si empiezas por las migrations, escribes código sin un mapa claro. Si empiezas por un diagrama en una herramienta genérica, terminas con un PNG que se desactualiza a la primera iteración y que no tiene conexión con el código real.
Los errores en foreign keys o constraints suelen descubrirse al momento de correr php artisan migrate — cuando ya llevas horas de trabajo. Y comunicar el modelo al equipo sin un diagrama claro es aún más difícil.
Sin DBCanvas
- Diseño en texto: migrations antes de tener el mapa claro
- FK mal conectadas que se descubren al correr migrate
- Sin contexto visual para comunicar el modelo al equipo
- Documentación separada que se desactualiza rápido
Con DBCanvas
- Canvas visual con tablas, columnas y relaciones
- Relaciones representadas como líneas entre tablas
- Columnas con tipos, constraints y comentarios
- Notas contextuales para documentar decisiones de diseño
¿En qué se diferencia de dibujar el diagrama en draw.io?
DBCanvas te da un lienzo infinito donde arrastras tablas, defines columnas con sus tipos y constraints, y conectas relaciones visualmente. Cada tabla es un nodo editable. Las relaciones son líneas que representan foreign keys reales.
Lo que diferencia a DBCanvas de un draw.io o un Miro es que el diagrama no es visual por accidente — es datos estructurados almacenados en base de datos. Esos datos son los que consume la librería Laravel para generar código. El diseño visual y el código generado están sincronizados por definición.
Puedes acceder a DBCanvas en dbcanvas.mangobinario.com.
La interfaz tiene el look de un IDE nocturno: fondo #080a16, acentos en púrpura #8b5cf6, fuente monoespaciada JetBrains Mono y efectos glassmorphism con backdrop-filter: blur(12px). Diseñar el esquema se siente como trabajar en tu editor favorito.
¿Qué se puede colocar en el canvas?
DBCanvas tiene dos tipos de nodos. El foco está en la tabla — que es donde vive toda la lógica del esquema.
Tabla
Nodo principal del diagrama. Define columnas con tipos, PK, nullable, unique, default, comment, enum values e índices. Las conexiones entre tablas representan foreign keys.
Sticky Note
Nota de color libre para documentar decisiones de diseño, marcar áreas del canvas o dejar contexto para el equipo. No genera código.
¿Qué se puede definir en cada columna?
La diferencia está en el nivel de detalle que puedes configurar por columna. No es solo "nombre y tipo": son 20 tipos de dato, de string a binary, con siete modificadores por columna — todo lo que necesita Laravel para generar una migration limpia.
Tipos disponibles
string · integer · uuid · boolean · timestamps · decimal · enum ·
json · text · char · double · bigInteger · float · date ·
dateTime · time · tinyInteger · mediumText · longText · binary
Modificadores por columna
- Primary Key (PK)
- Nullable
- Unique
- Default (UI adaptada al tipo)
- Comment / descripción
- Enum values (solo tipo enum)
- Size (solo string / decimal)
La UI se adapta al tipo seleccionado: el campo size solo aparece para string y decimal, los enum values solo se muestran cuando el tipo es enum. Las filas con PK tienen fondo amarillo para identificarlas visualmente. Puedes reordenar columnas con drag & drop dentro del nodo.
Cada tabla tiene además tres paneles de configuración avanzada accesibles desde el nodo: el gestor de constraints para definir foreign keys y constraints unique compuestas, el gestor de índices para declarar índices sobre una o varias columnas, y el color picker de cabecera para asignar un color de identificación visual a la tabla — útil cuando el canvas tiene muchas tablas y quieres agruparlas visualmente.
¿Cómo se convierte el diagrama en código de Laravel?
El diagrama guardado en base de datos es un JSON estructurado de nodos y edges — no un PNG. Eso significa que otras herramientas pueden leerlo y actuar sobre él. Ahí entra laravel-v12-lib-database-designs.
La librería lee el proyecto de DBCanvas y genera automáticamente las migrations, los Eloquent Models y los Factories. El pipeline completo, de DBCanvas a código Laravel:
Diseñas en DBCanvas → guardas el proyecto
↓
php artisan build:migrations:project --project=mi-proyecto
↓
✅ Migrations generadas en storage/app/private/{project}/migrations/
↓
php artisan db:sync-models --project=mi-proyecto
↓
✅ Eloquent Models generados en app/Models/ (Abstract + extensible)
↓
php artisan db:sync-factories --project=mi-proyecto
↓
✅ Factories generadas en database/factories/
La librería no es una herramienta naive de generación de código. Tiene lógica real detrás:
- Detección de cambios — Solo genera deltas desde la última corrida. No sobreescribe migrations ya ejecutadas.
- Topological sort de FK — Resuelve dependencias circulares entre tablas para generar migrations en el orden correcto.
- Modelos en pares — Genera un Abstract base (sobreescribible por la librería) y un modelo hijo para tu lógica custom. Actualizaciones no pisan tu código.
- Faker inteligente en Factories — Infiere el faker correcto por nombre de columna: email → unique()->safeEmail(), name → name(), created_at → dateTime(), etc.
¿Qué funciones trae DBCanvas?
DBCanvas es una Progressive Web App instalable. Funciona en el navegador sin instalación y como app nativa en desktop y móvil.
Funcionalidades disponibles
- Import/export del diagrama como JSON, a través del portapapeles
- Crear tabla desde texto con inferencia de tipos
- Zoom y pan (0.2x – 4x)
- Undo / Redo (50 pasos) con Ctrl+Z / Shift+Ctrl+Z
- Copiar y pegar nodos con Cmd+C / Cmd+V (clonado completo de estructura)
- Color picker en cabeceras de tablas para identificación visual
- Tour de onboarding interactivo de 4 pasos
- Soporte i18n: es / en-US
- Modo oscuro automático (sistema)
- PWA: instalable, funciona offline
¿Cuántas tablas aguanta un diagrama?
Más de las que vas a necesitar, y la razón es que el canvas solo pinta los nodos que caben en pantalla. Con un diagrama de 200 tablas y 1 600 columnas cargado, en el DOM hay una decena de nodos, no doscientos: el resto existe en el estado, no en la pantalla.
Medido en el navegador, con el diagrama ya en memoria: un proyecto de 30 tablas (240 columnas) queda en pantalla en poco más de medio segundo y se recorre sin que el desplazamiento pierda un solo fotograma. Llevado al extremo de 200 tablas, el diagrama tarda unos tres segundos en pintarse la primera vez y el desplazamiento sigue igual de suave; lo único que se nota es el zoom, que ahí sí baja a la mitad de fotogramas. El archivo de ese diagrama son 328 KB de JSON, que el navegador parsea en menos de 2 ms.
Crear tabla desde texto
En lugar de configurar columna por columna, puedes pegar una descripción en texto libre y DBCanvas infiere los tipos automáticamente. Escribe algo como:
users
id
name
email
password
active
ts
sd
Retos técnicos resueltos
Persistencia de sesión sin perder el diagrama
Al navegar entre rutas, Vue destruye el componente del canvas. El diagrama (posición de nodos, zoom, pan) se perdía en cada navegación.
Solución: El estado del canvas vive en Pinia, no en el componente. Vue Flow serializa nodos y edges al store al desmontar. Al volver, el canvas se restaura exactamente desde donde se dejó.
UI condicional por tipo de columna
Mostrar todos los campos siempre genera ruido: size no aplica a uuid, enum values no aplica a string, etc. El formulario se volvía confuso rápido.
Solución: Cada campo del formulario tiene una función computed que evalúa el tipo seleccionado. La UI reacciona en tiempo real: cambia el tipo y los campos irrelevantes desaparecen inmediatamente.
Inferencia de tipos desde texto libre
Crear tablas columna por columna es lento cuando ya sabes cómo se llama el campo. Necesitábamos una forma de crear tablas completas en segundos.
Solución: Parser de texto libre que analiza cada línea: detecta el nombre, infiere el tipo por el nombre y palabras clave, y aplica modificadores como pk, nullable, unique, etc. La tabla resultante es completamente editable.
Dependencias circulares en FK para migrations
Si tabla A tiene FK a tabla B y tabla B tiene FK a tabla A, no hay orden lineal válido para correr las migrations. Laravel falla con error de FK constraint.
Solución: La librería aplica Kahn's algorithm (topological sort) sobre el grafo de dependencias. Si detecta un ciclo real, genera la migration con la FK nullable primero y agrega una migration de patch posterior que la llena.
Copy/paste de nodos sin colisión de IDs
Al duplicar un nodo, sus columnas, constraints e índices tienen los mismos IDs que el original. Si se pegan tal cual, Pinia y Vue Flow terminan con referencias duplicadas que corrompen el estado del canvas.
Solución: Al ejecutar el paste, se recorre toda la estructura del nodo y se remapean todos los IDs internos con nuevos UUIDs. Las edges que conectaban nodos del clipboard se actualizan para apuntar a los nuevos IDs, y el nodo clonado se posiciona con un offset automático para no quedar encima del original.
Preguntas Frecuentes
¿DBCanvas es gratis?
Sí, es gratis y no requiere registro ni instalación: abres dbcanvas.mangobinario.com y empiezas a diseñar. Al ser una PWA puedes instalarla como aplicación en escritorio o móvil si prefieres tenerla a un clic.
¿Qué código de Laravel genera exactamente?
Tres cosas, mediante la librería laravel-v12-lib-database-designs: las migrations (php artisan build:migrations:project), los Eloquent Models (php artisan db:sync-models) y las Factories (php artisan db:sync-factories). Los modelos se generan en pares —una clase Abstract que la librería sobreescribe y un modelo hijo donde vive tu lógica—, así que regenerar nunca pisa tu código.
¿Sirve si no trabajo con Laravel?
El canvas sí: puedes diseñar el diagrama entidad-relación, definir columnas con sus tipos y constraints, documentar con notas y exportar el proyecto como JSON para leerlo desde tus propias herramientas. Lo que hoy es específico de Laravel 12 es la generación de código; el diagrama en sí es estructura, no un PNG.
¿Cuántas tablas puede tener un diagrama?
No hay un tope fijo, porque el canvas solo dibuja los nodos visibles en pantalla: un diagrama de 200 tablas y 1 600 columnas mantiene apenas una decena de nodos pintados a la vez. Un proyecto de 30 tablas aparece en poco más de medio segundo y se recorre sin saltos; a 200 tablas la primera carga sube a unos tres segundos y el zoom es lo único que se resiente.
¿Dónde se guarda el diagrama?
El proyecto se guarda en base de datos como JSON estructurado de nodos y relaciones, que es justo lo que después consume la librería para generar el código. Además puedes exportarlo e importarlo como archivo JSON, y el estado del canvas —posición, zoom, encuadre— se conserva al navegar entre pantallas.
¿Hacia dónde va DBCanvas?
La visión final de DBCanvas es que puedas hacer click en "Deploy" desde la UI y que el diagrama se despliegue directamente a la base de datos — sin CLI, sin copiar archivos, sin pasos manuales. Estamos construyendo hacia eso por capas.
Diseño visual de ERD (tablas, columnas, relaciones)
Guardado de diagramas en base de datos
Generación de migraciones, models y factories vía artisan
Panel de administración de proyectos
Compartir diagramas con enlace público (solo lectura)
Hacer click en "Deploy" y desplegar el diagrama a la BD
¿Quieres diseñar tu próxima BD con DBCanvas?
Si estás arrancando un proyecto Laravel y quieres tener el modelo de datos claro antes de escribir una sola línea de código, hablemos.
Impulsado con Claude Code Sonnet 4.6
DBCanvas fue desarrollado con Claude Code Sonnet 4.6 como agente de desarrollo. No como atajo — sino como herramienta para ir más rápido hacia un objetivo claro: saber qué querías construir y tener el criterio técnico para guiar cada decisión.
Los developers que saben usar IA no solo entregan más rápido. También aprenden cosas que creían que ya no podrían adquirir. Y hacen del desarrollo algo más disfrutable. Si no estás usando estas herramientas, te estás quedando atrás — no porque la IA te reemplace, sino porque los que la usan bien ya llevan ventaja.
Las demás herramientas abiertas del kit —conversión de CFDI a Excel, modelado espacial en 3D— están reunidas en herramientas gratuitas.
Seguir leyendo
