De 88% a 99% de diagramas válidos

Armamos un banco de pruebas con 160 casos y 4 modelos. El chat generaba un diagrama válido al primer intento el 88% de las veces; con la 0.8.1 llega al 99%. Lo que corregimos:

• El chat con streaming —el que usa la app— enviaba un prompt mínimo, sin el formato esperado ni reglas de sintaxis.
• Las respuestas se cortaban por el límite de tokens: los modelos con razonamiento gastan parte de él pensando. Ahora una solicitud de código recibe 8.192 tokens.
• "Crea un flujo… (¿requiere cirugía?)" se trataba como una pregunta por el signo de interrogación.
• Las reglas de sintaxis se verificaron contra los renderizadores reales: identificadores ASCII en DBML, formas válidas de D2, sintaxis de actividad de PlantUML…

El endpoint /ai/generate-diagram del API también mejora: de 72% a 98% de diagramas válidos.

El diagrama siempre llega a la vista previa

La 0.8.2 resuelve un problema muy molesto. El chat adivinaba con palabras clave si tu mensaje pedía un diagrama o hacía una pregunta, y solo buscaba el código en el primer caso. Pedidos como "¿Me puedes hacer…?", "Necesito que…" o "Agrégale…" se tomaban como preguntas: el modelo sí respondía con el diagrama, pero aparecía como texto partido en fragmentos, sin vista previa ni botón de aceptar.

Ahora decide la respuesta del modelo: si trae el diagrama, se muestra con vista previa, se valida y puedes aceptarlo o rechazarlo. Medido con Gemini real, 7 de 7 pedidos de ese tipo dejaban el código en el chat; ahora 0 de 7, en los 4 tipos de diagrama. Las preguntas se siguen respondiendo con texto.

flowchart TD
    A[Respuesta del modelo] --> B{¿Se cortó por el límite?}
    B -->|Sí| C[Aviso, no se aplica]
    B -->|No| D{¿Trae un diagrama?}
    D -->|No| E[Respuesta en texto]
    D -->|Sí| F{¿Renderiza?}
    F -->|Sí| G[Vista previa: aceptar o rechazar]
    F -->|"No (Mermaid o D2)"| H[Corrección automática, una vez]
    H --> G

Respuestas cortadas y corrección automática

Todas las respuestas del chat tienen ahora el límite de 8.192 tokens, y una respuesta cortada nunca se aplica: ves un aviso en lugar de un fragmento roto.

Además hay una corrección automática opcional (Ajustes → IA, activada por defecto): si el código generado en Mermaid o D2 no renderiza, se le pide al modelo una corrección, una sola vez. Nunca se aplica a PlantUML ni DBML.

Errores claros y modelos actuales

Antes cualquier fallo del proveedor parecía un "límite de solicitudes". Ahora DiagramaHub distingue llave inválida, sin créditos, modelo no disponible y límite de solicitudes, y "Probar conexión" hace una llamada real con el modelo que elegiste.

El catálogo de modelos se actualizó, verificado con la documentación de cada proveedor y llamadas reales: Claude Sonnet 5.5 / Opus 5.5 / Fable 5.1, OpenAI gpt-6-luna / gpt-6.1-sol / gpt-6-astra, DeepSeek deepseek-flash, Gemini 3.8-flash y MiniMax M3. Si tenías guardado un modelo que salió de la lista, sigue funcionando y aparece como "retirado".

Todo el chat en tu idioma

El backend ahora recibe el idioma real de la interfaz (antes siempre era español). Con la 0.8.2 el chat queda completo en inglés —mensajes, vista previa, selector de sesiones, fases y errores— y los errores del chat y de los proveedores llegan en el idioma del usuario.

Seguridad

La 0.8.1 también trae correcciones de seguridad:

• Un usuario podía guardar diagramas en la carpeta de otro, y aparecían en el explorador y en la exportación de esa carpeta. Ahora la carpeta debe ser del mismo proyecto. Si lo hospedas tú, corre una vez scripts.fix_misfiled_diagrams (solo reporta; con --apply corrige, sin borrar nada).
• Duplicar un diagrama respeta el límite del plan.
• axios 1.20 corrige 12 avisos de seguridad (7 altos) y el audit de producción vuelve a cero.
• Los límites de importación se aplican a toda la petición, no por ZIP.

Pruébalo

Abre el chat en cualquier diagrama de DiagramaHub Cloud con tu propia llave, o actualiza tu instalación desde el repositorio. El detalle completo está en el changelog.

Dos formatos, dos usos

Al exportar un proyecto (o solo una carpeta) eliges entre:

• ZIP: una subcarpeta por cada carpeta del proyecto, un archivo por diagrama con la extensión de su lenguaje (.mmd, .puml, .d2, .dbml o .freehand.json para el pizarrón), su descripción en un .md al lado, un README.md con el índice y un manifest.json para volver a importarlo.
• Markdown en un solo archivo, en dos variantes:
  • Para contexto de IA: empieza con un preámbulo que le explica al modelo qué es el archivo, incluye un índice con las rutas, los metadatos de cada diagrama y una estimación de tokens. Está listo para pegarlo en ChatGPT o Claude.
  • Estándar: un documento limpio para tu wiki o tu repositorio.

En ambos casos los diagramas van en bloques de código con su etiqueta (mermaid, plantuml, d2, dbml), así que cualquier herramienta que entienda Markdown los reconoce.

Cómo se ve el flujo

flowchart LR
    A[Proyecto en DiagramaHub] --> B{¿Para qué lo necesitas?}
    B -->|Darle contexto a una IA| C[Markdown para IA]
    B -->|Documentación| D[Markdown estándar]
    B -->|Respaldo o migración| E[ZIP]
    C --> F[ChatGPT / Claude]
    D --> G[Wiki o README]
    E --> H[Importar en otra instancia]

