Hai difficoltà a visualizzare i processi in Notion o GitHub? La notazione Mermaid consente di generare diagrammi di flusso utilizzando una semplice sintassi basata su testo—perfetta per sviluppatori e redattori tecnici.
Questa guida copre tutto: dalla sintassi di base ai comandi rapidi potenziati dall'IA, oltre ad alternative più semplici se il coding non fa per te.
Cosa imparerai in questo blog:
Sintassi di base – Nodi, frecce e direzioni
Logica condizionale – Rami if/else (%%{if}%%)
Stile personalizzato – Colori delle forme, bordi arrotondati
AI + Mermaid – Crea diagrammi più velocemente con strumenti di intelligenza artificiale
Alternative No-Code – Strumenti drag-and-drop come EdrawMax
In questo articolo
Cos'è la notazione Mermaid
Mermaid è uno strumento da testo a diagramma che crea diagrammi di flusso, diagrammi di sequenza e altro utilizzando una sintassi simile a Markdown. Vantaggi principali:
Compatibile con il codice – Funziona in GitHub, Notion e VS Code
Amichevole per il controllo di versione – I diagrammi si aggiornano con il tuo codice
Nessun allineamento manuale – Genera automaticamente layout ordinati
Mermaid vs. PlantUML
| Funzionalità | Mermaid | PlantUML |
| Facilità d'uso | Sintassi più semplice | Curva di apprendimento più ripida |
| Supporto GitHub | Anteprima nativa | Richiede plugin |
| Tipi di diagrammi | 8+ (diagrammi di flusso, Gantt) | 10+ (tipi più di nicchia) |
Suggerimento: Per chi non è sviluppatore, prova strumenti drag-and-drop (come EdrawMax) per evitare del tutto la sintassi.
Creare diagrammi di flusso con la notazione Mermaid
Puoi utilizzare il Mermaid Live Editor, uno strumento basato sul web, per creare diagrammi con la notazione Mermaid. La sintassi è la stessa su tutte le piattaforme, quindi questa guida è valida anche se utilizzi Notion o VS Code.
Come creare diagrammi usando la notazione Mermaid
Visita il sito web di Mermaid Live Editor. Vedrai il codice di esempio e un grafico di anteprima visualizzato al caricamento del sito. Puoi anche esplorare altri esempi sotto Diagrammi di esempio nella barra laterale a sinistra.
Questo rende facile iniziare, anche se è la prima volta che lavori con Mermaid.
Creare un diagramma di flusso di base utilizzando la sintassi Mermaid
Ora, esamina la sintassi di base e osserva un esempio pratico.
Definire il tipo e la direzione del diagramma di flusso
Ogni diagramma di flusso Mermaid inizia con la parola chiave “flowchart”, seguita dalla direzione in cui vuoi che scorra il diagramma (o “TD” o “LR”). Quindi:
- Utilizza “flowchart TD;” per creare un layout dall’alto verso il basso.
- Utilizza “flowchart LR;” se preferisci un layout da sinistra a destra.
Aggiungi nodi e frecce
Ogni nodo (o elemento) necessita di un ID e di un'etichetta. Colleghi i nodi usando “-->” per creare delle frecce. Ecco un esempio:
A[Text A] B[Text B] A -- C[Text C] B -- D[Text D] C -- D
Nota:Nell'Editor Live di Mermaid, mentre digiti il codice nel pannello dell'editor a sinistra, il diagramma si aggiorna istantaneamente a destra. Otterrai un diagramma di flusso funzionante completo quando combinerai le parti (1) e (2).
Prova a cambiare la direzione nella parte (1) da TD (dall'alto verso il basso) a LR (da sinistra a destra) per vedere il cambiamento del flusso in tempo reale.
Come Creare Rami Condizionali in un Diagramma di Flusso
Aggiunta di Rami Condizionali
Per mostrare una condizione in un diagramma di flusso, disegna delle frecce da un singolo nodo verso due o più nodi. Questo crea un punto decisionale. Quando disegni delle frecce da un nodo verso due o più nodi, crei un ramo condizionale. Gli elementi sintattici chiave sono le parentesi graffe “{}” per i nodi decisionali e i simboli pipe “|” per etichettare le frecce:
Ecco un esempio:
Example
A[Start] --> B(Process 1)
B --> C{Decision}
C -->|Yes| D[Process 2]
C -->|No| E[Process 3]
Puoi anche creare dei cicli collegando le frecce a un nodo precedente. Questo aiuta a rappresentare passaggi o condizioni ripetute all'interno del flusso. Per creare cicli, indirizza le tue frecce verso nodi precedenti nel diagramma di flusso utilizzando la sintassi standard della freccia “-->”.
Come Personalizzare Forme, Frecce e Colori
Cambiare la Forma di un Nodo
Puoi modificare la forma degli elementi del tuo diagramma utilizzando diversi tipi di parentesi attorno al testo:
- [Testo]: Quadrato
- (Testo): Rettangolo arrotondato
- {Testo}: Rombo (per decisioni)
- [(Testo)]: Cilindro
- ((Testo)): Cerchio
Ad esempio, puoi creare un diagramma di flusso come quello qui sotto con forme diverse:
Example
flowchart TD
A[Rectangle] --> B(Rounded Rectangle)
B --> C{Diamond}
C --> D[(Cylinder)]
D --> E((Circle))
Personalizza gli stili delle frecce
Puoi modificare lo stile della linea delle frecce cambiando i simboli all'interno della notazione della freccia. Puoi anche aggiungere del testo alle frecce con la seguente sintassi (esempio):
Example “A ==> B;”: Bold arrow “B -.-> C;”: Dotted arrow “B --> |Text| C;”: Arrow with text
Impostazione dei colori
Puoi impostare i colori per l’intero nodo o per singole frecce:
Per cambiare il tema generale, usa questo codice:
Code
%%{init: {'theme': 'forest'}}%%
To use a style for a specific arrow:
linkStyle 2 stroke:red,stroke-width:4px
Poiché il Mermaid Live Editor si aggiorna in tempo reale, vedrai subito se qualcosa non va—un messaggio di errore o un diagramma errato. Non preoccuparti se ci vogliono alcuni tentativi. Provare diversi stili fa parte dell’apprendimento della sintassi Mermaid.
Usa l’IA per generare la sintassi Mermaid
La sintassi Mermaid è piuttosto semplice, ma se non vuoi impararne la struttura puoi comunque creare flowchart combinando Mermaid con strumenti di IA e poi incollarli in seguito.
Ecco come:
Passaggio 1
Apri un chatbot AI (come Claude o ChatGPT) e descrivi il flusso desiderato. Chiedi all'AI di generare il codice Mermaid. Un esempio di prompt potrebbe essere: “Crea un diagramma di flusso del processo di registrazione utente utilizzando la sintassi Mermaid.”
Passaggio 2
Copia e incolla il codice generato nel Mermaid Live Editor per visualizzare il diagramma.
Passaggio 3
Se qualcosa non ti sembra corretto, chiedi all'AI di modificare o correggere il codice finché il diagramma non appare giusto.
Questo approccio rende facile generare diagrammi anche se sei nuovo a Mermaid.
EdrawMax: uno strumento dedicato alla creazione di diagrammi di flusso
La sintassi Mermaid è eccellente per creare rapidamente diagrammi di flusso usando il testo. Ma se cerchi un'interfaccia più intuitiva o un editing più flessibile, considera l'utilizzo di EdrawMax.
Ecco come si confronta con la sintassi Mermaid:
| Funzionalità | Sintassi Mermaid | EdrawMax |
| Operazione | Basato su testo | Interfaccia grafica |
| Curva di apprendimento | Facile ma richiede conoscenza della sintassi | Semplice drag-and-drop |
| Modelli | Esempi limitati | Oltre 30.000 modelli (non solo per diagrammi di flusso) |
| Personalizzazione | Richiede la modifica della sintassi | Modifica il diagramma di flusso così com'è (tutto è personalizzabile, dalle forme, linee, colori e caratteri) |
| Velocità | Veloce una volta che ci si familiarizza | Più veloce tramite drag-and-drop |
| Diagrammi complessi | Più difficile da costruire | Facile con il supporto e i modelli integrati |
| Integrazione con il controllo di versione | Facile con il testo | Supportato, con opzioni di recupero |
| Opzioni di esportazione | PNG, SVG | PNG, JPG, PDF, SVG e altro |
| Costo | Gratuito | A pagamento (ma la versione gratuita è disponibile con funzionalità sufficienti) |
100% sicuro | Nessuna pubblicità |
Funzionalità AI100% sicuro | Versioni per desktop >>
Valutazione G2: 4,5/5 (Più di 2360 recensioni)
Funzionalità IA di EdrawMax
Un altro vantaggio chiave di EdrawMax sono le sue funzioni basate sull’intelligenza artificiale, in particolare la funzione di mappa mentale/diagramma con un clic. EdrawMax consente di generare diagrammi da prompt AI direttamente all’interno del software, inclusi flowchart e molti altri tipi di diagrammi.
Dispone anche di assistenza al disegno. I diagrammi sono facili da modificare e puoi cambiare il design utilizzando menu a un clic.
Puoi anche modificare i diagrammi utilizzando il menu del tasto destro o le opzioni di design con un solo clic. Questo rende la modifica molto più veloce, soprattutto per i flussi complessi.
Per diagrammi di flusso complessi o molto ricchi dal punto di vista del design, EdrawMax è una scelta solida. Ma se cerchi velocità o vuoi un'integrazione fluida con il controllo delle versioni, la sintassi Mermaid funziona comunque bene. Usa lo strumento che meglio si adatta ai tuoi obiettivi.
Quando usare cosa?
Se stai lavorando su documentazione tecnica o hai bisogno del controllo delle versioni, Mermaid è un'ottima scelta, soprattutto per sviluppatori e ingegneri. Ma se desideri maggior controllo visivo, migliori opzioni di design e personalizzazione più semplice, EdrawMax è uno strumento migliore. È ideale per creare rapidamente diagrammi di flusso curati e professionali.
Prova ora la versione gratuita di EdrawMax e scopri se si adatta al tuo flusso di lavoro!
EdrawMax DesktopEdrawMax Online
