Diagrammi Mermaid

Scrivi i diagrammi come testo in blocchi di codice recintati. Jamdesk li renderizza come SVG in fase di build.

Utilizzo di base

Usa un blocco di codice recintato con l'identificatore di linguaggio mermaid:

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

Tipi di diagramma

Diagrammi di flusso

La direzione può essere dall'alto verso il basso (TD), da sinistra a destra (LR), dal basso verso l'alto (BT) o da destra a sinistra (RL).

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Sottografi

Raggruppa i nodi correlati con i sottografi. Usali per suddividere un diagramma di flusso grande in sezioni come "Frontend" e "Backend", oppure in fasi di una pipeline.

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
    end
    subgraph Backend
        C[API Server] --> D[(Database)]
    end
    B -->|HTTP| C
```

Diagrammi di sequenza

I diagrammi di sequenza mostrano come i componenti interagiscono nel tempo. Usane uno per i flussi di chiamate API e gli handshake di autenticazione. I partecipanti appaiono come linee verticali. I messaggi viaggiano tra di loro.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Diagrammi delle classi

I diagrammi delle classi mostrano la struttura di sistemi orientati agli oggetti, come un modello dati o i tipi principali di un servizio. Mostrano le classi con i loro attributi, metodi e relazioni.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int id
        +Date created
        +addItem()
        +checkout()
    }
    class Item {
        +String name
        +float price
    }
    User "1" --> "*" Order : places
    Order "1" --> "*" Item : contains
```

Diagrammi di stato

I diagrammi di stato modellano il ciclo di vita di un oggetto o di un processo. Mostrano ogni stato e le transizioni tra di essi. Gli stati degli ordini e i flussi di approvazione dei documenti sono esempi tipici.

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Diagrammi entità-relazione

I diagrammi ER documentano schemi di database e modelli dati. Mostrano entità (tabelle), i loro attributi (colonne) e le relazioni tra di esse. I simboli indicano la cardinalità: uno-a-uno, uno-a-molti o molti-a-molti.

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Diagrammi di Gantt

I diagrammi di Gantt mostrano le pianificazioni dei progetti. Le attività appaiono come barre orizzontali su una timeline, con durata, dipendenze e lavoro in parallelo. Usane uno per un piano di progetto o una roadmap.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Research       :a1, 2024-01-01, 7d
        Design         :a2, after a1, 5d
    section Development
        Backend        :b1, after a2, 14d
        Frontend       :b2, after a2, 14d
    section Launch
        Testing        :c1, after b1, 7d
        Deployment     :c2, after c1, 2d
```

Grafici Git

I grafici Git mostrano strategie di branching e flussi di controllo di versione: commit, branch, merge e cronologia del repository. Ogni branch ha il proprio colore.

```mermaid
gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add auth"
    checkout main
    merge feature id: "v1.0"
    branch release
    checkout release
    commit id: "Prep 1.1"
    checkout main
    branch hotfix
    checkout hotfix
    commit id: "Fix bug"
    checkout main
    merge hotfix id: "v1.0.1"
    checkout release
    commit id: "Final QA"
    checkout main
    merge release id: "v1.1"
```

Diagrammi timeline

Le timeline mostrano eventi nel corso di periodi. Inizia con la parola chiave timeline, un title opzionale, poi una riga per periodo con gli eventi separati da due punti:

```mermaid
timeline
    title Product Launch Timeline
    2024 : Research
         : First prototype
    2025 : Private beta
         : Public beta
    2026 : GA launch
```

Grafici a torta

I grafici a torta mostrano proporzioni come fette di un cerchio. Usane uno quando le parti compongono un tutto, come quote di mercato o risultati di un sondaggio. Non superare le 6 fette.

```mermaid
pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2
```

Forme dei diagrammi di flusso

Ogni forma ha un significato convenzionale nei diagrammi di flusso:

Tipi di freccia

Le frecce indicano la direzione del flusso e i tipi di relazione:

Ridimensionare i diagrammi larghi

Usa il componente Mermaid con la prop minWidth per evitare che un diagramma largo, come un diagramma di Gantt o un grafico Git grande, venga compresso:

<Mermaid minWidth="700px">
gantt
    title Wide Project Timeline
    ...
</Mermaid>

Fare clic per espandere

Clicca su un diagramma per aprirlo a schermo intero su schermi da 768px in su. Con la tastiera, metti il focus sul diagramma e premi Invio. Chiudilo con Escape, con il pulsante di chiusura o cliccando fuori dal diagramma.

Disattivalo per un singolo diagramma con la forma del componente e noZoom:

<Mermaid data-no-zoom="true">
graph LR
    A[Request] --> B[Response]
</Mermaid>

I diagrammi scritti come blocchi ```mermaid si aprono sempre a schermo intero.

Suggerimenti per lo stile

• Suddividi un flusso grande in diagrammi più piccoli.
• Etichetta le frecce per spiegare le transizioni.
• Scegli una direzione: TD (dall'alto verso il basso) per i diagrammi alti, LR (da sinistra a destra) per quelli larghi.
• Limita ogni diagramma a 10-15 nodi.

Per colorare un nodo, usa style per un singolo nodo o classDef per un gruppo:

Jamdesk mantiene i tuoi colori in modalità scura. Un riempimento senza colore del testo riceve un colore di etichetta che Jamdesk sceglie per essere leggibile sul riempimento.

Approfondimenti

Consulta la documentazione ufficiale di Mermaid per la sintassi completa, inclusi lo styling, i temi e altri tipi di diagramma.

Prossimi passi