Antes de descargar, DiagramaHub te muestra qué se va a exportar: número de diagramas y carpetas, tamaño y, en la variante para IA, los tokens aproximados. Así sabes si cabe en la ventana de contexto de tu modelo antes de pegarlo.

Dónde está

• En el explorador del editor, con el icono de descarga (proyecto completo) o desde el menú de una carpeta → Exportar carpeta.
• En la lista de proyectos.

Y de regreso: importar

La otra mitad de la historia es traer diagramas. Desde el icono de subida del explorador, el menú de una carpeta (Importar aquí) o arrastrando archivos desde tu sistema sobre el explorador, puedes importar:

• Archivos sueltos .mmd, .puml, .d2, .dbml, Markdown con un bloque de código y pizarrones .freehand.json.
• ZIP: los exportados por DiagramaHub restauran carpetas y colores; cualquier otro ZIP crea carpetas a partir de sus rutas.
• Dibujos de Excalidraw (.excalidraw): formas, etiquetas, flechas conectadas, trazos y texto se convierten en un pizarrón.

Antes de crear nada ves una vista previa con las carpetas y diagramas que se van a crear, los archivos que se omiten y por qué, y el cupo de tu plan. La importación es de todo o nada: si algo falla a medio camino, se revierte lo creado.

El pizarrón ahora se ve hecho a mano

La 0.8.0 también trae la mayor actualización del pizarrón desde que llegó:

• Aspecto hecho a mano en formas, líneas y flechas, con estilos de trazo (Limpio, Arquitecto, Artista, Caricatura) y de relleno (sólido, rayado, cruzado).
• Trazo libre suave con grosor variable y presión del lápiz.
• Fuente manuscrita para los textos nuevos, con selector Manuscrita / Normal / Código.
• Bloquear elementos (Ctrl/Cmd+Shift+L) para que no se muevan, redimensionen ni borren por accidente.
• Exportar a PNG en 1x, 2x o 3x, con fondo transparente opcional, y descargar la fuente como .freehand.json.
• Boceto → Mermaid: las formas con texto se vuelven nodos y las flechas conectadas, relaciones de un diagrama de flujo nuevo. No usa IA, así que el resultado es exacto y repetible.

Los dibujos que ya tenías conservan su estilo limpio; solo los elementos nuevos usan el estilo a mano, y puedes cambiarlo por elemento.

Sin lock-in

Tus diagramas son texto, y ahora salen y entran de DiagramaHub sin fricción. Puedes llevarte un proyecto a tu repositorio, compartirlo con alguien que use otra instancia o darle a tu IA el mapa completo de tu sistema.

Ya está disponible en DiagramaHub Cloud y en la versión self-host. Los detalles técnicos están en el changelog.

Cero vulnerabilidades conocidas en el frontend

Las dependencias de producción del frontend tenían 25 avisos de seguridad, uno de severidad alta. Ahora son cero. Actualizamos DOMPurify a 3.4.16 (es la librería que limpia el SVG de tus diagramas), Mermaid a 11.17.2 y react-router a 7.18.4.

Encontramos además algo incómodo: desde la migración a pnpm en la 0.6.0, los 6 parches de seguridad que forzábamos sobre dependencias estaban escritos en el formato de npm, y pnpm los ignoraba en silencio. Ahora viven en pnpm.overrides y vuelven a aplicarse.

Backend sin root y peticiones con límite

Dos cambios para quienes operan su propia instalación:

• El contenedor del backend corre como usuario sin privilegios (app, uid/gid 1000), y la imagen usa Poetry 2.5.1 (la 1.8.3 y su dependencia dulwich tenían avisos de seguridad).
• Límite global de tamaño de petición: las peticiones con un cuerpo mayor a MAX_REQUEST_BODY_BYTES (por defecto 5 MB) reciben 413, tanto si el cliente declara el tamaño como si envía el cuerpo por partes.

Para actualizar, reconstruye la imagen con docker compose up -d --build. En el escenario de desarrollo (deploy/local-full), si en Linux tu usuario no es el uid 1000, Python no podrá escribir sus cachés en la carpeta montada; es inofensivo y la imagen de producción no se ve afectada. Si instalas dependencias fuera de Docker, usa Poetry 2.

Un autoguardado en el que puedes confiar

Había dos problemas que no se veían a simple vista:

• Abrir un diagrama lo marcaba como modificado. El autoguardado y el guardado del zoom y la posición se disparaban al cargar, cambiando la fecha de modificación y el orden de "Recientes". Ahora solo se guarda cuando hay un cambio real; mover, hacer zoom o ajustar el ancho de un panel ya no cuenta como modificación.
• Se podían perder ediciones hechas justo antes de cambiar de diagrama o salir del editor, dentro del segundo y medio de espera del autoguardado.

flowchart LR
    A[Editas el diagrama] --> B{¿Qué pasa después?}
    B -->|Esperas| C[Autoguardado]
    B -->|Cambias de diagrama| D[Se guarda al cambiar]
    B -->|Sales del editor u ocultas la pestaña| E[Se guarda al salir]
    B -->|Cierras con cambios pendientes| F[El navegador te avisa]

Además, los guardados se envían uno a la vez, así que uno lento no puede pisar una edición más reciente. Y el título de la barra superior ya no muestra el diagrama anterior mientras carga el siguiente.

Hasta 71% menos JavaScript

Antes la aplicación entera venía en un solo archivo. Ahora cada página se descarga por separado:

