🧩 Mermaid

Diagramma delle classi

Modella il tuo dominio e la struttura degli oggetti

Apri questo esempio nell’editor Generane uno con l’IA

Che cos’è un Diagramma delle classi?

Un diagramma delle classi descrive i tipi di un sistema — attributi, metodi e relazioni: ereditarietà, composizione, associazione. È il classico UML per la modellazione del dominio e la progettazione del codice.

I diagrammi delle classi danno il meglio nelle revisioni di progettazione e nell’onboarding, quando una persona appena arrivata ha bisogno della forma del dominio prima del codice. Mostrano che cosa esiste, che cosa possiede e da che cosa dipende — l’accoppiamento che un albero di cartelle nasconde. Non dicono nulla sul runtime: nessun ordine di chiamata, nessun ciclo di vita, nessun volume. E uno corretto oggi è sbagliato dopo il prossimo refactoring, se nessuno lo mantiene. I tipi condivisi vanno ridisegnati in ogni diagramma che li usa.

Esempio dal vivo

Codice Mermaid

classDiagram
    class Order {
      +String id
      +Date createdAt
      +total() Money
    }
    class Customer {
      +String name
      +String email
    }
    class OrderLine {
      +int quantity
    }
    Customer "1" --> "*" Order
    Order "1" *-- "*" OrderLine

Esempio dal vivo

Quando usarlo

Modellare un dominio prima di scrivere il codice (DDD, progettazione a oggetti)

Documentare basi di codice esistenti per l’onboarding

Progettare mappature di oggetti del database e modelli di risorse API

Errori frequenti

Le frecce di ereditarietà puntano al genitore

Animal <|-- Dog significa che Dog estende Animal: il triangolo vuoto sta sulla classe base. Scrivere Dog <|-- Animal non produce errori e inverte in silenzio la gerarchia, cosa che in revisione quasi nessuno nota. Leggi prima l’estremità con il triangolo: è sempre il genitore.

Le parentesi angolari inghiottono i generici

Un membro scritto +List<Item> lines viene disegnato come +List lines, perché il browser tratta <Item> come un tag HTML. Mermaid usa le tilde: +List~Item~ lines, e class Cart~Item~ per una classe generica.

Senza parentesi i metodi diventano attributi

+save finisce nello scomparto degli attributi e +save() in quello dei metodi. A deciderlo sono solo le parentesi, non il tipo di ritorno. Il diagramma viene comunque disegnato, quindi l’errore supera la revisione: mettile anche quando il metodo non prende argomenti.

Sintassi di base

.mmd

classDiagram
    class Animal {
      +String name
      +makeSound() void
    }
    Animal <|-- Dog : inheritance

class Invoice { -String id +total(Money vat) Money }
Anteponi ai membri + per pubblico, - privato, # protetto o ~ package. Un tipo scritto dopo le parentesi è il tipo di ritorno; senza parentesi la riga è un attributo.
Customer "1" o-- "0..*" Invoice : owns
Le cardinalità vanno tra virgolette su ciascun lato e l’etichetta dopo i due punti dà il nome alla relazione. Si legge nel verso in cui la riga è scritta.
class Gateway { <<interface>> }
Uno stereotipo tra doppie parentesi angolari marca un’interfaccia, una classe astratta, un’enumerazione o un servizio. Viene disegnato su una riga propria sopra il nome della classe.
namespace Billing { class Invoice }
Un namespace raggruppa le classi in un riquadro etichettato: mantiene leggibile un diagramma grande e rispecchia i confini di package o modulo già usati nel codice.

Domande su questo diagramma

Quali relazioni supporta Mermaid?

Ereditarietà (<|--), composizione (*--), aggregazione (o--), associazione (-->), dipendenza (..>) e realizzazione (..|>), ciascuna con cardinalità ed etichette opzionali.

Posso generare un diagramma delle classi dal codice?

Incolla le tue classi o descrivi il tuo dominio: l’IA estrae entità, attributi e relazioni in un diagramma delle classi pulito.

I diagrammi delle classi si visualizzano in Notion o Confluence?

Notion renderizza Mermaid dentro un blocco di codice. Confluence non ha supporto nativo: usa una macro del Marketplace o incolla un SVG esportato, che resta nitido a qualsiasi zoom e si può sostituire sul posto quando il modello cambia.

Posso decidere dove Mermaid posiziona le classi?

Non direttamente. Il layout è automatico; le uniche leve sono direction LR o TB, il raggruppamento delle classi in namespace e il riordino delle dichiarazioni di relazione. Per un layout fisso, esporta l’SVG e ritoccalo in un editor vettoriale.

Posso collegare una classe al suo file sorgente?

Sì. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" trasforma il riquadro in un link e aggiunge un tooltip. L’ancora vive dentro l’SVG, quindi sopravvive a un’esportazione SVG e si perde nel momento in cui esporti un PNG.

Mermaid può mostrare membri astratti o statici?

Sì. Un asterisco finale marca un membro come astratto e un simbolo del dollaro finale lo marca come statico — +area()* float, +unit()$ Shape. Vengono disegnati come vuole UML: corsivo per l’astratto, sottolineato per lo statico. Un’intera classe si marca con lo stereotipo <<abstract>> nel corpo.

Diagramma delle classi o un altro tipo di diagramma?

Diagramma delle classi o diagramma entità-relazione?

Stessi riquadri, pubblico diverso. Il diagramma entità-relazione descrive tabelle, colonne e chiavi come esistono nel database; il diagramma delle classi descrive tipi, comportamento ed ereditarietà come esistono nel codice. Se i riquadri hanno metodi, è un diagramma delle classi.

Diagramma delle classi o diagramma degli stati?

Modellano lo stesso oggetto da due angolazioni. Il diagramma delle classi dice che cos’è un ordine: campi, relazioni, metodi. Il diagramma degli stati dice che cosa attraversa: bozza, pagato, spedito, e gli eventi in mezzo. I domini ricchi hanno bisogno di entrambi.

Esplora gli altri tipi di diagrammi

🔀 Diagramma di flusso 💬 Diagramma di sequenza 🗄️ Diagramma entità-relazione 🔄 Diagramma degli stati 📅 Diagramma di Gantt 🥧 Grafico a torta 🧠 Mappa mentale 🌿 Grafo Git 🕰️ Linea temporale 🚶 Percorso utente 🎯 Grafico a quadranti

Crea ora il tuo Diagramma delle classi

Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.

Apri Mermaid Studio