Editor Mermaid online: diagrammi in Markdown

Con Mermaid bastano poche righe di testo per ottenere un diagramma. Markdown Preview Editor funziona come editor Mermaid con anteprima dal vivo: scrivi il codice del diagramma in un documento Markdown e l’anteprima lo disegna mentre digiti. A differenza di un programma per diagrammi separato, il diagramma sta insieme al testo che lo accompagna, così un documento di progetto, un README o una lezione restano in un unico file.

Che cos’è un diagramma Mermaid?

Un diagramma Mermaid è un grafico descritto con testo semplice. Non trascini riquadri e frecce: scrivi righe come A --> B e Mermaid dispone il disegno al posto tuo. Supporta diagrammi di flusso, di sequenza, di Gantt, di stato e delle classi, grafici a torta, mappe mentali e altro ancora.

Essendo testo, un diagramma si modifica facilmente, sta sotto controllo di versione e compare nei diff. GitHub, GitLab, Obsidian e molti strumenti di documentazione visualizzano Mermaid, quindi lo stesso codice funziona ovunque.

Come disegnare un diagramma

1. Apri l’editor. Vai all’editor online.
2. Aggiungi un blocco Mermaid. Digita tre backtick seguiti da mermaid, oppure usa il pulsante Diagramma Mermaid nella riga Editor avanzato della barra degli strumenti per inserire un modello.
3. Scrivi il diagramma. L’anteprima a destra lo ridisegna mentre scrivi, così una freccia o una parentesi mancante si nota subito.
4. Salva o condividi. Salva il documento come .md, esportalo in HTML o stampalo in PDF: i diagrammi sono inclusi.

Ecco un primo diagramma di flusso:

markdown```mermaid
flowchart LR
  A[Idea] --> B{Ne vale la pena?}
  B -- sì --> C[Realizzala]
  B -- no --> D[Mettila da parte]
```

Tipi di diagramma disponibili

La sintassi completa di ogni tipo, con esempi pronti da copiare, è nella nostra guida ai diagrammi Mermaid in Markdown.

Perché usarlo

• Anteprima dal vivo. Il diagramma si aggiorna mentre scrivi e gli errori di sintassi si vedono subito.
• Testo e diagrammi insieme. Spiegazione, formule e diagramma di flusso stanno nello stesso file Markdown.
• Riservato. I diagrammi vengono disegnati nel browser e il tuo codice non viene inviato a un server.
• Gratuito e open source. Nessun account, nessun limite al numero di diagrammi.

Limitazioni

• Non è possibile scaricare un singolo diagramma come PNG o SVG. I diagrammi vengono esportati come parte del documento, nell’esportazione HTML e nel PDF. Per un’immagine separata puoi usare gli strumenti ufficiali di Mermaid.
• Temi personalizzati e stili per singolo nodo sono limitati: i diagrammi hanno un aspetto pulito predefinito che segue il tema chiaro o scuro.
• I diagrammi si scrivono come codice; non c’è un editor visuale con trascinamento.

Vuoi leggere un file Markdown esistente con diagrammi? Usa il Markdown viewer, oppure torna alla home dell’editor Markdown.