• El login y el dashboard descargan 193 KB de JavaScript en lugar de 668 KB, y aparecen en ~105 ms y ~130 ms (antes ~165 ms y ~190 ms).
• El editor pinta el diagrama en ~180 ms (antes ~300 ms).
• El editor se precarga en segundo plano cuando tienes sesión, así que pasar del dashboard a un diagrama no espera la descarga.
• La exportación carga sus librerías solo cuando exportas, lo que aligera el editor.

En el servidor, la lista de "Recientes" del dashboard se resuelve con una sola consulta indexada en lugar de leer todos los diagramas de todos tus proyectos con su contenido. El índice nuevo en MongoDB se crea solo al arrancar el backend.

Detalles que también cuentan

Los avisos nativos del navegador en la generación con IA y en la configuración de proveedores se reemplazaron por avisos de la aplicación que se pueden cerrar y respetan el modo oscuro. Las fechas siguen el idioma de la interfaz en todas partes (exportaciones a PDF/PNG, facturación, perfil, editor), y más textos que estaban fijos en español ahora también están en inglés.

Actualiza

En DiagramaHub Cloud ya está activo. Si lo hospedas tú, toma la versión del repositorio y revisa las notas de actualización en el changelog.

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.

Mueve un diagrama a otro proyecto

A veces un diagrama nace en el proyecto equivocado, o un prototipo termina siendo parte de otro sistema. Ahora tienes una acción Mover en la barra del editor: eliges el proyecto destino en un selector y listo.

Un par de detalles para que sepas qué esperar:

• El diagrama llega a la raíz del proyecto destino; si estaba dentro de una carpeta, deja de estarlo, y desde ahí lo acomodas donde quieras.
• El servidor hace validaciones de propiedad antes de moverlo.

Duplica en un clic

Para probar una variante sin tocar el original, usa Duplicar desde la barra del editor. El modal de confirmación te sugiere un nombre según tu idioma (<nombre>-copia en español, <nombre>-copy en inglés) que puedes cambiar antes de confirmar. La copia se abre automáticamente y ya ajustada a la pantalla, lista para editar.

flowchart LR
    A[Diagrama original] -->|Duplicar| B["nombre-copia"]
    A -->|Mover| C[Raíz de otro proyecto]
    B --> D[Se abre ajustado a pantalla]

Un modal de exportación en dos pasos

Rediseñamos otra vez el modal de exportación, ahora con un flujo en dos pasos:

1. Eliges el formato.
2. Ajustas solo las opciones que aplican a ese formato y pulsas Exportar.

Así no ves controles que no tienen nada que ver con lo que estás exportando. Por ejemplo, el nuevo selector de resolución PNG solo aparece cuando eliges PNG, con tres opciones:

• Pantalla (1x), para algo rápido.
• Estándar (2x), la opción por defecto.
• Alta (3x), cuando necesitas máxima nitidez.

PDF de 5 a 15 veces más ligeros

La imagen que va dentro del PDF pasó de PNG sin pérdida a JPEG con calidad 0.98, que en diagramas es visualmente indistinguible. El resultado: los PDF pesan de 5 a 15 veces menos. Un PDF que antes ocupaba 20 MB ahora queda entre 1.5 y 5 MB, mucho más fácil de adjuntar o subir a tu wiki.

PNG grandes sin trabarse

Para diagramas enormes, el PNG ahora tiene un tope de 8192 px y se descarga usando Blob URLs en lugar de base64. Eso evita el costo extra de la codificación y los picos de memoria que podían hacer lenta la exportación.

Botones consistentes en toda la app

También unificamos el diseño de los botones: un solo patrón para primarios y secundarios, con anillo de foco, estado deshabilitado y spinner de carga, aplicado en toda la aplicación. Es un cambio visual pequeño, pero hace que la interfaz se sienta más coherente.

Pruébalo

Abre un diagrama en DiagramaHub Cloud y prueba Mover, Duplicar o exportar un PNG en alta resolución. Si usas la versión self-host, actualiza a la 0.6.1. Los detalles técnicos están en el changelog.

Un nuevo tipo de diagrama: el pizarrón

Además de Mermaid, PlantUML, D2 y DBML, ahora puedes crear un diagrama de tipo Mano alzada (Freehand): un lienzo parecido a Excalidraw donde dibujas directamente con:

• Formas básicas: rectángulos, rombos y círculos.
• Flechas, líneas, texto y trazos libres.
• Una barra de herramientas con selectores de color y de grosor de trazo.

Para quienes administran una instalación self-host: el estado del lienzo se guarda como JSON en el mismo campo de contenido que usan los demás diagramas, así que no hace falta ninguna migración de esquema.

Lo mejor de Miro y Excalidraw

Un pizarrón vive o muere por cómo se siente al usarlo, así que tomamos lo que mejor funciona de Miro y Excalidraw:

• Deshacer y rehacer (Ctrl+Z, Ctrl+Shift+Z o Ctrl+Y) con botones en la barra e historial de hasta 100 pasos.
• Texto en línea, sin el prompt del navegador: soporta varias líneas, los textos crecen solos y el texto dentro de una forma siempre queda centrado.
• Atajos de teclado para cada herramienta, duplicar con Ctrl+D, mover elementos con las flechas del teclado y ajustar al contenido con F.
• Herramienta mano y desplazamiento con Espacio + arrastrar.
• Alinear y distribuir cuando seleccionas varios elementos.
• Agrupar y desagrupar (Ctrl+G / Ctrl+Shift+G); al hacer clic seleccionas el grupo completo.
• Rotar formas y texto con una manija, con saltos de 15° si mantienes Shift. Las flechas conectadas siguen a los anclajes aunque la forma esté rotada.
• Guías de alineación rojas al estilo Miro, con snapping al arrastrar o dibujar.
• Un panel de estilos contextual que aparece junto a lo que seleccionaste.
• Borrador que funciona arrastrando, líneas discontinuas, puntas de flecha al inicio o al final, esquinas redondeadas y tamaño de fuente ajustable.

