> ## Documentation Index > Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Diagrammi Mermaid > Usa Mermaid per creare diagrammi di flusso, diagrammi di sequenza, diagrammi ER e altri diagrammi testuali in Craft. Craft supporta i diagrammi Mermaid — un modo per creare diagrammi visivi scrivendo una semplice sintassi testuale. Digita poche righe di codice e Craft lo trasforma in un diagramma nitido e preciso direttamente nel tuo documento. I diagrammi si aggiornano in tempo reale mentre scrivi, funzionano su tutte le piattaforme e vengono visualizzati nelle pagine condivise e pubblicate. Un diagramma di flusso Mermaid visualizzato in un documento Craft ## Inserire un diagramma Mermaid Aggiungi un diagramma Mermaid con uno di questi metodi: * Digita `/mermaid` e seleziona **Diagramma Mermaid** * Scegli **Diagramma Mermaid** dal pannello **Inserisci** nella barra laterale (sotto Blocchi avanzati) * Incolla del markdown contenente un blocco di codice ` ```mermaid ` — Craft lo converte automaticamente ## Modifica Quando apri un blocco Mermaid, viene mostrata una vista divisa — il diagramma renderizzato in alto e il codice in basso. L'anteprima si aggiorna in tempo reale mentre scrivi. Vista divisa con l'anteprima del diagramma in alto e l'editor di codice in basso Fai clic sul blocco Mermaid per aprirlo nella vista divisa. L'anteprima del diagramma appare in alto con l'editor di codice in basso. Fai doppio clic sull'anteprima per ingrandirla. Tocca il blocco per aprire l'editor di codice con un'anteprima dal vivo in alto. Su iPhone, chiudi la tastiera per vedere il diagramma. Fai doppio tap sull'anteprima per ingrandire. Fai clic sul blocco per modificarlo. Usa il menu della modalità di visualizzazione nel menu contestuale del blocco per passare tra Modifica, Anteprima e Vista divisa. Non è necessario conoscere la sintassi Mermaid a memoria — l'Assistente AI di Craft può generare i diagrammi al posto tuo. Descrivi semplicemente quello che vuoi e lui scriverà il codice. ## Tipi di diagramma supportati ### Diagrammi di flusso Rappresenta processi, decisioni e flussi di lavoro. Usa `graph TD` per un layout dall'alto verso il basso o `graph LR` per un layout da sinistra a destra. ``` graph TD A[Start] --> B{Decision} B -->|Yes| C[Do This] B -->|No| D[Do That] C --> E[Done] D --> E ``` ### Diagrammi di sequenza Mostra le interazioni tra persone o sistemi nel tempo. Un diagramma di sequenza che illustra il flusso di una consegna di cibo ``` sequenceDiagram User->>App: Place order App->>Payment: Charge card Payment-->>App: Confirmed App-->>User: Order placed ``` ### Diagrammi di stato Visualizza come qualcosa transita tra stati diversi — ideale per il tracciamento degli ordini, i flussi di lavoro o i processi. Un diagramma di stato che mostra il ciclo di vita di un ordine ``` stateDiagram-v2 [*] --> Draft Draft --> Review Review --> Published Review --> Draft : Needs changes Published --> [*] ``` ### Diagrammi di classe Mostra la struttura di un sistema — cosa esiste, le sue proprietà e come gli elementi sono correlati tra loro. ``` classDiagram class Document { +String title +Date created +publish() } class Folder { +String name +getDocuments() } Folder "1" --> "*" Document : contains ``` ### Diagrammi ER Modella le relazioni tra dati — ottimo per la progettazione e la pianificazione di database. ``` erDiagram AUTHOR ||--o{ POST : writes POST ||--o{ COMMENT : has ``` ### Grafici Crea grafici a barre, grafici a linee o una combinazione di entrambi. ``` xychart-beta title "Monthly Revenue ($K)" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Revenue" 0 --> 120 bar [45, 62, 78, 55, 89, 105] ``` ## Cambiare il tema I diagrammi Mermaid si adattano al tema dell'editor di codice. Per cambiare l'aspetto, tocca l'**icona del pennello** nella barra degli strumenti e scegli un tema — le opzioni includono Tokyo Night, Dracula, Nord, GitHub e altri. Il diagramma si aggiorna immediatamente. I diagrammi rispettano anche la modalità chiara o scura del tuo documento. Diagramma Mermaid con tema chiaro Diagramma Mermaid con tema scuro ## Condivisione e pubblicazione I diagrammi Mermaid vengono visualizzati nelle pagine condivise e pubblicate — chiunque acceda al link vedrà il diagramma renderizzato, non il codice. Non è necessaria alcuna configurazione aggiuntiva. ## Importazione ed esportazione * **Importazione Markdown**: incolla o importa markdown con blocchi di codice ` ```mermaid ` e Craft crea automaticamente i blocchi Mermaid. * **Esportazione Markdown**: i blocchi Mermaid vengono esportati come blocchi di codice standard ` ```mermaid `, compatibili con altri strumenti. ## Suggerimenti Di solito indica un errore di sintassi nel codice. Controlla eventuali errori di battitura o frecce mancanti. Se stai copiando la sintassi da un altro strumento, tieni presente che Craft supporta diagrammi di flusso, diagrammi di sequenza, diagrammi di stato, diagrammi di classe, diagrammi ER e grafici XY — altri tipi come grafici a torta, diagrammi di Gantt o mappe mentali non sono attualmente supportati. Sì. Descrivi il diagramma che desideri e l'Assistente AI di Craft genererà il codice Mermaid per te. Puoi anche chiedergli di modificare o ampliare un diagramma esistente. Su Mac e iPad, fai doppio tap sull'anteprima del diagramma per ingrandirlo. Sul web, usa la visualizzazione a schermo intero per i diagrammi più grandi. Mermaid è uno standard aperto utilizzato in molti strumenti. Visita [mermaid.js.org](https://mermaid.js.org/intro/) per scoprire la sintassi completa di ogni tipo di diagramma.