Blog

Pizarrón a mano alzada y conversión de diagramas con IA

La v0.6.0 de DiagramaHub trae un pizarrón a mano alzada inspirado en Miro y Excalidraw, y convierte tus diagramas entre Mermaid, PlantUML, D2 y DBML con IA.

No todas las ideas empiezan como código. A veces necesitas rayar unas cajas y flechas para pensar, y otras veces ya tienes el diagrama escrito pero en el lenguaje equivocado para donde lo vas a usar. La versión 0.6.0 resuelve las dos cosas: un pizarrón a mano alzada y la conversión de diagramas entre lenguajes con IA.

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.