Blog

Presentamos DiagramaHub: tus diagramas como código, con IA

Lanzamos la versión 0.1.0 de DiagramaHub: editor de Mermaid y PlantUML, proyectos y carpetas, IA con tus propias API keys, enlaces para compartir y self-host.

Los diagramas de arquitectura suelen vivir en imágenes sueltas que nadie actualiza: un PNG en la wiki, una captura en un ticket, un archivo que solo abre quien lo hizo. Cuando el sistema cambia, el diagrama se queda atrás. Hoy publicamos la versión 0.1.0 de DiagramaHub, nuestro primer release funcional, para atacar justo ese problema.

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.