Flowchart
Rappresenta decisioni e processi con nodi, frecce e forme Mermaid: box arrotondati, rombi…
Mermaid Viewer online
Incolla il codice Mermaid a sinistra e guarda il diagramma comparire all'istante a destra. Analizza e correggi la sintassi Mermaid con un clic, ottimizza il codice ed esporta il risultato in PNG, SVG o PDF — gratis, privato, senza registrazione.
- 100 % gratuito
- Senza registrazione
- Tutto nel tuo browser
- Oltre 12 tipi di diagrammi
Editor Mermaid in diretta e visualizzatore di grafici
Questo viewer Mermaid aggiorna l'anteprima ogni volta che smetti di digitare: disegnare un diagramma Mermaid semplice diventa facile come scrivere un testo. Se qualcosa si rompe, il correttore Mermaid integrato individua il problema e ripara gli errori di sintassi più comuni — punteggiatura a larghezza intera, caratteri invisibili, virgolette tipografiche — spiegando ogni modifica.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Tipi di diagrammi Mermaid che puoi renderizzare
Dai flowchart alle timeline, ogni tipo di diagramma Mermaid funziona subito — il modo più semplice di disegnare diagrammi Mermaid senza installare nulla. Ogni anteprima qui sotto è generata in diretta dallo stesso motore del viewer; carica un modello per continuare a modificarlo.
Diagramma di sequenza
Mostra lo scambio di messaggi tra partecipanti nel tempo, con cicli, alternative e attivazioni.
Diagramma ER
Modella entità, attributi e relazioni di un database in notazione a zampa di gallina.
Diagramma delle classi
Descrive classi, interfacce, membri ed ereditarietà per la progettazione software.
Diagramma di stati
Traccia gli stati di un sistema e le transizioni tra loro.
Diagramma di Gantt
Pianifica progetti con attività, milestone, dipendenze e date.
Grafico a torta
Trasforma pochi numeri in un grafico a torta delle proporzioni.
User journey
Mappa il percorso di un utente tra attività e punteggi di soddisfazione.
Timeline
Registra eventi su una timeline verticale — perfetta per storie e roadmap.
Mappa mentale
Brainstorming in una mappa ramificata: testo in ingresso, gerarchia in uscita.
Grafo Git
Visualizza branch, commit e merge di un repository Git.
Matrice a quadranti
Posiziona elementi su due assi in quattro quadranti, es. priorità vs. sforzo.
Le basi della sintassi Mermaid
La sintassi Mermaid è testo semplice: un'istruzione per riga, nodi uniti da frecce. Queste forme Mermaid coprono la maggior parte dei diagrammi — clicca un esempio per aprirlo nel viewer e continuare a modificarlo.
| Sintassi | Disegna |
|---|---|
A[Etichetta] | Rettangolo (processo) |
A(Etichetta) | Box arrotondato |
A{Etichetta} | Rombo (decisione) |
A([Etichetta]) | Forma stadio |
A[(Etichetta)] | Cilindro (database) |
A((Etichetta)) | Cerchio |
A-->B | Freccia (collegamento) |
A-->|testo|B | Freccia con etichetta |
A---B | Linea semplice |
subgraph Titolo … end | Gruppo di nodi |
Mini-modelli
Convertire un diagramma Mermaid in immagine online
Ti chiedi come convertire un diagramma Mermaid in immagine online? Tre passaggi: incolla il codice, lascia renderizzare l'anteprima, poi clicca PNG, SVG o PDF nella barra degli strumenti. Tutto avviene nel browser — nessun upload di file.
Da Mermaid a PNG
Esporta fino a 4× di risoluzione — diagrammi nitidi per slide, documenti e chat.
Da Mermaid a SVG
Un vero file vettoriale: zoom infinito, modificabile in Figma o Illustrator, perfetto per la stampa e gli schermi ad alta densità.
Da Mermaid a PDF
Un clic genera una pagina PDF delle dimensioni esatte del diagramma — ideale per report, ticket e archivi.
Domande frequenti
Cos'è un viewer Mermaid?
Un viewer Mermaid prende codice di diagramma scritto in sintassi Mermaid e lo renderizza come diagramma vero. Questo unisce viewer, generatore e correttore in un'unica pagina: rendering in diretta mentre digiti, individuazione dei problemi di sintassi, riparazione automatica ed esportazione in PNG, SVG o PDF.
Come correggo una sintassi Mermaid non valida?
Incolla il codice e clicca Correggi. Il correttore Mermaid ripara virgolette tipografiche e caratteri Unicode invisibili, punteggiatura a larghezza intera (CJK), parentesi non bilanciate, parole riservate come «end», «end» mancanti in subgraph e cicli, recinzioni Markdown incollate per errore e altro. Ogni modifica è spiegata nella lista diagnostica.
Come converto Mermaid in PNG, SVG o PDF?
Renderizza il diagramma nel viewer qui sopra, poi clicca PNG, SVG o PDF nella barra dell'anteprima. PNG scarica una bitmap ad alta risoluzione, SVG un file vettoriale, PDF un documento pronto per la stampa. Gratuito, illimitato e interamente nel browser.
PlantUML o Mermaid — quale scegliere?
Mermaid si renderizza direttamente nel browser, motivo per cui GitHub, GitLab e la maggior parte dei wiki Markdown lo supportano nativamente; è la scelta leggera per la documentazione. PlantUML copre più della specifica UML 2 ma richiede Java o un server per il rendering. Per diagrammi «text-first» in documenti e pagine web, Mermaid è di solito la strada più semplice.
Cosa rappresenta «Mermaid» — da dove viene il nome?
Lo strumento prende il nome dalla sirena della mitologia: l'idea che un semplice testo possa, come il canto di una sirena, far nascere un diagramma splendido. Nei diagrammi, Mermaid rappresenta il «diagram-as-code»: descrivi nodi e frecce in formato testo e la libreria disegna il grafico per te.
Quali sono i diversi tipi di diagrammi Mermaid?
I più usati: flowchart, diagrammi di sequenza, ER, delle classi, degli stati, di Gantt, a torta, user journey, timeline e mappe mentali — la galleria completa è più sopra. Ogni tipo inizia con una riga chiave come «flowchart TD» o «sequenceDiagram», seguita da un'istruzione per riga.
Il mio codice viene caricato da qualche parte?
No. Rendering, correzione, ottimizzazione ed esportazione girano localmente nel tuo browser. Nulla viene inviato o salvato su un server — puoi usare il viewer anche offline una volta caricata la pagina.