Supporto Mermaid

Diagrammix3 supporta l'importazione e l'esportazione di diagrammi usando la sintassi Mermaid, un popolare linguaggio di diagrammazione basato su testo.

Cos'è Mermaid?

Mermaid è uno strumento di diagrammazione basato su JavaScript che usa una sintassi simile a Markdown per definire i diagrammi. È comunemente usato in documentazione, wiki e file README.

Esempio di sintassi Mermaid:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Importare diagrammi Mermaid

Nota: L'importazione e l'esportazione Mermaid sono una funzione PRO.

Inserisci Mermaid (con anteprima e convalida)

Il modo più rapido per portare Mermaid sulla tua tela è il pannello Inserisci Mermaid, che mostra un'anteprima e convalida il diagramma prima che venga posizionato qualsiasi cosa.

1. Vai su Composizione → Inserisci Mermaid
2. Incolla o digita la tua sintassi Mermaid nell'editor
3. Mentre digiti, Diagrammix convalida la sintassi e la striscia di stato mostra il problema oppure Valido · N nodi, M connettori. Puoi anche fare clic su Convalida in qualsiasi momento
4. Fai clic su Applica per posizionare il diagramma, oppure Annulla per chiudere. Applica posiziona solo un diagramma valido

Incollare Mermaid dagli appunti passa attraverso la stessa convalida, così una sintassi malformata non produce mai un diagramma rotto.

Nota: Mermaid viene importato incollando o digitando nel pannello Inserisci Mermaid — non esiste un comando separato "importa file". Per importare un file .mmd, aprilo in un editor di testo qualsiasi e incollane il contenuto.

Tipi di diagramma supportati

Diagrammix riconosce un'ampia gamma di tipi di diagramma Mermaid, inclusi:

Altri tipi Mermaid (timeline, user journey, quadrant, XY chart, Sankey, Git graph e altri) vengono riconosciuti e importati, ma vengono resi come un grafo generico di nodi e connettori invece di un layout specializzato. Usa Convalida per controllare il numero di nodi e connettori prima di applicare.

Sintassi del diagramma a stati

I diagrammi a stati modellano gli stati in cui un oggetto può trovarsi e le transizioni tra gli stati.

Diagramma a stati di base:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

Stati e transizioni:

• [*] rappresenta gli stati di inizio e fine
• --> crea una freccia di transizione
• : label aggiunge etichette alla transizione
• Gli stati annidati usano l'indentazione

Stati composti:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Risultato: Un diagramma a macchina a stati con forme di stato appropriate e transizioni etichettate.

Esempi di importazione

Diagramma di flusso

Input Mermaid:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Risultato: Un diagramma di flusso dall'alto verso il basso con forme rettangolo, rettangolo arrotondato e rombo collegate da frecce etichettate.

Diagramma di sequenza

Input Mermaid:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Risultato: Un diagramma di sequenza con due partecipanti e frecce di messaggio.

Diagramma delle classi

Input Mermaid:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Risultato: Un diagramma delle classi UML con relazioni di ereditarietà.

Esportare in Mermaid

Copia Mermaid

Diagrammix esporta in Mermaid tramite gli appunti — non esiste un comando separato "esporta su file".

1. Seleziona le forme che vuoi esportare, oppure non selezionare nulla per esportare l'intera tela
2. Vai su Composizione → Copia Mermaid
3. Incolla la sintassi Mermaid dove ti serve (poi salvala come file .mmd se vuoi)

L'esportazione si adatta a ciò che è nell'ambito: una mappa mentale viene copiata come sintassi mindmap e una pagina di classi o sequenza UML come classDiagram / sequenceDiagram; qualsiasi altra cosa viene esportata come flowchart.

Continuare a modificare in Mermaid (andata e ritorno)

I diagrammi Mermaid importati conservano la loro sorgente, così puoi continuare a lavorare in notazione Mermaid invece di modificare le forme una per una.

1. Seleziona un diagramma Mermaid importato
2. Fai clic sul pulsante </> (Modifica sorgente Mermaid) sul diagramma
3. Si apre il pannello Modifica sorgente Mermaid con il testo Mermaid originale precompilato
4. Modifica il testo e fai clic su Rigenera per aggiornare il diagramma sul posto

Se hai modificato il diagramma sulla tela dopo che è stato importato, il pannello elenca quelle modifiche sotto Modifiche sulla tela che non verranno mantenute, così puoi decidere prima di rigenerare.

Modificare come oggetti nativi

Puoi anche modificare un diagramma importato direttamente come oggetti nativi di Diagrammix:

• Sposta e ridimensiona le forme liberamente
• Cambia gli stili usando l'Ispettore (colori, font, stili di linea)
• Aggiungi nuovi elementi usando gli strumenti di Diagrammix
• Modifica le connessioni trascinando le estremità
• Applica il layout automatico per riorganizzare il diagramma

Suggerimento: Decidi in anticipo come vuoi mantenere un diagramma. Usa l'editor sorgente </> per mantenerlo guidato da Mermaid, oppure modifica le forme direttamente per una rifinitura visiva occasionale. Modifiche manuali pesanti possono divergere da ciò che produrrebbe rigenerare la sorgente.

Limitazioni

• Stile complesso: le direttive di stile Mermaid potrebbero non tradursi completamente
• Sottografi: convertiti in forme raggruppate
• Funzioni avanzate: alcune funzioni specifiche di Mermaid (come i gestori di clic) vengono ignorate
• Andata e ritorno: esportare un diagramma che hai modificato pesantemente a mano potrebbe non riprodurre una sintassi Mermaid identica — per l'andata e ritorno, preferisci l'editor sorgente </>

Suggerimenti

1. Ripulisci dopo l'importazione: usa il layout automatico per organizzare i diagrammi importati
2. Controlla le relazioni: verifica che i tipi di relazione siano stati importati correttamente
3. Stile coerente: applica gli stili di Diagrammix per un aspetto curato
4. Conserva la sorgente: salva i tuoi file Mermaid originali per il controllo di versione