DotMDCome scrivere un diagramma di flusso Mermaid:una direzione, nodi e frecce.
Un diagramma di flusso Mermaid è testo in un blocco di codice: dai un nome ai nodi, li colleghi con frecce e il diagramma viene disegnato per te. Ecco la sintassi con esempi da copiare.
macOS 14 o successivo. Leggere è gratis; modificare e revisionare si pagano una volta sola.
Risposta rapida
Apri un blocco di codice contrassegnato mermaid, scrivi flowchart e una direzione, poi elenca i collegamenti tra i nodi. TD disegna dall'alto in basso e LR da sinistra a destra. Un riquadro è [testo], una decisione è {testo} e --> è una freccia.
```mermaid
flowchart LR
A[Write spec] --> B{Approved?}
B -->|Yes| C[Build]
B -->|No| A
```·
Direzione
La prima riga indica il tipo di diagramma e la direzione. Funzionano sia flowchart sia il più vecchio graph.
TDoTB: dall'alto in bassoBT: dal basso in altoLR: da sinistra a destraRL: da destra a sinistra
Scegli LR per un processo breve che sta nella larghezza della pagina e TD per uno più lungo.
Forme dei nodi
Un nodo è un id, seguito facoltativamente dal suo testo tra parentesi. Le parentesi scelgono la forma:
flowchart LR
a[Rectangle]
b(Rounded)
c([Stadium])
d[[Subroutine]]
e[(Database)]
f((Circle))
g{Decision}
h{{Hexagon}}
i[/Parallelogram/]Un nodo senza parentesi mostra solo il suo id. Puoi richiamare un nodo più avanti con il solo id, così forma e testo si scrivono una volta sola.
Collegamenti ed etichette
I collegamenti uniscono due nodi. La forma della freccia indica il tipo di connessione:
flowchart LR
A --> B
B --- C
C -.-> D
D ==> E
E -->|label| F
F -- text --> G-->una freccia,---una linea senza punta-.->una freccia tratteggiata,==>una spessa-->|etichetta|o-- etichetta -->mette il testo sul collegamentoA --> B & Ccollega un nodo a più nodi, eA --> B --> Cconcatena i collegamenti
Aggiungi trattini per allungare un collegamento, ad esempio ---->, quando un nodo ha bisogno di più spazio.
Sottografi
Un sottografo raggruppa dei nodi in un riquadro con etichetta. Inizia con subgraph e termina con end:
flowchart TD
subgraph client [Client]
A[Browser] --> B[App]
end
subgraph server [Server]
C[API] --> D[(Database)]
end
B --> CLa parola tra parentesi è il titolo, e la parola che la precede è l'id a cui puoi collegarti. Un sottografo può avere al suo interno una riga direction LR propria, anche se la direzione viene ignorata se un nodo interno si collega a qualcosa all'esterno.
Un esempio completo
Mettendo tutto insieme, ecco un piccolo processo di rilascio con una decisione, un ritorno indietro e un passaggio raggruppato:
flowchart TD
A([Start]) --> B[Write the change]
B --> C{Tests pass?}
C -->|No| B
C -->|Yes| D[Open a pull request]
subgraph review [Review]
D --> E{Approved?}
E -->|No| B
end
E -->|Yes| F[(Merge)]Leggilo dall'alto: la forma a stadio segna l'inizio, i rombi sono domande, le frecce con etichetta sono le risposte e il riquadro attorno a due nodi è la revisione. Dare a ogni decisione il nome di una domanda e a ogni freccia quello della sua risposta rende un diagramma di flusso leggibile senza spiegazioni.
Commenti e stili
Una riga che inizia con %% è un commento e non viene disegnata. Per colorare i nodi, definisci una classe e applicala:
flowchart TD
%% the happy path
A[Start]:::good --> B[Done]:::good
classDef good fill:#d4f4dd,stroke:#2d7a46Mantieni lo stile sobrio. La maggior parte dei diagrammi di flusso si legge meglio con meno colori, e gli stili possono apparire diversi nei temi chiaro e scuro.
Errori comuni
- La parola end in minuscolo come testo di un nodo rompe il diagramma. Scrivi
Endoppure metti il testo tra virgolette. - Un id di nodo che inizia con o o x subito dopo un collegamento, come
A---oB, viene letto come un collegamento a cerchio o a croce. Aggiungi uno spazio o usa la maiuscola. - Caratteri speciali in un'etichetta. Parentesi e due punti richiedono le virgolette doppie:
A["Salva (bozza)"]. - Nessuna prima riga. Senza
flowchart TDnon viene disegnato nulla. - Troppi nodi. Un diagramma di flusso con trenta riquadri è difficile da leggere. Dividilo, o usa i sottografi.
Quando un diagramma fallisce, Mermaid mostra un messaggio di errore e il testo resta nel tuo file da correggere.
Disegnarlo
GitHub disegna i blocchi Mermaid nei file Markdown, e lo fa anche DotMD: offline, nel tema chiaro o scuro in base alla pagina. Nell'editor, Insert → Diagram inserisce nel documento un diagramma di flusso funzionante e l'anteprima si ridisegna mentre scrivi. La stessa guida copre i diagrammi di sequenza, di classe, di stato, ER e di Gantt. Per la sintassi dei recinti, vedi i blocchi di codice in Markdown.
Domande sui diagrammi di flusso Mermaid
Come scrivo un diagramma di flusso in Mermaid?
Apri un blocco di codice mermaid con flowchart TD (oppure LR), poi aggiungi collegamenti come A[Inizio] --> B[Fine], uno per riga.
Che differenza c'è tra TD e LR in un diagramma di flusso Mermaid?
TD (top down, come TB) disegna il diagramma dall'alto in basso, e LR lo disegna da sinistra a destra.
Come aggiungo del testo a una freccia in Mermaid?
Mettilo tra due barre verticali dopo la freccia, A -->|Sì| B, oppure tra i trattini, A -- Sì --> B.
Perché il mio diagramma di flusso Mermaid mostra un errore?
Le cause più comuni sono un end minuscolo in un'etichetta, la prima riga mancante o caratteri speciali in un'etichetta senza virgolette doppie.