Convierte entre Mermaid, PlantUML, D2 y DBML

¿Tienes un diagrama en Mermaid y tu equipo documenta todo en PlantUML? ¿Un esquema que quieres llevar a DBML? Ahora puedes convertir un diagrama a otro lenguaje con el proveedor de IA que ya configuraste en DiagramaHub (tu propia API key, como en el resto de las funciones de IA).

Antes de cambiar nada, ves el original y el resultado lado a lado, junto con advertencias sobre posibles incompatibilidades entre los lenguajes. La conversión es solo una vista previa: nada se guarda hasta que la aceptas. Al aceptar, el diagrama se recentra automáticamente en pantalla.

sequenceDiagram
    participant U as Tú
    participant D as DiagramaHub
    participant IA as Tu proveedor de IA
    U->>D: Convertir a otro lenguaje
    D->>IA: Diagrama original y lenguaje destino
    IA-->>D: Diagrama convertido
    D-->>U: Vista previa lado a lado con advertencias
    U->>D: Aceptar
    D-->>U: Diagrama actualizado y recentrado

Otros cambios

• El editor ahora abre con el panel de carpetas y archivos cerrado; aparece al hacer clic en el ícono de carpeta junto al nombre del diagrama.
• Para self-host: el frontend pasó de npm a pnpm, con instalaciones más rápidas y mejor uso del disco.

Pruébalo

Crea un diagrama de tipo Mano alzada o convierte uno existente en DiagramaHub Cloud. Si usas la versión self-host, actualiza a la 0.6.0. Todos los detalles están en el changelog.

Un explorador que se queda contigo

Si usas VS Code, esto te va a resultar familiar. El editor de diagramas de escritorio ahora tiene un explorador de proyecto persistente con el árbol de tu proyecto: los diagramas de la raíz y tus carpetas con su contenido. Abres otro diagrama sin salir del editor y sin perder el contexto de dónde está cada cosa.

También corregimos un detalle que hacía incómodo usarlo: las interacciones dentro del explorador ya no cierran el panel como si fueran clics fuera de él.

Organiza sin salir del editor

Además de navegar, desde el explorador puedes ordenar tu proyecto:

• Crear diagramas directamente dentro de una carpeta, sin tener que crearlo en la raíz y moverlo después.
• Renombrar carpetas cuando el nombre que elegiste al inicio ya no describe lo que contienen.
• Mover diagramas con arrastrar y soltar entre la raíz del proyecto y las carpetas.

Las carpetas siguen siendo de un solo nivel. Es una decisión a propósito: una jerarquía plana se mantiene fácil de recorrer y evita los árboles profundos donde nadie encuentra nada.

flowchart TD
    P[Proyecto] --> R1[Diagrama en la raíz]
    P --> C1[Carpeta Backend]
    P --> C2[Carpeta Base de datos]
    C1 --> D1[Secuencia de login]
    C1 --> D2[Arquitectura de servicios]
    C2 --> D3[Esquema DBML]
    R1 -. arrastrar y soltar .-> C1

Ajustar a pantalla, ahora bien centrado

Otro cambio que se nota al trabajar: ajustar a pantalla ahora calcula el encuadre con los límites reales del SVG renderizado. En la práctica, los diagramas de D2 se centran correctamente, algo que antes no siempre pasaba.

Página "Acerca de"

Agregamos una página Acerca de dentro de la aplicación con los detalles del producto, el enlace al repositorio de GitHub, nuestra cuenta de X y el correo de contacto. Si quieres reportar algo, proponer una idea o simplemente ver el código, ahí tienes todos los caminos en un solo lugar.

Dependencias al día

En esta versión también actualizamos las dependencias del frontend, entre ellas Mermaid a la 11.16.0 y DOMPurify a la 3.4.12, y renovamos las dependencias transitivas. Con eso, npm audit reporta 0 vulnerabilidades tanto en dependencias de producción como de desarrollo.

Pruébalo

Abre cualquier diagrama en DiagramaHub Cloud y organiza tu proyecto desde el explorador. Si usas la versión self-host, actualiza a la 0.5.10. Los detalles técnicos están en el changelog.

SVG: vectores limpios para tu documentación

Desde la 0.5.8 puedes descargar tus diagramas de Mermaid, PlantUML, D2 y DBML como SVG. Al ser vectorial, se ve nítido a cualquier tamaño, pesa poco y se integra bien en:

• Documentación y READMEs, donde un PNG se ve borroso al hacer zoom.
• Herramientas vectoriales, si quieres seguir editando el diagrama a mano para una presentación o un póster.

Junto con el SVG rediseñamos el modal de exportación. Ahora los formatos aparecen como una cuadrícula de 2×2 tarjetas (PNG, SVG, PDF y Markdown), las opciones de contenido viven en una sección secundaria más compacta y la descarga del código fuente pasó a un botón discreto al pie. Menos ruido, misma potencia.

PDF de 150–200 MB a ~1–5 MB

Dos días antes, en la versión 0.5.7, atacamos un problema que seguro notaste si exportaste un diagrama grande a PDF: el archivo pesaba entre 150 y 200 MB. La causa era que capturábamos un bitmap sin comprimir. Lo cambiamos por una rasterización PNG de alta calidad a 2x, y ahora el mismo PDF ronda ~1–5 MB.

Esa versión también trajo:

