Per collegare due sottografi Mermaid in Obsidian, assegna a ciascun gruppo un ID esplicito e collega quegli ID. Sul tuo Mac, prova prima un diagramma minimo, poi verifica se il problema dipende dalla sintassi, dalla direzione del layout o da una differenza nel renderer installato.
Questa guida spiega come visualizzare frecce tra gruppi in un unico diagramma di flusso. L’obiettivo è mostrare il collegamento previsto, identificarne gli estremi e scegliere un’alternativa pratica quando il renderer non produce la disposizione richiesta.
Inizia con un collegamento minimo tra due gruppi
Crea una nota temporanea e incolla il blocco recintato completo riportato di seguito. Il metodo documentato da Obsidian per aggiungere un diagramma consiste nell’usare un blocco di codice il cui linguaggio è mermaid; non serve un file di diagramma separato. Sintassi di formattazione avanzata
```mermaid
flowchart LR
subgraph groupA [Group A]
direction TB
A1[Item A1] --> A2[Item A2]
end
subgraph groupB [Group B]
direction TB
B1[Item B1] --> B2[Item B2]
end
groupA --> groupB
```
Mermaid documenta gli ID espliciti per i sottografi e i collegamenti da e verso i sottografi. In questo caso, groupA e groupB identificano i contenitori; il testo tra parentesi quadre ne indica i titoli. L’ultima riga collega i contenitori. Sintassi dei diagrammi di flusso
Passa alla Vista di lettura per controllare il risultato. Su macOS, la scorciatoia documentata per alternare la vista di lettura e quella di modifica è Cmd+E. Puoi anche selezionare Vista di lettura dal controllo delle viste nella barra di stato. Per modificare il sorgente con precisione, scegli Modalità sorgente. Viste e modalità di modifica
Verifica tre criteri di accettazione: entrambi i gruppi sono visibili, i loro elementi interni sono visibili e una freccia collega i confini dei due gruppi. In questa prima verifica, non preoccuparti della spaziatura e dello stile. Gli esempi seguono la documentazione della sintassi consultata; per questo articolo non sono stati visualizzati in un’installazione locale di Obsidian.
Se l’esempio minimo funziona, conserva quella nota come riferimento. Confronta il diagramma originale con l’esempio, procedendo per piccoli passi: prima le dichiarazioni dei gruppi, poi i relativi ID, infine la singola riga di collegamento. Ripristina i contenuti aggiuntivi solo dopo aver visualizzato il collegamento di base.
Verifica quale renderer usa la tua versione di Obsidian
Annota la versione dell’app installata prima di confrontare i risultati con gli esempi online. La documentazione sugli aggiornamenti di Obsidian indica che le versioni dell’app e del programma di installazione si trovano in Impostazioni → Generali. Seleziona Controlla gli aggiornamenti, poi Riavvia se viene proposto un aggiornamento. Segui anche eventuali istruzioni separate relative al programma di installazione. Aggiornare Obsidian
C’è una differenza significativa tra le versioni: le note di rilascio del 22 ottobre 2026 di Obsidian indicano Desktop 1.15.0 come una versione ad accesso anticipato e specificano che i diagrammi usano Pele, con compatibilità sintattica con Mermaid 12.1.0. Le stesse note affermano che in questa versione Obsidian non include più Mermaid. Considera dipendenti dalla versione le istruzioni che presumono che ogni installazione di Obsidian includa Mermaid. Obsidian 1.15.0 Desktop (accesso anticipato)
Le stesse note di rilascio eliminano l’impostazione Mostra i diagrammi Mermaid nelle note dalla versione 1.15.0. Se la tua installazione mostra questa impostazione o una richiesta di attivazione, annota la differenza invece di continuare a cercare un controllo descritto per un’altra versione. Obsidian 1.15.0 Desktop (accesso anticipato)
Per la risoluzione dei problemi, tieni un breve registro di confronto: versione dell’app, vista di modifica o di lettura, testo esatto del diagramma e risultato osservato. Descrivi il risultato in modo concreto, per esempio: «Si vedono due gruppi, ma manca la freccia di collegamento». È più utile che limitarsi ad annotare che il diagramma non funziona.
Decidi se la freccia deve collegare i gruppi o gli elementi
Scegli gli estremi in base a ciò che il diagramma deve comunicare. Per indicare una relazione generale tra gruppi, inizia con l’esempio dei contenitori. Per una transizione specifica tra elementi, usa l’alternativa completa seguente e valutala separatamente.
```mermaid
flowchart LR
subgraph groupA [Group A]
A1[Item A1] --> A2[Item A2]
end
subgraph groupB [Group B]
B1[Item B1] --> B2[Item B2]
end
A2 --> B1
```
L’ultima riga ora collega elementi specifici ai lati opposti del confine del gruppo. La documentazione Mermaid sui diagrammi di flusso distingue tra nodi, collegamenti e sottografi; usa con coerenza gli ID degli estremi previsti. Sintassi dei diagrammi di flusso
Se l’esempio dei contenitori non funziona nel renderer installato, ma quello degli elementi sì, il secondo è un’alternativa pratica quando una relazione tra elementi esprime il significato desiderato. Mantieni chiara questa distinzione nel diagramma: non presentare una transizione specifica tra elementi come prova che i contenitori siano collegati tra loro.
Quando adatti uno dei due esempi, apporta una sola modifica alla volta. Per prima cosa rinomina i titoli visibili e controlla il risultato; poi aggiungi altri elementi. Rimanda a un secondo momento gli stili e i sottografi annidati. Questa sequenza assegna a ogni modifica uno scopo chiaro e facilita l’identificazione della prima modifica associata a un errore.
Capisci perché cambia la direzione di un sottografo
Mermaid documenta una limitazione del layout: quando un nodo di un sottografo si collega all’esterno del gruppo, la direzione del sottografo viene ignorata ed esso eredita la direzione del gruppo padre. La documentazione mette a confronto questo caso con un collegamento al contenitore. Direzione nei sottografi
Di conseguenza, una freccia può essere corretta anche se la disposizione è diversa da quella prevista. Nel primo esempio, controlla separatamente le disposizioni interne e la freccia tra i gruppi. Nel secondo, verifica prima gli estremi degli elementi, poi valuta il layout. Quando interpreti entrambi i risultati, tieni presente la differenza tra renderer descritta sopra.
Se hai bisogno sia di un collegamento specifico tra elementi sia di una direzione interna diversa, trattali come due requisiti di accettazione separati. La limitazione documentata di Mermaid significa che non puoi dare per scontato che una dichiarazione di direzione locale soddisfi entrambi. Scegli il collegamento che esprime accuratamente la relazione, poi, se necessario, semplifica la disposizione.
Una valida alternativa consiste nel mantenere un’unica direzione generale e accorciare il diagramma, così da rendere più chiari gli elementi collegati. Se è sufficiente esprimere il significato a livello di gruppo, torna al primo esempio. Sono scelte redazionali su ciò che il diagramma comunica, non garanzie sulla posizione esatta degli elementi o sul percorso delle frecce.
Isola il problema prima di ricostruire il diagramma
Segui questa sequenza diagnostica per decidere cosa provare dopo. È uno strumento decisionale derivato dalla sintassi documentata e dalle differenze tra renderer, non un elenco di difetti confermati.
| Risultato osservato | Verifica successiva | Cosa annotare |
|---|---|---|
| La nota mostra il testo letterale del diagramma | Controlla i delimitatori di apertura e chiusura del blocco di codice, poi passa alla Vista di lettura |
Se il blocco viene visualizzato |
| L’esempio minimo restituisce un errore | Confronta il blocco incollato, carattere per carattere, con l’esempio | Il testo completo dell’errore |
| I gruppi vengono visualizzati, ma il collegamento no | Prova separatamente l’alternativa completa tra elementi | Quale tipo di estremo funziona |
| La freccia compare, ma la direzione interna cambia | Rivedi la limitazione documentata sulla direzione quando un nodo esce dal sottografo | Se il problema riguarda ancora il collegamento o la disposizione |
| L’esempio funziona finché non ripristini altri contenuti | Annulla l’aggiunta più recente e ripeti solo quella modifica | La più piccola aggiunta associata al problema |
| Lo stesso testo si comporta diversamente altrove | Confronta versioni dell’app, renderer e modalità di visualizzazione | Gli ambienti esatti e i risultati |
Per un confronto indipendente della sintassi, la documentazione di Obsidian consiglia il Live Editor di Mermaid. Incolla il contenuto del diagramma senza i delimitatori Markdown che lo racchiudono. Una visualizzazione corretta nel browser è un utile termine di paragone, ma non dimostra che il comportamento sia identico nella tua versione di Obsidian. Sintassi di formattazione avanzata
Se il risultato continua a essere diverso in Obsidian, ripeti la prova minima nel vault sandbox dell’app desktop. Le istruzioni ufficiali di Obsidian per la risoluzione dei problemi indicano Apri Aiuto > Vault sandbox come verifica desktop per riprodurre un problema al di fuori della configurazione abituale del vault. Consigliano anche di aggiornare i temi e i plugin della community e riavviare prima di procedere con ulteriori verifiche. Informazioni sulla categoria Segnalazioni di bug
Se la prova nel sandbox ha esito positivo, analizza una alla volta le differenze nel vault originale. Se anche lì il problema si ripresenta, conserva l’esempio minimo, le versioni dell’app e del programma di installazione, la modalità di visualizzazione e la descrizione esatta del risultato osservato. Prima di segnalarlo, cerca nel forum ufficiale una segnalazione corrispondente già esistente, come richiesto dalle istruzioni di Obsidian. Informazioni sulla categoria Segnalazioni di bug
Concludi con il diagramma più semplice che comunichi la relazione richiesta. Mantieni un collegamento tra contenitori quando gli estremi previsti sono i gruppi; usa un collegamento tra elementi quando la transizione riguarda elementi specifici. Dopo aver verificato che la scelta funzioni nella versione di Obsidian installata, ripristina gradualmente i dettagli aggiuntivi e fermati quando il diagramma rimane leggibile.
Fonti
- Sintassi di formattazione avanzata — Obsidian Help.
- Sintassi dei diagrammi di flusso — Mermaid.
- Viste e modalità di modifica — Obsidian Help.
- Aggiornare Obsidian — Obsidian Help.
- Obsidian 1.15.0 Desktop (accesso anticipato) — Obsidian.
- Informazioni sulla categoria Segnalazioni di bug — Obsidian Forum.