Explorador renovado e imagen de producción para self-host

La 0.7.0 rediseña el explorador de archivos y carpetas, suaviza el cambio entre diagramas y estrena una imagen de producción del frontend de 68 MB.

Cuando un proyecto pasa de diez diagramas a cincuenta, el explorador deja de ser un detalle y se vuelve la forma en que trabajas. Hasta ahora el árbol de archivos solo permitía eliminar; todo lo demás había que hacerlo arrastrando o desde otras pantallas. En la versión 0.7.0 lo hemos rediseñado por completo, junto con el cambio entre diagramas y la forma de desplegar el frontend.

Un explorador que se usa con mouse y con teclado

Cada diagrama tiene ahora un menú de acciones (botón ⋯ o clic derecho): renombrar, duplicar, mover a una carpeta, mover a otro proyecto y eliminar. Las carpetas tienen el suyo: nuevo diagrama dentro, renombrar y eliminar. Si una carpeta está vacía, te ofrece un acceso directo "Nuevo diagrama aquí".

Lo que más vas a notar en el día a día:

Renombrar en el lugar con F2 o doble clic, tanto diagramas como carpetas.
Mover a una carpeta sin arrastrar, desde el menú. Funciona también en móvil.
Ctrl/Cmd+B abre y cierra el explorador (dentro del editor de descripción sigue siendo negrita).
Fijar el panel con la chincheta: se queda abierto al hacer clic fuera y al recargar.
Navegación con teclado: flechas para moverte y abrir o cerrar carpetas, Inicio/Fin, un solo punto de tabulación y Shift+F10 para abrir el menú de la fila.

El explorador además empuja el contenido en lugar de taparlo, así que el código, la vista previa y la barra inferior siempre quedan visibles. Puedes ajustar su ancho entre 200 y 480 px (doble clic lo restablece), y DiagramaHub recuerda ese ancho y las carpetas que dejaste abiertas en cada proyecto.

También es más fácil de leer: carpetas primero, una etiqueta por tipo de diagrama (MMD, PUML, D2, DBML, DRAW), el título completo al pasar el mouse y un contador al buscar ("3 de 24 diagramas").

Cambiar de diagrama sin parpadeos

Antes, al abrir otro diagrama desde el explorador, el editor completo desaparecía y las partes cargaban a destiempo. Ahora el área de trabajo se cubre con un indicador "Cargando diagrama…" y se revela completa, con un fundido, cuando el nuevo diagrama ya está dibujado.

En el mismo espíritu, crear, mover, renombrar o eliminar desde el explorador ya no recarga todo el editor: el cambio se ve al instante y, si falla, se revierte con un aviso. Corregimos además que el editor se redibujara entero cada segundo por el reloj de la barra inferior, y que la vista previa quedara en blanco un instante en cada redibujado.

Imagen de producción para el frontend

Si tienes DiagramaHub en tu propia infraestructura, esta parte es para ti. El frontend estrena una imagen de producción: un sitio estático servido por Nginx sin usuario root, con cabeceras de seguridad, compresión gzip, caché de recursos y healthcheck. Pesa 68 MB frente a 951 MB de la imagen de desarrollo.

La URL del API y Sentry se inyectan al arrancar el contenedor, no al construir la imagen. Una sola imagen sirve para cualquier entorno, y es compatible con DigitalOcean App Platform (Static Site).

flowchart LR
    A[Una imagen del frontend] --> B[Arranque del contenedor]
    V["Variables VITE_API_URL, VITE_SENTRY_DSN, VITE_APP_ENV"] --> B
    B --> C[Staging]
    B --> D[Producción]

Si usas el escenario deploy/external-mongodb, el frontend pasa del servidor de desarrollo de Vite a esta imagen. Sigue en el puerto 5173 con las mismas variables; para cambiarlas basta con recrear el contenedor. Para actualizar, reconstruye con docker compose up -d --build. El escenario deploy/local-full no cambia. Incluimos también un ejemplo de Content-Security-Policy (csp.conf.example), desactivado por defecto, para que lo habilites en tu despliegue.

Seguridad: lo que llegó en la 0.6.2

Unos días antes publicamos la 0.6.2, una versión de endurecimiento del API:

Cambiar la contraseña exige confirmar la actual. Un token robado ya no basta para quedarse con la cuenta. Si consumes el API directamente, envía current_password; si despliegas frontend y backend por separado, publica primero el frontend.
CORS restringido a métodos y cabeceras explícitos, y Content-Security-Policy restrictiva en producción.
Límites por IP en registro (20/hora), recuperación de contraseña (10/hora), verificación MFA (10 cada 5 minutos) y el renderizado público (60/minuto), con 429 y Retry-After.
Tope de 100 000 caracteres en el código que acepta el renderizado público.
Auditoría completa: recuperación de contraseña, MFA activado y desactivado, y cuenta eliminada ahora quedan registrados.

En la 0.7.0 sumamos que el autocorrector de diagramas con IA verifica que el diagrama sea tuyo, y que un token de una cuenta eliminada recibe 401 en lugar de un error 500.

Pruébalo

Abre un proyecto en DiagramaHub Cloud y presiona Ctrl/Cmd+B. Si lo hospedas tú, actualiza desde el repositorio; todos los detalles están en el changelog.