Beauty Diagram

¿Qué es Beauty Diagram?

Beauty Diagram es un editor en línea que toma código fuente Mermaid y PlantUML (y puede importar ciertos flujos de trabajo de draw.io) para renderizar diagramas con un diseño y estilo más limpios, listos para presentaciones. Su propósito principal es «embellecer» lo que ya producen esos lenguajes de diagramas —reespaciado, nuevo diseño y salida lista para exportar— sin requerir que los usuarios redibujen manualmente sus diagramas.

Soporta vista previa en vivo, embellecimiento con un clic y exportaciones en SVG o PNG para documentación, presentaciones y revisiones. La página también describe tipografía y temas enfocados en presentaciones, además de una vista previa de «SVG animado» para indicios de movimiento en estilo secuencia.

Características clave

• Editor Mermaid con vista previa en vivo y embellecimiento con un clic: Pega el código fuente Mermaid, ve el resultado inmediatamente y aplica cambios de formato sin reescribir el código.
• Editor PlantUML con flujo de embellecimiento: Cambia a PlantUML, pega el código de actividad y aplica un formateador que realinea el espaciado y elementos del diagrama.
• Importación de draw.io (Pro): Importa un .drawio o una exportación XML (el sitio indica que está disponible en Pro). El editor analiza el flujo en código fuente Mermaid para embellecerlo.
• Nuevo diseño con enrutamiento ortogonal para diagramas de flujo/actividad: Reespacia y enruta diagramas en una cuadrícula usando conexiones ortogonales (para evitar flechas diagonales que corten nodos).
• Cambio de temas para estilos consistentes: Cambia entre temas (listados: modern, atlas, obsidian, atelier) sin editar el código fuente del diagrama.
• Tipografía y estilos de grado presentación: La página destaca Geist at 14px / 500, ligaduras OpenType, etiquetas alineadas en línea base y preferencia por sombras suaves en lugar de trazos duros de 1px.
• Vistas previas SVG animadas (misma fuente, superposiciones de movimiento diferentes): Añade movimiento sutil (ejemplos listados: charge, laser, pulse) sobre la salida Mermaid para aclarar secuencia/dirección.
• Exportaciones para docs y presentaciones: Exporta SVG y PNG. La página también indica exportación PNG 4× en Pro y nota que SVG es adecuado para visualización en pantalla mientras PNG se usa cuando los destinos no soportan SVG.
• Ajustes de nodos/líneas en lienzo vía barra de herramientas (fuente intacta): El sitio describe hacer clic en nodos/líneas para abrir una barra de herramientas flotante que ajusta fondo, borde, color/ancho de línea y color de texto; las personalizaciones se guardan con el diagrama y se comparten vía enlace.

Cómo usar Beauty Diagram

1. Abre el editor en línea y elige el tipo de diagrama (Mermaid o PlantUML; la importación de draw.io se menciona como Pro).
2. Pega tu código fuente Mermaid o PlantUML existente en el editor.
3. Usa Beautify para aplicar el formateador: rediseña el diagrama y aplica el tema/reglas de estilo seleccionados.
4. Revisa la vista previa en vivo, ajusta opcionalmente colores con la barra de nodos/líneas y cambia temas si es necesario.
5. Exporta como SVG o PNG para el flujo de trabajo objetivo (docs/presentaciones/revisiones como se describe en la página).

Casos de uso

• Convertir un diagrama de flujo Mermaid en una gráfica lista para diapositivas: Pega código Mermaid, embellece para obtener enrutamiento en cuadrícula ortogonal y paleta/tipografía de presentación, luego exporta SVG para incrustar o visualización de alto zoom.
• Arreglar diagramas de actividad PlantUML apretados: Cambia la pestaña del editor a PlantUML, pega un diagrama de actividad, embellece para normalizar espaciado y detalles de carriles/diseño.
• Mantener una fuente de diagrama única en contextos de presentación diferentes: Usa cambio de temas (modern/atlas/obsidian/atelier) para renderizar el mismo contenido Mermaid en una presentación, página de documentación o README en modo oscuro.
• Mejorar legibilidad del diagrama reduciendo desorden visual: Aplica una paleta de un acento donde rombos de decisión/ramas destaquen sobre contenido en escala de grises.
• Incorporar flujos de draw.io a un pipeline de formato basado en Mermaid (Pro): Importa un archivo .drawio o exportación XML, conviértelo en código fuente Mermaid y continúa editando/embelleciendo en el flujo Mermaid.

Preguntas frecuentes

¿Cómo embellezco un diagrama de flujo Mermaid?
Pega tu código fuente Mermaid en el editor, haz clic en Beautify y usa la vista previa en vivo para confirmar los cambios de diseño y estilo. La página indica que el código original permanece igual; lo que cambia es el renderizado.

¿Puedo mejorar un diagrama de actividad PlantUML de la misma manera?
Sí. La página describe cambiar a la pestaña de PlantUML, pegar el código de la actividad y hacer clic en Beautify para realinear carriles y normalizar el espaciado predeterminado apretado.

¿Qué significa SVG frente a PNG para las exportaciones?
El sitio indica que SVG es mejor para visualización en pantalla (documentos/sitios web/incrustaciones en Figma) porque se mantiene nítido en cualquier zoom, mientras que PNG es útil para presentaciones que se exportarán a PDF/impresas o cuando la herramienta de destino no soporta SVG. También menciona exportación PNG 4× en Pro.

¿Puede Beauty Diagram importar un archivo draw.io?
Sí, pero se indica como Pro: puedes arrastrar un archivo .drawio o una exportación XML al editor. El sitio dice que analiza el diagrama de flujo/secuencia en código fuente Mermaid para embellecimiento posterior.

¿Es esto solo un clon del editor Mermaid Live?
La página contrasta explícitamente esto con Mermaid Live al afirmar que Beauty Diagram postprocesa la salida de Mermaid —agregando rediseño, espaciado, tipografía y cambios de paleta— en lugar de solo renderizar lo que Mermaid produce por defecto.

Alternativas

• Mermaid Live editor (u otros renderizadores de Mermaid): Útil para renderizado en vivo de sintaxis Mermaid, pero la fuente sugiere que Beauty Diagram se enfoca en postprocesar el renderizador predeterminado para diseño y estilo de grado presentación.
• Herramientas de autoría de diagramas/pizarras (p. ej., herramientas de diseño de diagramas de flujo): Pueden crear gráficos para diapositivas, pero pueden requerir redibujo manual en lugar de embellecer código fuente Mermaid/PlantUML existente.
• Herramientas genéricas de diagramación con soporte de exportación: Pueden producir salidas SVG/PNG, pero suelen estar orientadas a flujos de trabajo de dibujo en lugar de formateo/rediseño de código Mermaid/PlantUML.
• Flujos de exportación nativos de draw.io: Si tus diagramas ya están en draw.io, puedes depender de exportaciones integradas; el valor de Beauty Diagram se describe específicamente en torno a convertir/importar a un flujo de trabajo Mermaid y aplicar reglas de embellecimiento después.