Incolla Mermaid. Guarda il diagramma. All'istante.

Incolla Mermaid, anteprima immediata, esporta SVG/PNG, carica file, trascina per spostare e condividi via URL.

Modelli rapidi
Apri un file MermaidTrascinalo ovunque — .mmd · .mermaid · .md · .txt · Come aprire un file .mmd
Caricamento di Mermaid...Ln 1, Col 1
Suggerimento: nell'anteprima, fai clic e trascina (o tocca e trascina) per spostare. Rilascia i file nell'anteprima per caricarli.

Che cos'è Mermaid?

Mermaid è uno strumento di diagrammazione e charting basato su JavaScript che usa definizioni testuali ispirate a Markdown per creare e modificare diagrammi dinamicamente. È un progetto open source che consente di generare diagrammi da semplici descrizioni testuali.

Invece di usare strumenti di disegno complessi, scrivi una sintassi simile al codice che descrive il tuo diagramma e Mermaid lo rende come diagramma visivo. Questo approccio rende i diagrammi versionabili, facili da aggiornare e perfetti per la documentazione.

Mermaid si integra perfettamente con piattaforme di documentazione, wiki e file Markdown, rendendolo uno strumento preferito da sviluppatori e technical writer.

Perché usare Mermaid?

  • Controllo versione: i diagrammi sono file di testo, quindi possono essere tracciati in Git insieme al tuo codice
  • Aggiornamenti rapidi: cambia poche righe di testo invece di ridisegnare interi diagrammi
  • Coerenza: Mermaid gestisce automaticamente layout e stile, garantendo diagrammi coerenti
  • Nessun tool di design: non serve Visio, Lucidchart o altri strumenti costosi
  • Documentazione come codice: mantieni i diagrammi nello stesso repository della documentazione
  • Multipiattaforma: funziona nei browser e in Node.js e si integra con molte piattaforme
  • Gratuito e open source: nessun costo di licenza, community attiva
  • Molteplici tipi di diagrammi: supporta flowchart, diagrammi di sequenza, diagrammi di classi e altro

Diagramma di Flusso

Crea diagrammi di flusso professionali usando una sintassi semplice basata su testo. Anteprima istantanea, esportazione in SVG/PNG e condivisione tramite URL - tutto gratuitamente.

Diagramma di Sequenza

Progetta diagrammi di sequenza UML per visualizzare le interazioni tra componenti di sistema. Perfetto per documentazione API e progettazione di sistemi.

Diagramma di Gantt

Pianifica e visualizza cronologie di progetto con diagrammi di Gantt. Traccia attività, dipendenze e traguardi usando sintassi testuale semplice.

Diagramma delle Classi

Progetta sistemi orientati agli oggetti con diagrammi delle classi UML. Definisci classi, attributi, metodi e relazioni usando testo semplice.

Diagramma di Stato

Visualizza macchine a stati e comportamento del sistema con diagrammi di stato. Modella stati, transizioni ed eventi usando testo semplice.

Diagramma ER

Progetta schemi di database con diagrammi entità-relazione. Definisci entità, attributi e relazioni usando sintassi testuale semplice.

Pubblicità

Guida completa ai diagrammi Mermaid

Impara a creare diagrammi professionali con una sintassi semplice basata sul testo

Domande frequenti

Domande comuni sull'uso di Mermaid Viewer e sulla creazione di diagrammi

Questo editor Mermaid è davvero gratuito?
Sì, completamente gratuito. Puoi creare diagrammi illimitati, esportare in SVG/PNG, condividere via URL e usare tutte le funzioni senza registrazione o pagamento. Lo strumento è supportato da pubblicità non invasiva.
Devo installare qualcosa?
No, non devi installare nulla. È uno strumento web che funziona interamente nel browser. Apri il sito e inizia subito su desktop, tablet o mobile.
Come salvo i miei diagrammi?
Puoi salvare in vari modi: 1) esporta come SVG o PNG, 2) condividi via URL (il codice è codificato nell’URL), 3) copia il codice Mermaid nei tuoi file, 4) carica/scarica file .mmd o .mermaid.
Posso usare i diagrammi nella documentazione?
Assolutamente sì. Esporta i diagrammi come SVG (scalabile) o PNG e usali in documentazione, presentazioni o siti web. Puoi anche incorporare direttamente il codice Mermaid su piattaforme come GitHub, GitLab o Notion.
Qual è la differenza tra SVG e PNG?
SVG è vettoriale, mantiene la qualità a qualsiasi dimensione ed è ideale per documentazione e web. PNG è raster, utile per condivisione rapida ma perde qualità quando viene ridimensionato.
Perché il mio diagramma non viene renderizzato?
Controlla eventuali errori di sintassi nel codice Mermaid. Problemi comuni: virgolette non chiuse, due punti/punto e virgola mancanti, ID nodo errati o sintassi non supportata. Semplifica il diagramma per individuare l’errore.
Posso collaborare con altre persone?
La collaborazione in tempo reale non è integrata, ma puoi condividere facilmente tramite URL. Gli altri possono aprire, modificare e condividere di nuovo la loro versione. Essendo testuale, Mermaid si integra bene anche con Git.
Funziona anche offline?
Il primo caricamento richiede Internet. Dopo, le funzioni di modifica di base spesso funzionano anche offline. Alcune funzioni, come l’esportazione, possono però richiedere connessione.
Come imparo la sintassi Mermaid?
Inizia dalla nostra guida completa a Mermaid con esempi per tutti i tipi di diagrammi. Usa i template per partire velocemente e integra con la documentazione ufficiale su mermaid.js.org.
Posso personalizzare l’aspetto?
Sì. I diagrammi seguono il tema del sito: passa da chiaro a scuro con il pulsante Tema nella barra superiore e il diagramma viene renderizzato di nuovo con il tema Mermaid corrispondente. Per personalizzazioni avanzate, usa la direttiva %%{init:...}%% per definire colori, font e altre proprietà visive.
Quali tipi di diagrammi sono supportati?
Questo editor supporta i principali tipi di diagrammi Mermaid: flowchart, sequence diagram, class diagram, state diagram, ER diagram, Gantt chart, pie chart, Git graph, user journey e altri.
I miei dati sono privati?
Il codice dei tuoi diagrammi non viene inviato ai nostri server. Il rendering avviene interamente nel browser. Quando condividi via URL, il codice è nell’URL; non archiviamo né tracciamo i tuoi contenuti.
Perché usare diagrammi testuali?
I diagrammi testuali offrono vari vantaggi: versionamento (perfetto per Git), aggiornamenti rapidi, stile coerente, facilità di ricerca, formato leggero e generazione automatizzabile. Sono anche più facili da revisionare nelle pull request.
Posso incorporare Mermaid nel mio sito?
Sì. Puoi includere la libreria JavaScript Mermaid nel tuo sito e aggiungere blocchi di codice Mermaid. Molte piattaforme lo supportano già nativamente, tra cui GitHub, GitLab, Notion e Obsidian.
Qual è la dimensione massima consigliata?
Non esiste un limite rigido, ma diagrammi molto grandi (oltre ~100 nodi) possono risultare lenti a seconda del dispositivo. Per sistemi complessi, è meglio dividerli in più diagrammi piccoli e focalizzati.