Mermaid reale e pronto all'uso per ogni tipo di diagramma comune. Ognuno viene renderizzato dal vivo qui sotto: aprine uno qualsiasi nell'editor per modificarlo, oppure copia il codice sorgente direttamente nella tua documentazione. Nulla viene caricato online.
Rettangoli per i passaggi, rombi per le decisioni, frecce etichettate per le diramazioni: il classico diagramma di processo immancabile.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> HomeChi chiama cosa e in quale ordine. Le frecce continue sono le richieste, quelle tratteggiate le risposte: ideale per i flussi di API e autenticazione.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 CreatedModella un database con la cardinalità a zampa di gallina. Si legge "un utente scrive molti post" direttamente dalla pagina.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"Classi, campi, metodi e relazioni. "<|--" indica l'ereditarietà; i marcatori di visibilità (+/-) mostrano l'interfaccia.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- CatGli stati che una cosa può assumere e gli eventi che la fanno passare dall'uno all'altro: cicli di vita degli ordini, flussi di approvazione, protocolli.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]Una timeline con date a partire da poche righe di testo. Indica che un'attività inizia "after" un'altra e il diagramma le concatena per te.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dPura indentazione: la riga meno indentata è il centro, ogni livello più profondo è una diramazione. Fai brainstorming in testo semplice.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsOgni esempio qui è semplice testo Mermaid, la stessa sintassi che GitHub, GitLab e Obsidian renderizzano in modo nativo. Aprine uno nell'editor, rinomina i nodi con i tuoi e esporta in SVG o PNG.
Vedi anche: Editor Mermaid · Incorpora in GitHub · Mermaid vs PlantUML
Sì. Copia, modifica e riutilizza liberamente qualsiasi esempio: non serve alcuna registrazione, nessun account e nessuna attribuzione. I diagrammi vengono renderizzati nel tuo browser, quindi nulla viene caricato online.
Fai clic su "Apri nell'editor" su qualsiasi esempio. Carica esattamente il codice sorgente Mermaid nell'editor dal vivo, dove puoi modificarlo, vederlo renderizzare di nuovo all'istante ed esportarlo in SVG o PNG.
Sì. Copia il codice sorgente e incollalo in un blocco di codice delimitato ```mermaid in un README, una issue o una pull request: GitHub e GitLab renderizzano Mermaid in modo nativo, senza bisogno di immagini.
Diagramma di flusso, sequenza, ER (database), classi UML, stato, Gantt e mappa mentale. Sono tutti tipi di diagramma Mermaid standard e ciascuno rimanda a un generatore dedicato con altri esempi e un prontuario della sintassi.
Sì: apri qualsiasi esempio nell'editor, poi usa i pulsanti di esportazione in SVG o PNG. L'SVG resta nitido a qualsiasi dimensione; il PNG è comodo per slide e documenti.