Diagrammi di flusso
Espressione grafica
Mappe mentali
Espressione strutturata
Note
Espressione efficiente
Mappa ad albero
Diagramma a staffa
Modalità predefinita
Mermaid è uno strumento che genera diagrammi a partire da una sintassi testuale. Scrivendo un semplice codice Mermaid è possibile creare diagrammi di flusso, diagrammi di sequenza, diagrammi delle classi, diagrammi di stato, diagrammi ER, diagrammi di Gantt, mappe mentali, diagrammi di architettura e molti altri tipi di diagramma.
A differenza dei tradizionali strumenti di disegno basati sul trascinamento, Mermaid descrive principalmente tramite codice i nodi, le relazioni, l'ordine temporale e le strutture dati di un diagramma. Dopo aver modificato il codice, il diagramma viene rigenerato automaticamente: per questo è particolarmente adatto a scenari come documentazione tecnica, progettazione di prodotto, gestione di progetti, sviluppo software e organizzazione delle conoscenze.
Questo articolo presenta la sintassi di base di Mermaid e raccoglie i tipi di diagramma che l'editor Mermaid supporta per il rendering, la sintassi di dichiarazione, gli esempi di codice e gli scenari d'uso. Se desideri scrivere e visualizzare il codice Mermaid direttamente online, puoi provare gratuitamente l'editor online Mermaid di ProcessOn.
Mermaid è uno strumento che genera diagrammi usando una sintassi testuale. Il codice seguente genera un semplice diagramma di flusso Mermaid:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Il risultato del rendering è il seguente:
Dove: flowchart TD serve a dichiarare la creazione di un diagramma di flusso disposto dall'alto verso il basso.
Per quanto riguarda Mermaid, la logica di funzionamento si può riassumere così:
Scrivi il codice Mermaid → analizza il codice → rendering del diagramma → modifica il codice → il diagramma si aggiorna in tempo reale
Pertanto, una delle chiavi per imparare Mermaid è conoscere la sintassi di dichiarazione corrispondente ai diversi tipi di diagramma.
Tipi diversi di diagramma usano sintassi di dichiarazione Mermaid diverse; i grafici Mermaid più comuni includono:
| Tipo di diagramma | Sintassi di dichiarazione Mermaid | Usi comuni |
| Diagramma di flusso | flowchart | Processi aziendali, algoritmi, flussi di lavoro |
| Diagramma di sequenza | sequenceDiagram | Interazioni di sistema, chiamate API |
| Diagramma delle classi | classDiagram | Struttura software, modellazione orientata agli oggetti |
| Diagramma di stato | stateDiagram-v2 | Transizioni di stato, macchine a stati |
| Diagramma ER | erDiagram | Relazioni tra entità del database |
| Diagramma di Gantt | gantt | Pianificazione di progetto, avanzamento delle attività |
| Diagramma del percorso utente | journey | Esperienza utente, percorso del cliente |
| Mappa mentale | mindmap | Organizzazione delle conoscenze, brainstorming |
| Timeline | timeline | Cronologia, eventi storici |
| Grafico a torta | pie | Proporzioni, analisi della composizione |
| Grafico a quadranti | quadrantChart | Classificazione, priorità, analisi del posizionamento |
| Diagramma Git | gitGraph | Branch, commit e merge di Git |
| Diagramma di Sankey | sankey-beta | Flussi di dati, risorse e traffico |
| Diagramma XY | xychart-beta | Tendenze dei dati, confronto di valori |
| Grafico radar | radar | Confronto di indicatori multidimensionali |
| Diagramma C4 | C4Context, ecc. | Modellazione dell'architettura software |
| Diagramma di architettura | architecture-beta | Architettura di sistemi, servizi e risorse |
| Diagramma kanban | kanban | Gestione di attività e stati di lavoro |
| Diagramma a blocchi | block-beta | Relazioni tra moduli, strutture e sistemi |
| Diagramma dei pacchetti | packet-beta | Struttura dei pacchetti di rete |
| Diagramma dei requisiti | requirementDiagram | Analisi dei requisiti e relazioni tra requisiti |
Diverse versioni di editor Mermaid possono avere un supporto diverso per la sintassi e le funzionalità dei diagrammi, quindi in pratica è opportuno fare riferimento alla sintassi supportata dall'editor.
Sintassi di base
Mermaid usa la dichiarazione flowchart per creare un diagramma di flusso. La scrittura più semplice:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Risultato del rendering
Dove:
Il diagramma di flusso Mermaid può usare anche LR (da sinistra a destra), RL (da destra a sinistra), BT (dal basso verso l'alto) e altre impostazioni di direzione. Ad esempio:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Indica un diagramma di flusso disposto da sinistra a destra.
Sintassi comuni
| Sintassi | Diagramma | Significato |
| (text) | Rettangolo con angoli arrotondati | Indica l'inizio, la fine o un'operazione generica del flusso |
| [text] | Rettangolo | Indica un passaggio concreto, un'attività o un processo di elaborazione |
| {text} | Rombo | Indica una decisione o una diramazione condizionale |
| ((text)) | Cerchio | Indica un punto di connessione o un evento |
| [[text]] | Doppio rettangolo | Indica la chiamata a un sottoprocesso o a un sottomodulo |
| [(text)] | Cilindro | Indica un nodo di database |
| >text] | Figura asimmetrica | Indica input/output |
| [/text/] | Parallelogramma | Indica dati di input o di output |
| --> | Freccia | Indica la direzione del flusso |
| --- | Linea di connessione senza freccia | Indica una relazione di associazione |
| -.-> | Freccia tratteggiata | Indica un flusso opzionale o una relazione di riferimento |
| ==> | Freccia spessa | Indica un flusso prioritario o un'associazione forte |
Per la sintassi dettagliata di creazione dei diagrammi di flusso con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/flowchart
Il diagramma di flusso è adatto a scenari come processi aziendali, flussi di lavoro, flussi algoritmici, flussi di sistema e flussi decisionali, prova gratuitamente l'editor online Mermaid per diagrammi di flusso.
Sintassi di base
Mermaid usa la dichiarazione sequenceDiagram per creare un diagramma di sequenza. L'esempio più semplice:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| sequenceDiagram | Diagramma di sequenza | Crea un diagramma di sequenza |
| A->B: message | Linea continua | Indica una chiamata sincrona di messaggi o un'interazione normale |
| A-->B: message | Linea tratteggiata | Indica un messaggio di ritorno o un'interazione debolmente associata |
| A->>B: message | Freccia con linea continua | indica una chiamata asincrona di messaggi |
| A-->>B: message | Freccia tratteggiata | indica una risposta asincrona o un messaggio di ritorno |
| participant A | Partecipante | Definisce oggetti, ruoli o sistemi coinvolti nell'interazione |
| actor A | Attore | Indica un partecipante attivo come un utente o un sistema esterno |
| activate A | Riquadro di attivazione | Indica che l'oggetto inizia a elaborare la richiesta |
| deactivate A | Fine dell'attivazione | Indica che l'oggetto ha completato l'elaborazione corrente |
| loop text | Riquadro di ciclo | Indica un processo di interazione ripetuto |
| alt text | Diramazione condizionale | Indica percorsi di interazione in condizioni diverse |
| opt text | Flusso opzionale | Indica un'interazione che può verificarsi |
| par text | Riquadro parallelo | Indica l'esecuzione simultanea di più operazioni |
Per la sintassi dettagliata di creazione dei diagrammi di sequenza con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/sequence-diagram
Il diagramma di sequenza è adatto a descrivere le interazioni che avvengono in ordine temporale tra utente e sistema, tra sistemi e tra servizi, prova gratuitamente l'editor online Mermaid per diagrammi di sequenza.
Sintassi di base
Mermaid usa la dichiarazione classDiagram per creare un diagramma delle classi.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| classDiagram | Diagramma delle classi | Crea un diagramma delle classi |
| class ClassName | Classe | Definisce un oggetto classe |
| ClassName : attribute | Attributo | Indica una variabile membro della classe |
| ClassName : method() | Metodo | Definisce un metodo della classe |
| <|-- | Triangolo vuoto+ Linea continua | Indica una relazione di ereditarietà |
| <|.. | Triangolo vuoto+ Linea tratteggiata | Indica una relazione di realizzazione |
| *-- | Rombo pieno+ Linea continua | Indica una relazione di composizione |
| o-- | Rombo vuoto+ Linea continua | Indica una relazione di aggregazione |
| --> | Freccia con linea continua | Indica una relazione di associazione |
| ..> | Freccia tratteggiata | Indica una relazione di dipendenza |
| -- | Linea continua | Indica una relazione di connessione semplice |
| +attribute | Segno più | Indica un attributo o un metodo pubblico |
| -attribute | Segno meno | Indica un attributo o un metodo privato |
I simboli come +, - e # davanti ai membri della classe indicano visibilità diverse.
Per la sintassi dettagliata di creazione dei diagrammi delle classi con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/class-diagram
Il diagramma delle classi è adatto a scenari come progettazione software, modellazione orientata agli oggetti e analisi della struttura dei programmi, prova gratuitamente l'editor online Mermaid per diagrammi delle classi.
Sintassi di base
Mermaid usa la dichiarazione stateDiagram-v2 per creare un diagramma di stato.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| stateDiagram-v2 | Diagramma di stato | Crea un diagramma di stato |
| state StateName | Rettangolo con angoli arrotondati | Definisce un nodo di stato di base |
| state StateName : text | Rettangolo con angoli arrotondati con testo | Aggiunge un testo descrittivo allo stato |
| [*] | Punto pieno o doppio anello | Indica l'inizio o la fine dello stato |
| [*] --> StateName | Freccia iniziale | Indica l'ingresso nel primo stato |
| StateName --> [*] | Freccia finale | Indica la fine del flusso di stati |
| A --> B | Freccia con linea continua | Indica una transizione di stato |
| A --> B: event | Freccia con linea continua con etichetta | Transizione di stato con evento scatenante |
| state StateName { ... } | Rettangolo con angoli arrotondati annidato | Definisce uno stato composto |
| state Node <<choice>> | Rombo | Nodo di scelta per diramazione condizionale |
| state Fork <<fork>> | Linea divisoria orizzontale spessa | Indica l'inizio di un flusso parallelo |
| state Join <<join>> | Linea divisoria orizzontale spessa | Indica la fine e l'unione di un flusso parallelo |
Per la sintassi dettagliata di creazione dei diagrammi di stato con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/state-diagram
Il diagramma di stato è adatto a rappresentare stati degli ordini, stati dei flussi di lavoro, stati degli utenti, stati dei sistemi e macchine a stati, prova gratuitamente l'editor online Mermaid per diagrammi di stato.
Sintassi di base
Mermaid usa la dichiarazione erDiagram per creare un diagramma delle relazioni tra entità, cioè un diagramma ER.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| erDiagram | Diagramma ER | Crea un diagramma ER |
| ENTITY { } | Rettangolo | Definisce un'entità |
| type field | Etichetta di attributo | Definisce un attributo dell'entità |
| type field PK | Chiave primaria | Definisce la chiave primaria dell'entità |
| type field FK | Chiave esterna | Definisce la chiave esterna dell'entità |
| type field UK | Chiave univoca | Definisce un campo con vincolo di unicità |
| || | Uno | Uno e uno solo |
| o| | Zero o uno | Zero o uno |
| |{ | Uno o più | Almeno uno |
| o{ | Zero, uno o più | Zero o più |
Per la sintassi dettagliata di creazione dei diagrammi ER con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/er-diagram
Il diagramma ER può rappresentare entità, attributi e relazioni tra entità ed è spesso usato nella progettazione di database, prova gratuitamente l'editor online Mermaid per diagrammi ER.
Sintassi di base
Mermaid usa la dichiarazione mindmap per creare una mappa mentale.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| mindmap | Mappa mentale | Crea una mappa mentale |
| root[text] | Rettangolo | Tema radice rettangolare |
| root(text) | Rettangolo con angoli arrotondati | Tema radice rettangolare con angoli arrotondati |
| root((text)) | Cerchio | Tema radice circolare |
| root{{text}} | Esagono | Tema radice esagonale |
| root)text( | Grafico a bolle | Tema radice a bolla |
| [text] | Rettangolo | Nodo rettangolare |
| (text) | Rettangolo con angoli arrotondati | Nodo rettangolare con angoli arrotondati |
| ((text)) | Cerchio | Nodo circolare |
| {{text}} | Esagono | Nodo esagonale |
| )text( | Grafico a bolle | Nodo a bolla |
Per la sintassi dettagliata di creazione delle mappe mentali con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/mindmap
La mappa mentale rappresenta le gerarchie principalmente tramite l'indentazione, per questo è particolarmente adatta a organizzazione delle conoscenze, brainstorming, appunti di corsi e architettura dell'informazione, prova gratuitamente l'editor online Mermaid per mappe mentali.
Sintassi di base
Mermaid usa la dichiarazione gantt per creare un diagramma di Gantt.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| gantt | Diagramma di Gantt | Crea un diagramma di Gantt |
| title text | Titolo | Imposta il titolo del diagramma di Gantt |
| dateFormat text | Identificatore di configurazione della data | Definisce il formato di analisi delle date della timeline |
| section text | Barra del titolo del gruppo di attività | Suddivide i gruppi di attività |
| TaskName : id, startDate, endDate | Barra orizzontale dell'attività | Definisce gli attributi correlati dell'attività |
| startDate | Barra orizzontale dell'attività | Definisce l'ora di inizio |
| endDate | Barra orizzontale dell'attività | Definisce l'ora di fine |
| duration | Barra orizzontale dell'attività | Definisce la durata dell'attività |
| id | Personalizzato | Definisce l'identificativo dell'attività |
| after id | Barra orizzontale dell'attività | Definisce un'attività che inizia dopo un'attività precedente |
| 16d, 2w | Barra orizzontale dell'attività | Indica giorni o settimane |
| milestone, date | Rombo pieno | Imposta un nodo di milestone |
Per la sintassi dettagliata di creazione dei diagrammi di Gantt con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/gantt
Il diagramma di Gantt Mermaid è adatto a pianificazione di progetto, organizzazione delle attività, avanzamento dello sviluppo e gestione di progetti, prova gratuitamente l'editor online Mermaid per diagrammi di Gantt.
Sintassi di base
Mermaid usa la dichiarazione journey per creare un diagramma del percorso utente.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| journey | Diagramma del percorso utente | Crea un diagramma del percorso utente |
| title text | Titolo | Titolo del diagramma del percorso utente |
| section text | Blocco di sezione | Suddivide i raggruppamenti delle fasi del flusso |
| TaskName:num:Actor | Nodo di flusso + asse della scala di soddisfazione | Definisce le attività di interazione della fase, il punteggio di soddisfazione e gli attori coinvolti |
| num (1~5) | Punteggio di soddisfazione | 1 è il minimo, 5 è il massimo |
| Me, Cat | Attore | Definisce più attori che partecipano all'attività |
Per la sintassi dettagliata di creazione dei diagrammi del percorso utente con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/user-journey-diagram
Il diagramma del percorso utente è adatto ad analizzare le diverse fasi e le esperienze vissute dal cliente dal primo contatto con il prodotto fino al raggiungimento dell'obiettivo, prova gratuitamente l'editor online Mermaid per diagrammi del percorso utente.
Sintassi di base
Mermaid usa la dichiarazione timeline per creare una timeline.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| timeline | Timeline | Crea una timeline |
| title text | Titolo | Imposta il titolo della timeline |
| section text | Blocco di sezione | Suddivide i raggruppamenti delle fasi temporali |
| date : Event1 | Evento | Definisce gli eventi corrispondenti a un momento temporale |
| : Event2 | Eventi multipli | Altri eventi corrispondenti allo stesso momento |
| Spazio | A capo | Va a capo per le descrizioni di eventi troppo lunghe |
Per la sintassi dettagliata di creazione delle timeline con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/timeline
La timeline è adatta a mostrare eventi storici, sviluppo di progetti, iterazioni di prodotto e informazioni in ordine temporale, prova gratuitamente l'editor online Mermaid per timeline.
Sintassi di base
Mermaid usa la dichiarazione quadrantChart per creare un grafico a quadranti.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei grafici a quadranti con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/quadrant-chart
Il grafico a quadranti è adatto a posizionamento di prodotto, analisi delle priorità, analisi competitiva e classificazione bidimensionale, prova gratuitamente l'editor online Mermaid per grafici a quadranti.
Sintassi di base
Il diagramma kanban Mermaid serve a organizzare gli elementi di lavoro in base allo stato delle attività, ad esempio da fare, in corso e completate. La struttura tipica può essere rappresentata così:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Risultato del rendering
Dove：
Per la sintassi dettagliata di creazione dei diagrammi kanban con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/kanban
Il diagramma kanban è adatto a gestione di progetti, monitoraggio delle attività, processi di sviluppo e gestione dei flussi di lavoro, prova gratuitamente l'editor online Mermaid per diagrammi kanban.
Sintassi di base
Il diagramma dei requisiti può essere usato per rappresentare le relazioni tra requisiti, funzionalità ed elementi di sistema, Mermaid usa la dichiarazione requirementDiagram per creare un diagramma dei requisiti.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| requirementDiagram | Diagramma dei requisiti | Crea un diagramma dei requisiti |
| Requirement name { } | Requisito | Definisce un requisito di base |
| functionalRequirement name { } | Funzionale | Definisce un requisito funzionale |
| interfaceRequirement name { } | Interfaccia | Definisce un requisito di interfaccia |
| performanceRequirement name { } | Prestazioni | Definisce un requisito di prestazione |
| physicalRequirement name { } | Fisico | Definisce un requisito fisico |
| element name {type: name docRef: name} | Elemento | Definisce elementi come sistema, componente o test |
| X - satisfies -> Y | Freccia tratteggiata | L'entità soddisfa il requisito corrispondente |
| X - contains -> Y | Linea continua con estremità circolare a croce nel punto di partenza | Un requisito contiene un altro requisito |
| X - derives -> Y | Freccia tratteggiata | Un requisito deriva da un altro requisito |
| X - copies -> Y | Freccia tratteggiata | Un requisito copia un altro requisito |
| X - traces -> Y | Freccia tratteggiata | Collegamento di tracciabilità bidirezionale tra requisiti |
Per la sintassi dettagliata di creazione di un diagramma dei requisiti Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/requirement-diagram
Il diagramma dei requisiti è adatto ad analisi dei requisiti di prodotto, ingegneria dei sistemi e tracciamento dei requisiti, prova gratuitamente l'editor online Mermaid per diagrammi dei requisiti.
Sintassi di base
Mermaid usa la dichiarazione pie per creare un grafico a torta.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei grafici a torta con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/pie-chart
Il grafico a torta è adatto a rappresentare proporzioni e relazioni di composizione, prova gratuitamente l'editor online Mermaid per grafici a torta.
Sintassi di base
Il diagramma di Sankey serve principalmente a rappresentare flussi di traffico, risorse, capitali o dati tra nodi diversi, Mermaid usa la dichiarazione sankey-beta per creare un diagramma di Sankey.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei diagrammi di Sankey con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/sankey-diagram
Il diagramma di Sankey è un grafico di visualizzazione usato per mostrare il flusso da un insieme di valori a un altro, prova gratuitamente l'editor online Mermaid per diagrammi di Sankey.
Sintassi di base
Mermaid usa la dichiarazione xychart-beta per creare un diagramma XY.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| xychart-beta | Grafico a coordinate XY | Crea un grafico a coordinate XY |
| xychart-beta horizontal | Grafico a coordinate XY orizzontale | Crea un grafico a coordinate XY orizzontale |
| title "name" | Titolo | Definisce il titolo del diagramma XY |
| x-axis "axisTitle" [a,b,c] | Asse X | Definisce le categorie e il titolo dell'asse orizzontale |
| y-axis "axisTitle" min --> max | Asse Y | Definisce l'intervallo e il titolo dell'asse verticale |
| y-axis "axisTitle" | Asse Y con solo titolo | Imposta solo il nome dell'asse verticale, l'intervallo numerico si adatta automaticamente |
| bar [num1, num2, num3] | Grafico a barre | Definisce la serie di dati del grafico a barre |
| line [num1, num2, num3] | Grafico a linee | Definisce la serie di dati del grafico a linee |
Per la sintassi dettagliata di creazione dei diagrammi XY con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/xy-chart
Il diagramma XY è adatto a mostrare variazioni dei dati, confronti numerici e semplici visualizzazioni di dati, prova gratuitamente l'editor online Mermaid per diagrammi XY.
Sintassi di base
Il grafico radar è adatto a confrontare le prestazioni di più oggetti su più dimensioni, ad esempio valutazioni di competenze, indicatori di prodotto e confronto di soluzioni. Mermaid usa la dichiarazione radar-beta per creare un grafico radar.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| radar-beta | Grafico radar | Crea un grafico radar |
| title "name" | Titolo | Definisce il titolo del grafico radar, subito dopo radar-beta |
| title "name" | Titolo | Definisce il titolo del grafico radar, inserito prima di radar-beta, con 3 trattini sia sopra sia sotto |
| axis id ["axisTitle"] | Asse delle dimensioni | Definisce le dimensioni e i nomi del grafico radar |
| curve id ["name"]{[values]} | Curva dei dati | Definisce il nome della serie di dati e i valori di ciascuna dimensione |
| max value | Valore massimo | Imposta il valore massimo dell'intervallo numerico del grafico radar |
| min value | Valore minimo | Imposta il valore minimo dell'intervallo numerico del grafico radar |
Per la sintassi dettagliata di creazione dei grafici radar con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/radar-chart
Il grafico radar è particolarmente utile per sviluppatori, data scientist e ingegneri che devono rappresentare i dati in modo chiaro e conciso in formato circolare, prova gratuitamente l'editor online Mermaid per grafici radar.
Sintassi di base
Mermaid usa la dichiarazione gitGraph per creare un diagramma Git.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei diagrammi Git con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/git-graph
Il diagramma Git è adatto a rappresentare processi di controllo di versione come commit, creazione di branch, cambio di branch e merge, prova gratuitamente l'editor online Mermaid per diagrammi Git.
Sintassi di base
Il diagramma C4 Mermaid serve alla modellazione dell'architettura software e può descrivere a diversi livelli sistemi software, container, componenti e le loro relazioni.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Risultato del rendering
Dove:
Sintassi comuni
| Sintassi | Diagramma | Significato |
| C4Context | Diagramma di contesto del sistema | Crea un diagramma di contesto del sistema C4 |
| C4Container | Diagramma dei container | Crea un diagramma dei container C4 |
| C4Component | Diagramma dei componenti | Crea un diagramma dei componenti C4 |
| C4Dynamic | Diagramma di interazione dinamica | Crea un diagramma di interazione dinamica C4 |
| C4Deployment | Diagramma di deployment | Crea un diagramma di deployment C4 |
| title | Titolo | Imposta il titolo del diagramma C4 |
| Person(alias, "label", "description") | Persona | Indica un utente o un attore che usa il sistema |
| Person_Ext(alias, "label", "description") | Persona esterna | Indica una persona o un ruolo organizzativo esterno al sistema che partecipa all'interazione |
| System(alias, "label", "description") | Nodo di sistema | Indica il sistema software da analizzare |
| System_Ext(alias, "label", "description") | Nodo di sistema esterno | Indica un servizio di terze parti o un sistema software esterno da cui il sistema dipende |
| System_Boundary(alias, "label") | Confine del sistema | Indica il confine dell'ambito del sistema |
| Container(alias, "label", "technology") | Container | Indica un'unità software eseguibile in modo indipendente all'interno del sistema |
| Container_Boundary(alias, "label") | Confine del container | Indica l'ambito di un container o di un servizio |
Per la sintassi dettagliata di creazione dei diagrammi C4 con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/c4-diagram
Il diagramma C4 è adatto a progettazione dell'architettura software, analisi dei sistemi e documentazione tecnica, prova gratuitamente l'editor online Mermaid per diagrammi C4.
Sintassi di base
Mermaid usa la dichiarazione architecture-beta per creare un diagramma di architettura.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei diagrammi di architettura con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/architecture-diagram
Il diagramma di architettura è adatto a rappresentare le relazioni tra server, database, servizi cloud, servizi applicativi e diversi componenti di sistema, prova gratuitamente l'editor online Mermaid per diagrammi di architettura.
Sintassi di base
Il diagramma a blocchi descrive principalmente la struttura di un sistema tramite moduli e relazioni di connessione, Mermaid usa la dichiarazione block-beta per creare un diagramma a blocchi.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Risultato del rendering
Dove:
Per la sintassi dettagliata di creazione dei diagrammi a blocchi con Mermaid, visita la pagina seguente: https://www.processon.io/it/mermaid/block-diagram
Il diagramma a blocchi è adatto a scenari come moduli di sistema, struttura funzionale, architettura tecnica e relazioni tra componenti, prova gratuitamente l'editor online Mermaid per diagrammi a blocchi.
Sintassi di base
Il diagramma dei pacchetti serve principalmente a rappresentare i campi e le lunghezze nelle strutture dati dei pacchetti di rete o dei protocolli, Mermaid usa la dichiarazione packet-beta per creare un diagramma dei pacchetti.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Risultato del rendering
Dove:
Il diagramma dei pacchetti è adatto a protocolli di rete, strutture di pacchetti e documentazione di specifiche tecniche, prova gratuitamente l'editor online Mermaid per diagrammi dei pacchetti.
Non conoscere la sintassi Mermaid non significa non poter usare Mermaid per generare grafici, puoi procedere in uno dei seguenti modi:
Gratuitamente, usare i modelli Mermaid
Scegli prima il modello più vicino alle tue esigenze, poi modifica i nodi, i testi e le relazioni. Questo approccio è adatto agli utenti che usano Mermaid per la prima volta.
Generare codice Mermaid con l'AI
Puoi descrivere a parole il diagramma che ti serve, ad esempio:
Crea un flusso di elaborazione degli ordini di e-commerce, che comprenda ordine dell'utente, pagamento, verifica delle scorte, spedizione e completamento dell'ordine.
L'AI può generare il codice Mermaid in base alla descrizione, che poi potrai modificare in base alle esigenze reali.
Usare l'AI per controllare e correggere il codice
Se nel codice Mermaid compare un errore di sintassi, puoi chiedere all'AI di individuare il problema e correggere il codice.
Generare codice tramite riconoscimento delle immagini
Per diagrammi di flusso, diagrammi di architettura o altri diagrammi strutturati già esistenti, puoi provare a generare il codice Mermaid tramite riconoscimento delle immagini e poi continuare a modificarlo.
L'editor online Mermaid deve in genere risolvere tre problemi fondamentali: scrittura del codice, anteprima del diagramma ed esportazione del risultato. Oltre a questo, anche i modelli e l'AI possono abbassare la soglia di utilizzo di Mermaid.
Prendiamo come esempio l'editor online Mermaid di ProcessOn: nel browser puoi direttamente:
Pertanto, per gli utenti che devono creare spesso diagrammi Mermaid, l'editor online ProcessOn Mermaid consente di riunire in un unico ambiente di lavoro la scrittura del codice Mermaid, la generazione dei grafici, la modifica successiva, l'esportazione e la condivisione.
Dal diagramma di flusso, dal diagramma di sequenza e dal diagramma delle classi Mermaid fino al diagramma di Gantt, alla mappa mentale, al grafico a quadranti, al diagramma di Sankey, al diagramma Git, al diagramma C4 e al diagramma di architettura, tutto può essere creato con la sintassi Mermaid e modificato.
Vieni a usare l'editor online Mermaid, scrivi il codice Mermaid online e genera diagrammi subito.
La sintassi Mermaid è difficile da imparare?
La sintassi di base di Mermaid è relativamente semplice: per la maggior parte dei diagrammi basta padroneggiare le nozioni fondamentali come dichiarazione del diagramma, nodi, linee di connessione e testo. Ad esempio, sequenceDiagram serve a dichiarare un diagramma di sequenza e flowchart a dichiarare un diagramma di flusso. Le regole sintattiche variano da un tipo di diagramma all'altro e per i diagrammi complessi occorre approfondire i parametri e le configurazioni corrispondenti.
Perché il diagramma non viene generato se il codice Mermaid è sbagliato?
Mermaid è piuttosto sensibile alla struttura sintattica. Le cause più comuni includono una dichiarazione del diagramma errata, una sintassi di nodi o linee di connessione incompleta, un'indentazione o una gestione dei caratteri speciali non corretta e l'uso di una sintassi non supportata dalla versione corrente di Mermaid.
Qual è la differenza tra Mermaid e i tradizionali software di disegno?
Mermaid descrive i diagrammi principalmente tramite codice testuale, mentre i tradizionali software di disegno creano i diagrammi trascinando grafici e linee di connessione e regolando gli stili.
I diagrammi Mermaid si possono salvare e riutilizzare?
Sì. Il contenuto principale di un diagramma Mermaid è il codice testuale, quindi è possibile salvare il codice in Markdown, in un file di codice o in altri documenti che supportano Mermaid e rieseguire il rendering quando serve.
Questa è anche una differenza importante tra Mermaid e i diagrammi in pura forma di immagine: l'immagine salva il risultato finale, mentre il codice Mermaid salva anche le informazioni sulla struttura del diagramma.
Che relazione c'è tra Mermaid e Markdown?
Mermaid viene spesso usato insieme a Markdown, ma i due non sono la stessa sintassi.
Markdown serve principalmente a scrivere testo strutturato, mentre Mermaid serve a generare diagrammi tramite codice. In un editor Markdown che supporta Mermaid è possibile incorporare il codice Mermaid in un documento Markdown, mettendo così diagrammi e testo esplicativo nello stesso documento.
Seguendo il tutorial per provare
Libero da usare ProcessOn
