Passa al contenuto principale

Esempi Diagrammi Mermaid

Questa pagina mostra esempi di diagrammi Mermaid integrati nella documentazione Emblema.

Diagramma di Flusso

Un diagramma di flusso che mostra il processo di orchestrazione di Emblema:

Loading diagram...

Diagramma di Sequenza

Processo di elaborazione documenti:

Loading diagram...

Diagramma ER (Entity Relationship)

Schema semplificato del database:

Loading diagram...

Diagramma di Stato

Stati di elaborazione di un task:

Loading diagram...

Diagramma di Gantt

Timeline di sviluppo feature:

Loading diagram...

Diagramma a Torta

Distribuzione tipi di documenti:

Loading diagram...

Diagramma di Classe

Architettura servizi backend:

Loading diagram...

Git Graph

Flusso di branching:

Loading diagram...

User Journey

Percorso utente tipico:

Loading diagram...

Note sull'utilizzo

Sintassi Base

Per creare un diagramma Mermaid, usa un blocco di codice con linguaggio mermaid:

```mermaid
graph TD
A[Inizio] --> B[Fine]
```

Temi

I diagrammi si adattano automaticamente al tema chiaro/scuro del sito. Puoi personalizzare i temi nel file docusaurus.config.ts.

Limitazioni

  • I diagrammi molto complessi potrebbero rallentare il caricamento della pagina
  • Alcuni tipi di diagrammi potrebbero non essere supportati nelle versioni precedenti di Mermaid
  • La dimensione del diagramma si adatta automaticamente al contenitore

Best Practices

  1. Mantieni i diagrammi semplici: Diagrammi troppo complessi sono difficili da leggere
  2. Usa colori con parsimonia: I colori di default funzionano bene con entrambi i temi
  3. Aggiungi descrizioni: Spiega sempre cosa mostra il diagramma
  4. Testa su entrambi i temi: Verifica che il diagramma sia leggibile sia in tema chiaro che scuro

Questa pagina ti è stata utile?