DBCanvas: Diseña tu Base de Datos como si fuera un Miro

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.

1. El Problema: Diseñar Esquemas de BD es Tedioso

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.

2. La Solución: Un Canvas como Miro pero para Bases de Datos

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.

3. Tipos de Nodos

DBCanvas tiene dos tipos de nodos. El foco está en la tabla — que es donde vive toda la lógica del esquema.

4. Diseño de Columnas: El Detalle que Importa

La diferencia está en el nivel de detalle que puedes configurar por columna. No es solo "nombre y tipo" — puedes definir todo lo que necesita Laravel para generar una migration limpia.

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.

5. El Valor Real: El Diagrama como Fuente de Verdad

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 ciclo completo es:

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:

6. Funcionalidades de la PWA

DBCanvas es una Progressive Web App instalable. Funciona en el navegador sin instalación y como app nativa en desktop y móvil.

users
id
name
email
password
active
ts
sd

7. Retos Técnicos Resueltos

8. Roadmap: La Visión Completa

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.