Esportare un diagramma mermaid in PNG, SVG o Markdown
Un diagramma è utile solo dove può essere visto. Mermaid offre quattro vie d'uscita — un'immagine, un vettoriale, il sorgente, o un blocco Markdown che si renderizza da solo — e quella giusta dipende interamente da dove sta andando il diagramma. Questa è la versione breve, più cosa si rompe con ciascuna.
Scegli prima il formato
| Destinazione | Uso | Perché |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Un blocco Markdown | Si renderizza nativamente e resta confrontabile (diff) — nessun file da tenere sincronizzato. |
| Presentazioni, una specifica, un messaggio in chat | PNG | Si incolla ovunque, non richiede un renderer, appare uguale ovunque. |
| Un sito web, un documento stampato | SVG | Vettoriale — nitido a qualsiasi dimensione, e il testo resta selezionabile. |
| Un altro editor, un repository | sorgente .mmd | Modificabile in seguito. Un'immagine è un vicolo cieco. |
Se la destinazione renderizza mermaid, non esportare affatto. Un diagramma salvato come testo può essere rivisto riga per riga; lo stesso diagramma salvato come PNG può solo essere sostituito.
Esportare da questo editor
Apri la scheda codice — i pulsanti di esportazione si trovano nella barra degli strumenti, e ciascuno agisce su ciò che è attualmente renderizzato.
- Copia SVG — mette il markup
<svg>negli appunti, pronto da incollare direttamente in un file HTML o in uno strumento di design. - Scarica SVG — salva
diagram.svg. - Scarica PNG — salva
diagram.png, renderizzato a 2x con sfondo bianco, così resta nitido su uno schermo ad alta densità e non finisce mai come una macchia trasparente su una slide bianca. - Scarica .mmd — salva il codice sorgente mermaid come file di testo semplice.
- Scarica .md (Notion) — salva il sorgente racchiuso in un blocco con recinto ```mermaid, che Notion, GitHub e Obsidian renderizzano all'incolla.
Per una presentazione, prendi il PNG. Per qualsiasi cosa che verrà ridimensionata — un titolo di documento, un poster, una stampa — prendi l'SVG; un PNG ingrandito oltre la sua dimensione di esportazione perde subito nitidezza.
Mantienilo come testo, invece
Il blocco con recinto è l'unica esportazione che resta modificabile sul posto. Tre backtick, la parola mermaid, il tuo diagramma, tre backtick:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — si renderizza nei file README, nelle issue, nelle pull request e nei commenti.
- GitLab — si renderizza nella wiki, nelle issue e nelle merge request.
- Notion — incolla in un blocco di codice e imposta il linguaggio su Mermaid.
- Obsidian — si renderizza in anteprima e nelle note pubblicate.
- Docusaurus / MkDocs Material / VitePress — i blocchi mermaid si renderizzano nella documentazione compilata.
Cosa può andare storto
Il PNG è sfocato
Un PNG ha risoluzione fissa: viene esportato a una dimensione in pixel prestabilita e ridimensionarlo oltre quella soglia comporta interpolazione. Questo editor esporta a 2x proprio per questo motivo. Se non basta ancora, esporta l'SVG e convertilo alla dimensione che ti serve — oppure usa direttamente l'SVG.
L'SVG non ha sfondo
Le esportazioni SVG sono trasparenti per progettazione, quindi il testo scuro dei nodi scompare su una slide scura. Metti l'SVG su una scheda chiara, oppure prendi il PNG, che viene esportato su sfondo bianco.
I caratteri appaiono diversi altrove
Un SVG fa riferimento alle famiglie di font invece di incorporarle, quindi una macchina senza quel font ne sostituisce un altro e i riquadri delle etichette non si allineano più. Usa il PNG quando non puoi controllare i font di chi visualizza il file.
Il diagramma è tagliato
L'esportazione cattura ciò che è attualmente renderizzato, quindi ricentra la vista prima di esportare un diagramma grande. Se l'etichetta di un nodo è enorme, interrompila con <br> — mermaid non va a capo automaticamente nelle etichette.
Esporta in due clic
Apri l'editor, incolla o disegna il tuo diagramma, e prendi l'SVG, il PNG o il sorgente. Nulla è dietro un account.
Domande frequenti
Come converto mermaid in PNG?
Renderizza il diagramma, poi usa Scarica PNG. L'editor disegna l'SVG renderizzato su un canvas a scala 2x con sfondo bianco e salva il risultato — nessun passaggio dal server, quindi il diagramma non lascia mai il tuo browser.
Posso esportare un PNG trasparente?
Non dal pulsante PNG — riempie di bianco di proposito, perché il testo scuro del diagramma su sfondo trasparente è illeggibile nella maggior parte dei posti in cui un PNG viene incollato. Esporta invece l'SVG; quello è trasparente.
C'è un limite di dimensione?
Nessuno fisso. L'esportazione avviene nel tuo browser, quindi il limite pratico è ciò che il tuo browser riesce a renderizzare — ben oltre il punto in cui un diagramma resta ancora leggibile per un essere umano.
Come mantengo il diagramma modificabile dopo l'esportazione?
Conserva il sorgente. Scarica il file .mmd o il blocco Markdown insieme all'immagine; un PNG o un SVG non possono essere ritrasformati in mermaid, ma il sorgente si incolla direttamente di nuovo nell'editor.