• Encabezado y pie en PDF y PNG: el título del diagrama siempre aparece; si lo eliges, también el proyecto, la carpeta y el autor. Al pie va la fecha de exportación.
• Descripciones con formato en el PDF: el Markdown de la descripción se dibuja como HTML con encabezados, negritas, listas y tablas, en lugar de mostrar la sintaxis cruda.
• Markdown más completo: la exportación a Markdown incluye la descripción del diagrama y los metadatos del proyecto cuando seleccionas esas opciones.
• Indicador de carga por formato: cada botón muestra su propio spinner, en vez de que todos digan "Exportando" a la vez.
• Carga bajo demanda de jsPDF: la librería de PDF solo se descarga cuando la necesitas, así que el editor abre más rápido.

Por dentro, sacamos la lógica de exportación del componente del editor a módulos dedicados (generador de PDF, exportador de Markdown, renderizador de descripciones y encabezado de metadatos). Eso es lo que nos permitió agregar el SVG sin complicar más el código.

Cómo queda el flujo

flowchart LR
    A[Tu diagrama] --> B[Modal de exportación]
    B --> C[PNG]
    B --> D[SVG]
    B --> E[PDF]
    B --> F[Markdown]
    D --> G[README o wiki]
    D --> H[Editor vectorial]
    E --> I[Compartir con quien no usa DiagramaHub]

Seguridad: lo que corregimos en estas versiones

Entre la 0.5.5 y la 0.5.8 también hubo trabajo de seguridad que vale la pena contar:

• Cambio de contraseña (0.5.6, crítico): al cambiar o restablecer la contraseña, un error hacía que se guardara de nuevo el hash anterior, así que en la práctica la contraseña no cambiaba. Ya está corregido. Si cambiaste o restableciste tu contraseña antes de esta versión, te recomendamos hacerlo otra vez.
• XSS basado en DOM (0.5.8): el SVG renderizado ahora se sanitiza con DOMPurify antes de mostrarse en la vista previa, el editor y los diagramas compartidos, y lo mismo pasa con las descripciones en Markdown que se dibujan para PDF y PNG.
• Imágenes más seguras: el backend pasó a una imagen base Alpine con menos paquetes y menos superficie de CVEs (0.5.6), y la imagen del frontend incorpora los últimos parches de OpenSSL (0.5.8). Además, las descripciones de diagramas ahora tienen un límite de 50,000 caracteres (0.5.5).

Pruébalo

Abre cualquier diagrama en DiagramaHub Cloud, haz clic en exportar y elige SVG. Si usas la versión self-host, actualiza a la 0.5.8. Todos los cambios técnicos están en el changelog.

Respuestas en streaming

Las respuestas del chat ahora llegan de forma progresiva mediante Server-Sent Events (SSE). En lugar del spinner, ves la fase en la que va la respuesta: "Pensando…", "Analizando tu diagrama…", "Generando código…" y "Validando sintaxis…".

sequenceDiagram
    participant T as Tú
    participant C as Chat
    participant P as Proveedor de IA
    T->>C: Pides un cambio al diagrama
    C->>P: Mensaje con el diagrama como contexto
    P-->>C: Respuesta en fragmentos
    C-->>T: Fases en vivo y texto progresivo
    C-->>T: Diagrama validado y vista previa del diff

Funciona con los cinco proveedores: OpenAI, Claude, Gemini, DeepSeek y MiniMax. Si un proveedor no soporta streaming, el chat regresa automáticamente al flujo tradicional, sin que tengas que hacer nada.

El chat sabe qué tipo de respuesta esperas

No todas las peticiones son iguales, así que el chat detecta el modo de respuesta:

• Modo código: cuando pides modificar el diagrama, solo ves las fases, sin el texto interno del modelo.
• Modo texto: cuando preguntas algo o pides un análisis, el texto aparece conforme se genera.

Además, las etiquetas <think> de los modelos de razonamiento (como DeepSeek) se filtran en tiempo real. Si cierras el panel de chat o cambias de diagrama, el stream se cancela solo. Y si algo falla, tienes un botón de reintento con un máximo de 3 intentos consecutivos.

Dos detalles más: cuando la IA no da una explicación, ya no verás el genérico "Diagrama modificado según tu solicitud", solo la vista previa del diff; y el chat ahora responde en el idioma que tienes activo en la aplicación.

Acciones rápidas: un clic en vez de un prompt

La 0.5.4 agrega cuatro acciones predefinidas en el chat:

• Explicar: entiende qué hace el diagrama.
• Mejorar UI: pule cómo se ve.
• Mejorar Proceso: revisa el flujo que describe.
• Reparar: corrige lo que está fallando.

Para que cada petición caiga en el lugar correcto, si pides una explicación desde el modal de mejora, DiagramaHub te redirige al chat de IA, donde la respuesta se muestra como texto.

Un panel de chat a tu medida

El panel de chat ahora es redimensionable, y su ancho se guarda para cada diagrama. Si en un diagrama grande prefieres más espacio para el lienzo y en otro quieres leer explicaciones largas, cada uno recuerda tu preferencia.

Seguridad y mantenimiento

Junto al streaming agregamos sanitización del SVG que se renderiza en el servidor (Kroki) con DOMPurify, y corregimos un efecto secundario que ocultaba los textos de los nodos en Mermaid. El backend pasó a Python 3.12 con una imagen Docker base actualizada. Para quien administra una instancia, el panel de administración suma las columnas "Uso de licencia", "Modelos IA conectados" y "Último login".

Pruébalo

Abre un diagrama en DiagramaHub Cloud, despliega el chat y prueba Explicar o Reparar. Si haces self-host, actualiza desde el repositorio; los detalles están en el changelog.

Una navegación nueva

La barra lateral ahora es colapsable y concentra la navegación, el cambio de tema y el selector de idioma. Con ella reorganizamos varias cosas:

