Beauty Diagram

Cos'è Beauty Diagram?

Beauty Diagram è un editor online che prende codice sorgente Mermaid e PlantUML (e può importare determinati workflow draw.io) per rendere diagrammi con layout e stile più puliti e pronti per presentazioni. Il suo scopo principale è “abbellire” ciò che questi linguaggi di diagrammi producono già—ri-spaziando, ri-disponendo e output pronti per l'esportazione—senza richiedere agli utenti di ridisegnare manualmente i diagrammi.

Supporta anteprima live, abbellimento con un clic e esportazioni in SVG o PNG per documentazione, presentazioni e revisioni. La pagina descrive anche tipografia e temi focalizzati sulle presentazioni, più un'anteprima “SVG animata” per indizi di movimento in stile sequenza.

Caratteristiche Principali

• Editor Mermaid con anteprima live e abbellimento con un clic: Incolla sorgente Mermaid, visualizza il risultato immediatamente e applica modifiche di formattazione senza riscrivere il codice.
• Editor PlantUML con workflow di abbellimento: Passa a PlantUML, incolla la sorgente dell'attività e applica un formattatore che riallinea spaziatura ed elementi del diagramma.
• Import draw.io (Pro): Importa un .drawio o un esportazione XML (il sito nota che è disponibile su Pro). L'editor analizza il workflow in sorgente Mermaid per l'abbellimento.
• Ri-disposizione con routing ortogonale per flowchart/diagrammi di attività: Ri-spazia e instrada i diagrammi su griglia usando connessioni ortogonali (per evitare frecce diagonali che tagliano i nodi).
• Cambio tema per stile coerente: Passa tra temi (elencati: modern, atlas, obsidian, atelier) senza modificare la sorgente del diagramma.
• Tipografia e stile di livello presentazione: La pagina evidenzia Geist a 14px / 500, legature OpenType, etichette allineate alla baseline e preferenza per ombre morbide invece di tratti duri da 1px.
• Anteprime SVG animate (stessa sorgente, overlay di movimento diversi): Sovrappone movimento sottile (esempi elencati: charge, laser, pulse) all'output Mermaid per chiarire sequenza/direzione.
• Esportazioni per docs e presentazioni: Esporta SVG e PNG. La pagina specifica anche esportazione PNG 4× su Pro e nota che SVG è adatta per visualizzazione su schermo mentre PNG può essere usata quando le destinazioni non supportano SVG.
• Regolazioni nodi/linee canvas tramite toolbar (sorgente intatta): Il sito descrive il clic su nodi/linee per aprire una toolbar flottante per regolare sfondo, bordo, colore/larghezza linea e colore testo; le personalizzazioni possono essere salvate con il diagramma e condivise via link.

Come Usare Beauty Diagram

1. Apri l'editor online e scegli il tipo di diagramma (Mermaid o PlantUML; import draw.io è menzionato come Pro).
2. Incolla la tua sorgente Mermaid o PlantUML esistente nell'editor.
3. Usa Beautify per applicare il formattatore: ri-disponde il diagramma e applica il tema/regole di stile selezionate.
4. Rivedi l'anteprima live, regola opzionalmente i colori usando la toolbar nodi/linee e cambia temi se necessario.
5. Esporta come SVG o PNG per il workflow target (docs/presentazioni/revisioni come descritto sulla pagina).

Casi d'Uso

• Trasforma un flowchart Mermaid in una grafica pronta per slide: Incolla codice Mermaid, abbellisci per ottenere routing griglia ortogonale e palette/tipografia da presentazione, poi esporta SVG per incorporamento o visualizzazione ad alto zoom.
• Correggi diagrammi di attività PlantUML affollati: Passa alla tab PlantUML, incolla un diagramma di attività, abbellisci per normalizzare spaziatura e dettagli swimlane/layout.
• Mantieni una sorgente diagramma unica su contesti presentazione diversi: Usa cambio temi (modern/atlas/obsidian/atelier) per rendere lo stesso contenuto Mermaid per una presentazione, pagina documentazione o README dark-mode.
• Migliora leggibilità diagramma riducendo clutter visivo: Applica palette con un accento dove diamanti decisionali/rami spiccano su contenuto grayscale.
• Porta workflow draw.io in pipeline di formattazione Mermaid-based (Pro): Importa file .drawio o esportazione XML, parsalo in sorgente Mermaid e continua editing/abbellimento nel workflow Mermaid.

FAQ

Come abbellisco un flowchart Mermaid? Incolla il tuo codice Mermaid nell'editor, clicca Beautify e usa l'anteprima live per confermare le modifiche di layout e stile. La pagina nota che il codice originale rimane invariato; cambia solo il rendering.

Posso migliorare un diagramma di attività PlantUML allo stesso modo? Sì. La pagina descrive lo switch sulla scheda PlantUML, l'incollo del codice di attività e il clic su Beautify per riallineare le swimlane e normalizzare la spaziatura predefinita compressa.

Cosa significa SVG vs PNG per le esportazioni? Il sito afferma che SVG è migliore per la visualizzazione su schermo (doc/siti web/embed Figma) perché rimane nitido a qualsiasi zoom, mentre PNG è utile per deck da esportare in PDF/stampare o quando lo strumento di destinazione non supporta SVG. Menziona anche esportazione PNG 4× su Pro.

Beauty Diagram può importare un file draw.io? Sì, ma è indicato come Pro: puoi trascinare un .drawio o un export XML nell'editor. Il sito dice che lo analizza convertendolo in codice Mermaid per la successiva abbellitura.

È solo un clone di Mermaid Live editor? La pagina contrappone esplicitamente questo a Mermaid Live affermando che Beauty Diagram post-elabora l'output Mermaid—aggiungendo re-layout, spaziatura, tipografia e cambiamenti di palette—anziché solo renderizzare ciò che Mermaid produce di default.

Alternative

• Mermaid Live editor (o altri renderer Mermaid): Utile per il rendering live della sintassi Mermaid, ma la fonte suggerisce che Beauty Diagram si concentra sul post-processing del renderer predefinito per layout e stile di livello presentazione.
• Strumenti di authoring diagrammi/whiteboard (es. strumenti di design flowchart): Possono creare grafici per slide, ma potrebbero richiedere ridisegno manuale anziché abbellire codice Mermaid/PlantUML esistente.
• Strumenti di diagrammazione generici con supporto export: Possono produrre output SVG/PNG, ma sono tipicamente orientati al workflow di disegno anziché al formatting/re-layout di codice Mermaid/PlantUML.
• Workflow di export nativi draw.io: Se i tuoi diagrammi sono già in draw.io, potresti affidarti agli export integrati; il valore di Beauty Diagram è descritto specificamente nella conversione/import in workflow Mermaid e applicazione di regole di abbellitura dopo.