Editor di diagrammi Mermaid
Scrivi Mermaid da una parte e il diagramma si disegna dall’altra mentre procedi. Un errore viene segnato sulla sua riga, mentre l’ultima versione riuscita resta sullo schermo. Tutto avviene in questa scheda del browser.
Come funziona
Mermaid è un modo di scrivere un diagramma come testo. Poche righe come «A --> B» diventano un diagramma di flusso, un diagramma di sequenza, un diagramma delle classi o di un database, un diagramma di Gantt o una mappa mentale. GitHub, GitLab, Notion e la maggior parte degli strumenti di documentazione lo disegnano sul posto, ed è per questo che i diagrammi nei README e nella documentazione sono così spesso in Mermaid. Quello che non ti danno è un buon posto dove scriverne uno.
Questo editor disegna il diagramma mentre scrivi. Quando una riga è sbagliata viene sottolineata e il messaggio dice che cosa si aspettava Mermaid, mentre l’ultima versione che funzionava resta sullo schermo, attenuata, così l’immagine non sparisce ogni volta che sei a metà di una freccia. I diagrammi grandi si possono trascinare e ingrandire.
Quando va bene, salvalo come SVG, oppure come PNG dimensionato per dove deve andare: un documento, una diapositiva o una pagina stampata. Puoi anche copiarlo direttamente negli appunti. La bozza viene conservata in questo browser tra una visita e l’altra, e un link di condivisione porta il diagramma dentro il link stesso, quindi nulla viene mai salvato su un server.
Come si usa
- 1 Scrivi o incolla Mermaid, apri un file .mmd o Markdown, oppure parti da un esempio.
- 2 Guarda l’anteprima. Se una riga è sottolineata, correggila; il messaggio dice che cosa si aspettava Mermaid.
- 3 Scegli un aspetto, poi trascina o ingrandisci l’anteprima per controllare i dettagli.
- 4 Scarica SVG o PNG, copia l’immagine oppure copia un link per condividere il diagramma.
Buono a sapersi
- Aprire un file Markdown apre il suo primo blocco ```mermaid, così il diagramma di un README si può modificare da solo.
- Scegliere un esempio sostituisce il contenuto dell’editor, e Ctrl+Z riporta il tuo diagramma.
- L’SVG resta nitido a qualsiasi dimensione ed è quello da usare sul web. Il PNG è quello che diapositive, app di chat e programmi di videoscrittura accettano in modo più affidabile.
- Un tema impostato dentro il diagramma con una riga %%{init}%% ha la precedenza sull’impostazione Aspetto.
- Non viene caricato nulla. Il diagramma viene disegnato in questa scheda, e i link di condivisione lo tengono nella parte dell’indirizzo che un browser non invia mai a un server.
Browser supportati
- Chrome 94 e successive
- Firefox 93 e successive · a piena velocità da 113
- Safari 16.4 e successive
- Edge 94 e successive
Queste sono le versioni più vecchie che hanno tutto ciò che lo strumento usa. Si ricavano dallo strumento stesso, quindi cambiano insieme a lui.
Numeri di versione verificati il 2026-09-04.
Domande frequenti
Il mio diagramma viene caricato da qualche parte?
No. Mermaid gira dentro questa scheda del browser, e la bozza viene salvata solo in questo browser. Puoi verificarlo negli strumenti per sviluppatori del browser, nella scheda Rete: scrivere non invia nulla.
Come funzionano i link di condivisione senza un server?
Il diagramma viene compresso e scritto nella parte del link dopo il #. I browser non inviano mai quella parte al sito, quindi il link apre il diagramma sul dispositivo di chiunque senza che il sito lo riceva. Un diagramma lungo fa un link lungo.
Quali tipi di diagramma supporta?
Tutto ciò che disegna Mermaid 12: diagrammi di flusso, di sequenza, delle classi, degli stati ed entità-relazione, diagrammi di Gantt, grafici a torta, mappe mentali, linee del tempo, percorsi utente, grafi Git, grafici a quadranti, grafici Sankey e XY, e i più recenti diagrammi a blocchi, di pacchetti, di architettura, kanban, radar e treemap.
Perché una riga è sottolineata?
È il punto in cui Mermaid ha smesso di capire il diagramma. Il messaggio accanto è quello di Mermaid stesso e dice che cosa si aspettava di trovare. Spesso il vero errore è subito prima, per esempio una parentesi o delle virgolette mai chiuse.
Di che dimensioni sarà il PNG?
Dipende dall’uso. Per un documento, il doppio delle dimensioni a cui il diagramma è disegnato, che resta nitido sugli schermi ad alta densità. Per le diapositive, il più grande che entra in uno schermo 4K. Per la stampa, il più grande che entra in un A4 a 300 dpi. Il pulsante mostra le dimensioni esatte in pixel prima di scaricare.
Posso modificare un diagramma del mio README?
Sì. Apri il file Markdown e il primo blocco Mermaid al suo interno si apre nell’editor. Quando hai finito, ricopia il testo nel file.
È sicuro aprire un diagramma che mi ha mandato qualcun altro?
I diagrammi vengono disegnati nella modalità rigorosa di Mermaid. Tutto ciò che potrebbe eseguire codice viene rimosso, e una riga dentro il diagramma non può disattivare quella modalità.
Strumenti correlati
I tuoi file vengono elaborati sul tuo dispositivo e non vengono caricati: puoi verificarlo negli strumenti per sviluppatori del browser, nella scheda Rete.