Gebruik geneste flowchart-subgrafieken voor getitelde containers, inclusief de bladblokken. Wanneer lege containers slecht worden weergegeven, voeg dan een onzichtbare spacer toe binnen elke bladcontainer. Dit behoudt de zichtbare hiërarchie; controleer het resultaat in uw geïnstalleerde Obsidian-renderer.

Deze handleiding bouwt één neutraal diagram: een outer blok getiteld Collection, dat Group A en Group B bevat, met getitelde bladcontainers in elke groep. De taak is om die bladen er als containers met koppen uit te laten zien, in plaats van ze te vervangen door gewone gelabelde rechthoeken.

Wat moet een getiteld bladblok vertegenwoordigen?

Representeer elke zichtbare container met een subgraph, ongeacht of het een ander betekenisvol blok bevat. Mermaid documenteert subgrafieken, expliciete subgrafiek-ID's en nesting in zijn flowchart-voorbeelden. Een gewone knoopdeclaratie zoals leafA["Block A"] creëert een gelabelde knoop; het declareert geen getitelde container. Zie Mermaid's Flowcharts — Basic Syntax.

Voor dit voorbeeld onderscheiden we het zichtbare model van de lay-outhulp. Collection, de groepen en de bladblokken zijn de betekenisvolle elementen. Een spacer is een implementatiedetail dat gebruikt wordt om een bladcontainer inhoud te geven voor de lay-out. Het toevoegen van die helper verandert de declaratie van de bladcontainer niet van een subgrafiek naar een knoop.

Die onderscheid stelt ook de grens van deze aanpak vast: het produceert een diagram waarvan de zichtbare bladen getitelde containers blijven, maar de bron bevat wel gewone helper-knooppen. Als uw vereiste elke knoopdeclaratie verbiedt, inclusief onzichtbare helpers, dan voldoedt deze workaround niet aan die strengere vereiste.

Controleer welke renderer uw Mac-installatie gebruikt

Open in Obsidian Instellingen via de zijbalk, selecteer Algemeen en noteer de app-versie. Obsidian's Instellingen-documentatie identificeert Algemeen als de locatie voor versie-informatie. Gebruik die versie bij het kiezen van de relevante release notes.

Er is een belangrijke renderer-grens. De officiële release notes van 22 oktober 2026 labelen Desktop 1.15.0 als vroege toegang en geven aan dat het Mermaid-syntaxis rendert via de Pele-bibliotheek van Obsidian, met compatibiliteit voor Mermaid 12.1.0 syntaxis. De release wijzigt de gegenereerde diagramklassen naar die van Pele. Ga niet ervan uit dat een oudere installatie Pele gebruikt, of dat compatibiliteit identieke output betekent als Mermaid.js. Zie Obsidian 1.15.0 Desktop (Early access).

De Mermaid-documentatie die voor deze handleiding is opgehaald, toont versie 12.2.0. Dat is een aparte versie van het compatibiliteitsniveau dat in de Obsidian release notes genoemd wordt. Behandel de documentatie, een online editor en uw geïnstalleerde applicatie als afzonderlijke omgevingen totdat u hetzelfde voorbeeld in elk van hen heeft gecontroleerd.

Voor de eerste poging houdt u het diagram vrij van renderer-specifieke configuratie en externe stylesheet-selectors. Het onderstaande voorbeeld gebruikt subgrafieken en diagram-lokale styling, wat u een klein startpunt geeft voor het controleren van uw eigen installatie.

Bouw de geneste containers in een Obsidian-notitie

Open een notitie in de bewerkweergave en plak het complete blok hieronder, inclusief de open- en sluithekjes. Obsidian documenteert Mermaid-diagrammen als afgebakende codeblokken met de taal-identifier mermaid. Geen additionele diagram-plugin is vereist voor die gedocumenteerde notitie-indeling. Zie Geavanceerde opmaaksyntaxis.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Druk op Cmd+E om te schakelen tussen bewerken en Leesweergave. Gebruik de leesweergave om het voltooide diagram te inspecteren zonder dat de bewerkcursor de bron onthult. Deze bedieningselementen zijn gedocumenteerd in Obsidian's Weergaven en bewerkmodus.

De beoogde uitkomst heeft zes zichtbare getitelde containers: één verzameling, twee groepen en drie bladblokken. Elke bladcontainer bevat een helper wiens label een enkele spatie is. De spacer klasse vraagt transparante vulling, rand en tekst. Dit combineert Mermaid's gedocumenteerde klassemechanisme met een layout-workaround; Mermaid documenteert classDef en klasseteken in zijn flowchart styling referentie.

Het voorbeeld is geïnspecteerd tegen de gedocumenteerde syntaxis; het is voor dit artikel niet gerenderd in een Mac Obsidian-sessie. De acceptatietest is daarom visueel en lokaal: alle zes titels zouden moeten verschijnen, elke groep zou de toegewezen bladen moeten bevatten, en geen spacer-rechthoek zou zichtbaar moeten zijn. Exacte afstand en broederposities zijn geen acceptatiecriteria.

Labels wijzigen zonder de hiërarchie te veranderen