• Proyectos tiene su propia página, con vista de tabla.
• La sección "IA" ahora se llama Ajustes y usa un ícono de engrane.
• Cerrar sesión se movió a la página de Perfil.

El dashboard también cambió: incluye una gráfica de dona, un widget de uso de IA y tus diagramas recientes, para que retomes el trabajo en un clic.

Modo oscuro de verdad

El modo oscuro cubre toda la aplicación: páginas, modales y editor. En el editor de código agregamos el tema Kiro Dark para Monaco, además de un breadcrumb del proyecto y un panel de código redimensionable.

DBML: tu esquema de base de datos como código

DBML (Database Markup Language) se suma a Mermaid, PlantUML y D2. Se renderiza con Kroki en tu propia infraestructura, igual que PlantUML y D2, así que el contenido de tu esquema no sale a servicios públicos. Así se ve un modelo sencillo:

Table users {
  id integer [pk]
  email varchar [unique]
}

Table diagrams {
  id integer [pk]
  user_id integer [ref: > users.id]
  title varchar
}

Tablas, columnas y relaciones en unas cuantas líneas, versionables junto a tu código.

MiniMax y modelos actualizados

Agregamos MiniMax como proveedor de IA, con el mismo modelo BYOL (Bring Your Own LLM) de siempre: usas tu propia API key. Puedes elegir entre MiniMax-M2.7 y MiniMax-M2.5.

También actualizamos el catálogo con DeepSeek v4 y Gemini 3.1. Si un diagrama tenía guardado un modelo que el proveedor ya retiró, DiagramaHub cambia automáticamente a uno vigente en lugar de fallar.

Un chat de IA más confiable

El chat recibió varias mejoras que se notan en conversaciones largas:

• Un resumen continuo y persistente de la sesión, para que el modelo no pierda el hilo.
• Un formato que prioriza el código, con mecanismos de respaldo para extraer el diagrama de la respuesta.
• Las etiquetas <think> de modelos de razonamiento como DeepSeek y MiniMax ya no aparecen en el chat.
• El límite de tokens de respuesta pasó de 2048 a 4096.
• Los prompts ahora incluyen el contexto de renderizado de Kroki.

Y el botón "Corregir con IA" ahora vive en el panel de código y también funciona con errores de renderizado, no solo de sintaxis. Los errores de Kroki, por cierto, ahora se muestran en un formato legible.

Pulido y seguridad en los parches

Las versiones de parche que siguieron continúan el trabajo:

• 0.5.1 agrega estados de carga con esqueletos, estados vacíos que te guían al siguiente paso y un layout del editor pensado para móvil: paneles de código y descripción en hojas deslizables, barra de herramientas inferior y zoom con pellizco sobre el diagrama.
• 0.5.2 es un release de seguridad: actualizamos dependencias del frontend (axios, jspdf, react-router-dom, mermaid y easymde) para resolver vulnerabilidades críticas y altas reportadas por Snyk, y nos integramos al Snyk Secure Developer Program for Open Source para monitorearlas de forma continua.

Pruébalo

Activa el modo oscuro y crea tu primer diagrama DBML en DiagramaHub Cloud, o actualiza tu instancia desde el repositorio. La lista completa de cambios está en el changelog.

Kroki: tus diagramas no salen de casa

