Diagrammi Mermaid

Crea diagrammi di flusso, diagrammi di sequenza, diagrammi di stato e altro ancora con la sintassi testuale di Mermaid.

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.

​

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.

macOS

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.

iOS / iPad

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.

Web / Windows

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.

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.

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.

​

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

Cosa fare se il diagramma mostra 'Diagramma Mermaid non valido'?

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.

L'Assistente AI può aiutare a scrivere diagrammi Mermaid?

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.

Posso ingrandire un diagramma di grandi dimensioni?

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 per scoprire la sintassi completa di ogni tipo di diagramma.