Geef elke groep een expliciete ID en verbind die ID’s om twee Mermaid-subgraphs in Obsidian met elkaar te verbinden. Test eerst een minimaal diagram op je Mac en controleer daarna of het probleem in de syntaxis, de lay-outrichting of een verschil in de geïnstalleerde renderer zit.

Deze handleiding gaat over zichtbare pijlen tussen groepen in één stroomdiagram. Het doel is de bedoelde verbinding zichtbaar te maken, de eindpunten ervan vast te stellen en een praktisch alternatief te kiezen wanneer de renderer de gewenste indeling niet oplevert.

Begin met een minimale verbinding tussen twee groepen

Maak een tijdelijke notitie en plak het volledige codeblok hieronder. Volgens de documentatie van Obsidian voeg je een diagram toe met een codeblok waarvan de taal mermaid is; een apart diagram bestand is niet nodig. Geavanceerde opmaaksyntaxis

```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 documenteert expliciete subgraph-ID’s en verbindingen van en naar subgraphs. Hier identificeren groupA en groupB de containers; de tekst tussen vierkante haken vormt hun titels. De laatste regel verbindt de containers. Syntaxis van stroomdiagrammen

Schakel over naar Reading view om het resultaat te bekijken. Op macOS is Cmd+E de gedocumenteerde sneltoets om te wisselen tussen de lees- en bewerkingsweergave. Je kunt ook Reading view kiezen via de weergaveknop in de statusbalk. Kies Source mode om de bron nauwkeurig te bewerken. Weergaven en bewerkingsmodus

Controleer drie punten: beide groepen zijn zichtbaar, hun interne items zijn zichtbaar en een pijl verbindt de grenzen van de twee groepen. Besteed bij deze eerste controle nog geen aandacht aan tussenruimte en opmaak. Deze voorbeelden zijn gebaseerd op de opgehaalde syntaxisdocumentatie; voor dit artikel zijn ze niet in een lokale Obsidian-installatie gerenderd.

Als het minimale voorbeeld werkt, bewaar die notitie dan als referentie. Vergelijk je oorspronkelijke diagram er in kleine stappen mee: eerst de groepsdeclaraties, daarna hun ID’s en vervolgens de enkele verbindingsregel. Voeg pas extra inhoud toe zodra de basisverbinding zichtbaar is.

Controleer welke renderer jouw Obsidian-versie gebruikt

Noteer de geïnstalleerde appversie voordat je resultaten vergelijkt met online voorbeelden. Volgens de updatedocumentatie van Obsidian vind je de app- en installatieversies onder Settings → General. Selecteer Check for updates en daarna Relaunch als er een update wordt aangeboden. Volg ook eventuele afzonderlijke installatie-instructies. Obsidian bijwerken

Er is een belangrijke versiegrens: in de releaseopmerkingen van 22 oktober 2026 noemt Obsidian Desktop 1.15.0 een release met vroege toegang. Ook staat erin dat diagrammen Pele gebruiken, met syntaxiscompatibiliteit voor Mermaid 12.1.0. Volgens dezelfde opmerkingen bevat Obsidian in die release Mermaid zelf niet meer. Ga er dus niet van uit dat elke Obsidian-installatie Mermaid bevat; zulke instructies zijn versieafhankelijk. Obsidian 1.15.0 Desktop (vroege toegang)

In die releaseopmerkingen staat ook dat de instelling Show Mermaid diagrams in notes in versie 1.15.0 is verwijderd. Als jouw installatie die instelling of een prompt om deze functie in te schakelen toont, noteer dat verschil dan in plaats van eindeloos te zoeken naar een optie die voor een andere versie is beschreven. Obsidian 1.15.0 Desktop (vroege toegang)

Houd voor het oplossen van problemen een korte vergelijking bij: appversie, bewerkings- of leesweergave, de exacte diagramtekst en het waargenomen resultaat. Beschrijf het resultaat concreet, bijvoorbeeld: “Er verschijnen twee groepen, maar de verbindingspijl ontbreekt.” Dat is nuttiger dan alleen noteren dat het diagram niet werkt.

Bepaal of de pijl groepen of items moet verbinden

Kies de eindpunten op basis van wat het diagram moet overbrengen. Begin met het container voorbeeld voor een algemene relatie tussen groepen. Gebruik het volgende volledige alternatief voor een specifieke overgang tussen items en beoordeel het afzonderlijk.

```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
```

De laatste regel verbindt nu benoemde items aan weerszijden van de groepsgrens. De documentatie van Mermaid voor stroomdiagrammen maakt onderscheid tussen knooppunten, verbindingen en subgraphs; gebruik consequent de ID’s van de bedoelde eindpunten. Syntaxis van stroomdiagrammen

Als het container voorbeeld niet werkt in de geïnstalleerde renderer, maar het item voorbeeld wel, is dat tweede voorbeeld een praktisch alternatief wanneer een relatie tussen items de bedoelde betekenis weergeeft. Behoud dat onderscheid in het diagram: stel een specifieke overgang tussen items niet voor als bewijs dat de containers zelf met elkaar verbonden zijn.

Voer bij het aanpassen van een van beide voorbeelden steeds één wijziging tegelijk door. Hernoem eerst de zichtbare titels, bekijk het resultaat en voeg daarna meer items toe. Bewaar opmaak en nesten voor later. Zo heeft elke bewerking een duidelijk doel en kun je de eerste wijziging die een probleem veroorzaakt makkelijker herkennen.

Begrijp waarom de richting van een subgraph verandert

Mermaid documenteert een beperking van de lay-out: wanneer een knooppunt in een subgraph met iets buiten de groep wordt verbonden, wordt de eigen richting van de subgraph genegeerd en neemt die de richting van het bovenliggende niveau over. De documentatie vergelijkt dit met een verbinding met de container. Richting in subgraphs

Daardoor kan een pijl correct zijn, terwijl de indeling afwijkt van je bedoeling. Controleer in het eerste voorbeeld de interne stapelingen en de verbinding tussen groepen afzonderlijk. Controleer in het tweede voorbeeld eerst de eindpunten van de items voordat je de lay-out beoordeelt. Houd bij het interpreteren van beide resultaten rekening met het hierboven beschreven onderscheid tussen renderers.

Als je zowel een specifieke verbinding tussen items als een andere interne richting nodig hebt, behandel die dan als afzonderlijke acceptatiecriteria. Door de gedocumenteerde beperking van Mermaid kun je er niet op rekenen dat een lokale richtingsinstructie aan beide eisen voldoet. Kies de verbinding die de relatie correct weergeeft en vereenvoudig zo nodig de indeling.

Een handig alternatief is om één algemene richting aan te houden en het diagram in te korten, zodat de verbonden items makkelijk te volgen zijn. Als betekenis op groepsniveau volstaat, keer dan terug naar het eerste voorbeeld. Dit zijn redactionele keuzes over wat het diagram overbrengt, geen garanties voor exacte posities of de route van pijlen.

Breng de oorzaak van het probleem in kaart voordat je het diagram opnieuw opbouwt

Gebruik deze diagnostische stappen om te bepalen wat je hierna kunt proberen. Ze vormen een hulpmiddel bij de besluitvorming op basis van de gedocumenteerde syntaxis en de verschillen tussen renderers, geen lijst met bevestigde fouten.

Waarneming Volgende controle Wat je noteert
De notitie toont de diagramtekst letterlijk Controleer het begin en einde van de codeblokken en schakel vervolgens over naar Reading view Of het blok überhaupt wordt gerenderd
Het minimale voorbeeld geeft een foutmelding Vergelijk het geplakte blok teken voor teken met het voorbeeld De volledige foutmelding
De groepen worden weergegeven, maar de verbinding ontbreekt Test het volledige alternatief met een verbinding tussen items afzonderlijk Welk type eindpunt werkt
De pijl verschijnt, maar de interne richting verandert Bekijk de gedocumenteerde beperking voor de richting bij externe knooppunten Of de verbinding of de indeling nog een probleem vormt
Het voorbeeld werkt totdat er meer inhoud wordt hersteld Maak de laatste toevoeging ongedaan en herhaal alleen die wijziging De kleinste toevoeging die met de fout samenhangt
Dezelfde tekst gedraagt zich elders anders Vergelijk appversies, renderers en weergavemodi De exacte omgevingen en resultaten

Voor een onafhankelijke controle van de syntaxis raadt de documentatie van Obsidian de Live Editor van Mermaid aan. Plak de diagraminhoud daar zonder de omringende Markdown-codeblokken. Als het diagram in de browser goed wordt weergegeven, is dat nuttig vergelijkingsmateriaal, maar het bewijst niet dat het zich in jouw Obsidian-versie hetzelfde gedraagt. Geavanceerde opmaaksyntaxis

Als het resultaat binnen Obsidian nog steeds afwijkt, herhaal de minimale test dan in de desktopkluis Sandbox. Volgens de officiële probleemoplossingsrichtlijnen van Obsidian kun je op desktop Open Help > Sandbox Vault kiezen om een probleem buiten de normale kluisconfiguratie te reproduceren. Ook raadt Obsidian aan communitythema’s en plug-ins bij te werken en opnieuw op te starten voordat je verder onderzoek doet. Over de categorie bugrapporten

Als de test in Sandbox slaagt, onderzoek dan de verschillen in de oorspronkelijke kluis één voor één. Als de test daar ook mislukt, bewaar dan het minimale voorbeeld, de app- en installatieversies, de weergavemodus en het exacte waargenomen resultaat. Zoek voordat je het probleem meldt op het officiële forum naar een bestaand, vergelijkbaar rapport, zoals de richtlijnen van Obsidian voor meldingen vragen. Over de categorie bugrapporten

Sluit af met het kleinste diagram dat de vereiste relatie duidelijk maakt. Gebruik een verbinding tussen containers wanneer de groepen de bedoelde eindpunten zijn; gebruik een verbinding tussen items wanneer de overgang bij specifieke items hoort. Zodra die keuze goed wordt weergegeven in jouw geïnstalleerde Obsidian-versie, kun je geleidelijk meer details toevoegen. Stop zodra het diagram leesbaar blijft.

Bronnen