Begin met het wijzigen van alleen de aangehaakte titels. Houd collection, groupA, blockA en de andere ID's uniek. Dit maakt het gemakkelijker om de bewerkte versie te vergelijken met het startvoorbeeld.

Om een ander blad toe te voegen, kopieer een complete blad-subgrafiek, geef zowel de subgrafiek als de spacer verse ID's, en voeg de nieuwe spacer-ID toe aan de finale klasseteken. Plaats het vóór de end van de omsluitende groep. Een vierde blad binnen Group B hoort bijvoorbeeld naast blockC, binnen groupB.

Lees de sluitinstructies van binnen naar buiten: sluit het blad, sluit de groep, sluit dan de verzameling. Inspringing maakt die structuur zichtbaar tijdens het bewerken, maar de plaatsing van elke end is wat uw bron correct moet uitdrukken.

Waarom spacers in plaats van lege subgrafieken?

Het gedrag van lege containers is per renderer en versie verschillend. Mermaid issue 5402 rapporteert een lege subgrafiek die mislukt met ELK in Mermaid 10.8.0, terwijl het meegeleverde Dagre-voorbeeld wel werkt. Dat is een historisch rapport over een specifieke opstelling, geen bewijs dat elke huidige renderer lege subgrafieken afwijst. Zie Elk renderer not wokring on empty subgraph.

De praktische inferentie is om te vermijden dat het gedrag van lege containers de enige fundering is van een diagram bedoeld voor een ongespecificeerde installatie. De spacer-aanpak geeft elk blad expliciete inhoud terwijl de betekenisvolle titel op de subgrafiek blijft.

Gebruik deze beslissingshulp bij het kiezen hoe strikt uw bron moet zijn:

Vereiste Startaanpak Wat te controleren
Zichtbare bladen moeten getitelde containers blijven Geneste subgrafieken met transparante spacers Titels, insluiting, en verborgen helpers
Bron mag geen helper-knooppen bevatten Probeer lege blad-subgrafieken in de doelrenderer Of elke lege blad acceptabel rendert
Bladblokken zullen later echte items bevatten Houd de blad-subgrafieken en vervang hun spacers Verwijder alleen de helpers die niet meer nodig zijn
Blokken hebben bewuste kolomplaatsing nodig Evalueer Mermaid blokdiagrammen apart Geïnstalleerde syntaxis-ondersteuning en titelpresentatie

Mermaid's speciale blokdiagram-documentatie beschrijft samengestelde blokken, kolommen en expliciete spacing. Die functies zijn de moeite waard om te evalueren wanneer plaatsing de hoofptaak is. Zij stellen niet, op zich, vast dat een conversie deze exacte getitelde-containerpresentatie zal behouden. Zie Block Diagrams Documentation.

Diagnosticeren van een resultaat dat er verkeerd uitziet

Verander telkens één ding. Houd een kopie van het complete startvoorbeeld in een aparte notitie zodat u een renderer-verschil kunt onderscheiden van een bewerkfout.

  1. De notitie toont code in plaats van een diagram. Controleer of de openende hek mermaid gebruikt, schakel dan over naar Leesweergave. Vergelijk de hek met Obsidian's gedocumenteerde diagramformaat.
  2. Een blad ziet er uit als een gewone gelabelde rechthoek. Inspecteer de declaratie. Het zou moeten beginnen met subgraph, met de spacer op een aparte regel erbinnen.
  3. Een kleine rechthoek blijft zichtbaar binnen een blad. Maak de spacer-ID gelijk aan de finale class instructie. Verwijder tijdelijk de styling om te identificeren welke helper u ziet, herstel deze daarna.
  4. Een blok verschijnt in de verkeerde groep. Controleer de volgorde van de sluitende end instructies voordat u lay-outinstellingen aanpast.
  5. Het diagram werkt online maar verschilt in Obsidian. Vergelijk de release notes van de geïnstalleerde app met de versie van de online renderer. Houd het werkende lokale voorbeeld als referentie.

Behoud insluiting voordat u plaatsing aanpast

Eenmaal de titels en insluiting correct zijn, beslis of de indeling leesbaar genoeg is. Vervang geen blad-subgrafiek door een knoop slechts om de rechthoek kleiner te maken: die bewerking verandert de representatie die u wou behouden.

Evenzo, voeg connectors alleen toe wanneer het diagram een relatie nodig heeft buiten insluiting. Mermaid documenteert een richtingsbeperking: het koppelen van een knoop binnen een subgrafiek naar de buitenkant zorgt ervoor dat die subgrafiek de richting van zijn ouder overneemt. Controleer de lay-out na het toevoegen van zulke randen. Zie Direction in subgraphs.

Eindig met het inspecteren van de notitie op de breedte waar u het normaal leest. Houd de versie die de verzameling, zijn groepen en hun getitelde bladen duidelijk toont. Het nuttige resultaat is een leesbare insluitingshiërarchie wiens bladblokken subgrafieken blijven, met eventuele onzichtbare lay-outhelpers expliciet begrepen en later gemakkelijk te verwijderen.

Bronnen