Kroki es un motor de renderizado de diagramas que corre como un servicio más en Docker (yuzutech/kroki). Lo agregamos a las tres configuraciones de Docker Compose del proyecto, así que si haces self-host no tienes que instalar nada aparte. La URL se configura con la variable KROKI_URL (por defecto http://kroki:8000).

La regla de enrutamiento es sencilla:

flowchart LR
    A[Editor] --> B{Tipo de diagrama}
    B -->|Mermaid| C[Render en tu navegador]
    B -->|PlantUML o D2| D[Backend de DiagramaHub]
    D --> E[Kroki autohospedado]
    E --> F[SVG]

Mermaid sigue dibujándose en tu navegador. PlantUML y D2 van a tu backend, que habla con tu Kroki y regresa un SVG. Ningún servicio público ve el contenido.

También agregamos un endpoint POST /api/v1/diagrams/render que recibe el código y el tipo de diagrama y devuelve el SVG. No requiere autenticación para que los diagramas compartidos se vean correctamente.

D2 llega como tercer lenguaje

Además de Mermaid y PlantUML, ahora puedes crear diagramas en D2, un lenguaje declarativo moderno que se lee casi como una lista de relaciones:

usuario: Usuario
api: API
db: Base de datos {
  shape: cylinder
}

usuario -> api: petición HTTP
api -> db: consulta

El soporte es completo desde el primer día:

• Renderizado vía Kroki.
• Resaltado de sintaxis en el editor.
• Selector con 19 temas (claros, oscuros y especiales).
• Validación de sintaxis.
• Corrección con IA y soporte en el chat de IA, que ya conoce el contexto de D2.

En la 0.4.1 corregimos un detalle importante: el botón "Corregir con IA" fallaba con D2 y PlantUML porque el código corregido traía llaves anidadas y confundía al parser de respuestas. Lo reemplazamos por uno que balancea llaves en los cuatro clientes (OpenAI, Claude, Gemini y DeepSeek), y con OpenAI ahora forzamos respuestas JSON válidas.

Un editor que se siente como tu IDE

La 0.4.0 también trae una buena ronda de mejoras de experiencia:

• Editor de código estilo IDE: tema oscuro, barra de título tipo macOS, pestaña de archivo con indicador de error y barra de estado con errores, líneas y tipo de diagrama.
• Selector de proyectos con búsqueda, para cambiar de proyecto sin salir del editor.
• Panel de diagramas rediseñado: barra lateral flotante con buscador, acciones rápidas, indicador del diagrama activo y jerarquía de carpetas.
• Nuevo modal para crear diagramas, con selector de tipo (Mermaid, PlantUML, D2) y su descripción.
• Panel de descripción redimensionable, que recuerda el ancho para cada diagrama.
• Dashboard con saludo personalizado y tarjetas de proyectos, diagramas, última actividad y plan actual.

Y además, todas las vistas se adaptan a móvil y tablet, del editor al perfil y la vista compartida.

Pulido en la 0.4.1

Además del arreglo de "Corregir con IA", la 0.4.1 renueva la pantalla de login con un fondo animado y una tarjeta con efecto de vidrio, muestra el correo al que enviamos tu código en la verificación MFA y traduce por completo el modal para compartir diagramas, con fechas en el formato de tu idioma.

Pruébalo

Crea un diagrama D2 en DiagramaHub Cloud o actualiza tu instancia desde el repositorio: Kroki ya viene en el Docker Compose. Todos los cambios están en el changelog.

Inicia sesión con Google

Ahora puedes entrar con tu cuenta de Google (OAuth 2.0 / OpenID Connect). Así funciona:

• Si el email de Google coincide con una cuenta que ya tienes, el proveedor se vincula automáticamente. No pierdes tus proyectos ni tienes que migrar nada.
• Si eres nuevo, se crea tu cuenta con el plan FREE en un solo paso.
• En tu perfil ves los proveedores vinculados y la fecha en que los vinculaste.

Los logins con Google no pasan por el MFA de DiagramaHub: la sesión dura 5 días y el banner que recomienda activar MFA no aparece en esas sesiones.

Por dentro lo construimos con cuidado:

• Protección CSRF con tokens de estado guardados en el servidor, que expiran a los 10 minutos y se limpian solos.
• Validación del ID token: firma, issuer, audience y expiración.
• Rate limiting en el endpoint de callback y audit log para cada evento OAuth (logins exitosos o fallidos y vinculación de cuentas), en la misma bitácora de seguridad que ya registraba el resto de los eventos.

La arquitectura es agnóstica del proveedor: Google es el primero y cada proveedor se integra con una clase adaptadora. Si administras tu propia instancia, OAuth aparece como una integración en el panel de administración que puedes activar o desactivar.

De paso, las páginas de login y registro ahora tienen un selector de idioma en la esquina superior derecha, y el login muestra la versión de la aplicación.

Un solo chat que detecta tu intención

Antes, el chat de IA tenía modos separados para conversar y para mejorar un diagrama, y te tocaba elegir. Ahora hay un solo chat que detecta automáticamente qué quieres hacer:

flowchart LR
    A[Escribes tu mensaje] --> B{Intención detectada}
    B -->|Pregunta o duda| C[Conversa contigo]
    B -->|Algo nuevo| D[Genera un diagrama]
    B -->|Cambiar lo actual| E[Mejora el diagrama existente]

Escribes como le hablarías a un colega: "¿qué falta en este flujo?", "hazme un diagrama de secuencia del checkout" o "agrega el servicio de pagos". El chat decide si responder, generar o mejorar, sin que selecciones nada.

Además, el proveedor que eliges en una sesión de chat ahora se guarda correctamente en las preferencias del diagrama, y DeepSeek funciona también en las operaciones de refinamiento. Por dentro simplificamos el modelo de datos del chat y eliminamos el código de los modos anteriores.

Descripciones generadas con IA

Un diagrama dice mucho, pero no siempre explica el porqué. Ahora puedes generar una descripción en Markdown estructurado para cualquier diagrama existente y refinarla después con la IA hasta que diga lo que necesitas. Mejoramos los prompts para que el resultado sea consistente, y la generación respeta el proveedor preferido que configuraste para ese diagrama, con tus propias API keys como siempre.

Un ajuste rápido: 0.3.1

El mismo día publicamos la 0.3.1, que corrige un error de compilación de TypeScript que impedía el build de producción. No cambia nada para ti como usuario, pero si construyes la imagen tú mismo, usa esta versión.

Pruébalo

Entra a DiagramaHub Cloud con tu cuenta de Google y abre el chat de cualquier diagrama. Si lo hospedas tú, actualiza desde el repositorio y activa la integración de OAuth en el panel de administración. Todos los cambios están en el changelog.

Autenticación multi-factor

La novedad principal es MFA, con dos métodos que puedes tener activos al mismo tiempo:

• Email: te enviamos un código al correo, en español o inglés según el idioma de tu cuenta.
• App TOTP: Google Authenticator, Authy o cualquier app compatible.

Si activas los dos, eliges cuál es el predeterminado, y al iniciar sesión puedes usar "Probar otro método" para cambiar al otro. Además recibes 8 códigos de recuperación de un solo uso (formato XXXXX-XXXXX) para cuando no tengas a la mano tu método principal.

sequenceDiagram
    participant U as Tú
    participant D as DiagramaHub
    U->>D: Email y contraseña
    D->>U: Pide segundo factor
    U->>D: Código TOTP, email o de recuperación
    D->>U: Sesión de 5 días

Todo se gestiona desde la sección Seguridad de tu perfil: activar o desactivar métodos, cambiar el predeterminado y regenerar códigos. Si aún no tienes MFA, verás un banner discreto después de iniciar sesión recomendándote activarlo.

También cambiamos la duración de las sesiones: 2 días sin MFA y 5 días con MFA. Proteger tu cuenta te da, además, menos inicios de sesión.

Contraseñas más fuertes

La política de contraseñas pasó de 8 a 12 caracteres mínimos, con al menos una mayúscula, una minúscula, un dígito y un carácter especial, y no puede ser igual a tu email. En los formularios de registro, cambio y restablecimiento de contraseña verás un indicador de fortaleza en tiempo real.

En la 0.2.1 añadimos algo importante: al cambiar tu contraseña se invalidan todas las sesiones abiertas antes del cambio. Si sospechas que alguien entró a tu cuenta, cambiarla basta para sacarlo.

Bitácora de seguridad

La 0.2.1 incorpora un audit log de eventos de seguridad: logins exitosos y fallidos, bloqueos de cuenta, verificaciones MFA, cambios y restablecimientos de contraseña, uso de códigos de recuperación y resets de MFA hechos por un administrador. Los registros se conservan 90 días y se eliminan automáticamente después.

Para quien administra la instancia

Si hospedas DiagramaHub tú mismo, hay un nuevo panel de administración de usuarios: lista paginada con búsqueda, estado de MFA, plan de suscripción, fecha de registro y, desde la 0.2.1, número de diagramas por usuario. Puedes exportar esa lista a Excel (.xlsx) y desactivar el MFA de un usuario que se quedó fuera de su cuenta.

Hardening de la plataforma

Del lado del servidor también cerramos puertas:

• Rate limiting en el login: máximo 10 intentos por IP por minuto.
• Bloqueo temporal de 15 minutos tras 5 intentos fallidos consecutivos.
• Cabeceras de seguridad HTTP (incluida HSTS en producción).
• En producción, la documentación Swagger/OpenAPI queda deshabilitada y los errores 500 ya no exponen stack traces.

La 0.2.1 también corrige detalles del flujo MFA: el banner ya no aparece después de activarlo, "Probar otro método" muestra una pantalla de selección en lugar de enviar un email automáticamente, y los códigos de recuperación sin usar ya no se regeneran al activar un segundo método.

Activa tu MFA

Entra a DiagramaHub Cloud, ve a tu perfil → Seguridad y activa al menos un método. Si usas la versión self-host, actualiza desde el repositorio; el detalle de cada cambio está en el changelog.

Por qué diagramas como texto

Escribir un diagrama en Mermaid o PlantUML tiene ventajas que una imagen no te da: lo versionas como cualquier otro archivo, lo revisas en un diff, lo editas en segundos y una IA lo puede leer y escribir. Lo que faltaba era un lugar cómodo para tenerlos todos juntos, organizados y listos para compartir. Eso es DiagramaHub.

flowchart LR
    A[Escribes el código] --> B[Vista previa en tiempo real]
    B --> C[Organizas en proyectos y carpetas]
    C --> D[Compartes o exportas]

El editor

• Editor Monaco con resaltado de sintaxis, autocompletado y validación integrada.
• Renderizado en tiempo real de Mermaid y PlantUML.
• Configuración visual por diagrama: temas, layout engines, estilos y curvas en Mermaid; temas y skinparam en PlantUML.
• Fondo configurable (color y patrón: plano, puntos o cuadrícula) y el zoom y la posición se guardan por diagrama.
• Modo presentación a pantalla completa con anotaciones.
• Exportación a PNG, PDF y Markdown.

Organización

Tus diagramas viven en proyectos, y dentro de cada proyecto puedes crear carpetas. La navegación es jerárquica: proyectos → carpetas → diagramas. Simple, pero suficiente para separar, por ejemplo, el backend del frontend o un cliente de otro.

IA con tus propias llaves (BYOL)

No queremos ser intermediarios de tu modelo de lenguaje. Con el modelo BYOL (Bring Your Own LLM) configuras tus propias API keys de Google Gemini, OpenAI GPT, Anthropic Claude o DeepSeek, y eliges proveedor y modelo por diagrama. Con eso puedes:

• Generar un diagrama a partir de una descripción en lenguaje natural.
• Mejorar uno existente con sugerencias y vista previa del diff.
• Corregir errores de sintaxis con una explicación y el diff del cambio.
• Generar descripciones automáticas de tus diagramas.
• Refinar paso a paso en sesiones de chat, con un historial de prompts buscable y reutilizable.

Tus llaves se guardan cifradas en la base de datos y las respuestas de la API las devuelven enmascaradas. Antes de guardarlas puedes probarlas para validar que funcionan.

Compartir

Cada diagrama puede tener enlaces compartidos con token único, de dos tipos: públicos o protegidos con un código de acceso de 4 a 20 caracteres. Eliges si expiran a los 5, 10 o 30 días o si son ilimitados, y si quien los visita puede copiar el código fuente. Los accesos tienen rate limiting y se registran con IPs hasheadas.

Cuentas, planes e idiomas

• Registro, login, recuperación de contraseña con tokens de un solo uso y eliminación de cuenta con frase de confirmación.
• Un sistema de planes con límites de proyectos y diagramas, con un plan gratuito incluido y pagos mediante Stripe.
• Interfaz en español (por defecto) e inglés, y un perfil donde ajustas zona horaria, idioma y avatar.

Hospédalo tú mismo

DiagramaHub es open source bajo licencia Apache 2.0. Puedes desplegarlo con Docker Compose, ya sea con MongoDB incluido o apuntando a uno externo, y hay un instalador de una línea (install.sh). Incluye además un asistente de instalación inicial y un onboarding para nuevos usuarios. La documentación está en español e inglés.

Estado: beta

Esta es una versión 0.x: el producto está en beta y en desarrollo activo, así que algunas cosas pueden cambiar entre versiones. Justo por eso nos interesa tanto lo que nos cuentes.

Pruébalo en DiagramaHub Cloud o despliégalo desde el repositorio en GitHub. Si algo no funciona como esperas, abre un issue: es la mejor forma de ayudarnos a darle forma.