Blog

Kroki autohospedado y diagramas D2 en DiagramaHub

La versión 0.4 renderiza PlantUML con Kroki en tu propia infraestructura, agrega D2 como nuevo lenguaje y renueva el editor, el dashboard y la vista móvil.

Hasta ahora, cada vez que dibujabas un diagrama en PlantUML, su código viajaba al servidor público de plantuml.com para convertirse en imagen. Funcionaba, pero tu arquitectura, tus flujos y tus nombres internos salían de tu instancia. Con la versión 0.4.0 eso cambió: el renderizado ahora pasa por Kroki, autohospedado junto al resto de DiagramaHub.

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.