Esempi avanzati di Mermaid

← Torna agli esempi Markdown

Usa questi modelli come punto di partenza per i tuoi diagrammi.

Diagramma di flusso decisionale

flowchart TD
    Start([Inizio]) --> Input[/Inserimento dati/]
    Input --> Process{Elaborare?}
    Process -->|Sì| Execute[Esegui attività]
    Process -->|No| Skip[Salta]
    Execute --> Check{Successo?}
    Check -->|Sì| Success[✅ Successo]
    Check -->|No| Retry{Riprovare?}
    Retry -->|Sì| Execute
    Retry -->|No| Fail[❌ Fallimento]
    Skip --> End([Fine])
    Success --> End
    Fail --> End

Diagramma di stato

stateDiagram-v2
    [*] --> Inattivo
    Inattivo --> Caricamento: Upload
    Caricamento --> Elaborazione: File caricati
    Elaborazione --> Salvataggio: Validati
    Salvataggio --> Successo: Salvati
    Salvataggio --> Errore: Fallito
    Successo --> Inattivo: Completato
    Errore --> Inattivo: Riprova
    Errore --> [*]: Annulla

Sequenza temporale

timeline
    title Sviluppo del progetto
    section Fase 1
        Preparazione : Configurazione del progetto
                     : Installazione delle dipendenze
    section Fase 2
        IndexedDB : Implementazione del database
                  : Test di persistenza
    section Fase 3
        Componenti : Creazione dei componenti
                   : Integrazione dell'interfaccia
    section Fase 4
        Test : Test funzionali
             : Test offline
    section Fase 5
        Rilascio : Build di produzione
                 : Distribuzione

Diagramma entità-relazione

erDiagram
    FILE ||--o{ FOLDER : belongs_to
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : creates
    USER {
        int id PK
        string name
    }

Diagramma di Gantt

gantt
    title Pianificazione del progetto
    dateFormat YYYY-MM-DD
    section Pianificazione
    Definire i requisiti      :a1, 2025-10-01, 3d
    Creare il prototipo       :a2, after a1, 2d
    section Sviluppo
    Configurare il progetto   :b1, 2025-10-06, 1d
    Implementare IndexedDB    :b2, after b1, 2d
    Creare i componenti       :b3, after b2, 3d
    Integrare l'interfaccia   :b4, after b3, 2d
    section Test
    Test unitari               :c1, after b4, 2d
    Test di integrazione       :c2, after c1, 2d
    section Rilascio
    Build di produzione       :d1, after c2, 1d
    Distribuzione              :d2, after d1, 1d

Mappa mentale

mindmap
  root((Raziel.MD))
    Funzionalità
      Caricamento
        Trascina e rilascia
        Selettore file
        Selettore cartella
      Lettura
        Markdown
        Diagrammi Mermaid
        Evidenziazione sintassi
      Archiviazione
        IndexedDB
        Uso offline
        PWA
    Tecnologia
      Interfaccia
        Vue 3
        TypeScript
        TailwindCSS
      Librerie
        Marked.js
        Mermaid.js
        Dexie.js
    Esperienza
      Modalità scura
      Ricerca
      Navigazione
      Layout responsivo

Tipi di diagramma

Mermaid offre diversi tipi:

• ✅ Diagramma di flusso
• ✅ Diagramma di sequenza
• ✅ Diagramma delle classi
• ✅ Diagramma di stato
• ✅ Diagramma entità-relazione
• ✅ Diagramma di Gantt
• ✅ Grafico a torta
• ✅ Git graph
• ✅ Sequenza temporale
• ✅ Mappa mentale

Prova a creare i tuoi diagrammi.

Continua a esplorare

• Esempio completo di Markdown
• Torna agli esempi Markdown