Maak herbruikbare knooppuntstijlen in elk diagram voor leesbare, consistente Mermaid-stroomdiagrammen in Obsidian op Mac. Behoud je app-thema, controleer welke renderer je geïnstalleerde versie gebruikt en voeg alleen CSS toe die op diagrammen is gericht als je gedeelde standaardinstellingen nodig hebt.

In deze handleiding maak je een klein stroomdiagram met consistente knooppuntvullingen, leesbare labels en één duidelijk gemarkeerde alternatieve stap. Alle labels zijn synthetisch. Het doel is een herbruikbaar stijlpatroon voor gewone notities, met aparte instructies voor de gevallen waarin Mermaid en Obsidians nieuwere Pele-renderer zich verschillend gedragen.

Controleer je geïnstalleerde renderer voordat je instellingen kiest

Zoek je build op onder Settings → About → App → Current version, de locatie die wordt beschreven in Obsidians Help over versies met vroege toegang. Noteer die versie voordat je stijlen gaat oplossen.

Er is een belangrijk onderscheid: de releaseopmerkingen van 22 oktober 2026 voor Obsidian 1.15.0 Desktop, gemarkeerd als Early access, introduceren Pele voor het renderen van Mermaid-diagrammen. Volgens de opmerkingen ondersteunt Pele de syntaxis van Mermaid 12.1.0, gebruikt het themakleuren en lettertypen en genereert het andere SVG-klassen. Die releaseopmerkingen beschrijven die specifieke release; ze geven niet aan welke renderer op je Mac is geïnstalleerd. Zie Obsidian 1.15.0 Desktop.

Gebruik deze beslissingstabel voordat je configuratie uit een andere handleiding kopieert:

Je renderomgeving Begin met Houd rekening met
Obsidian gebruikt Mermaid zelf Flowchartklassen in de bron; eventueel frontmatter voor het diagram Configuratiefuncties zijn afhankelijk van de geïnstalleerde Mermaid-versie.
Obsidian gebruikt Pele Stijlen in de bron; eventueel CSS-variabelen van Pele Mermaid-thema’s en themeVariables-kleuren zijn niet van toepassing.
Een plug-in vervangt de diagramweergave De gedocumenteerde renderer en instellingen van de plug-in Het gedrag van de ingebouwde renderer is onvoldoende om compatibiliteit vast te stellen.

Pele documenteert expliciet zijn eigen indeling en vormgeving, ook wanneer het Mermaid-syntaxis accepteert. De compatibiliteitsdocumentatie vermeldt ook dat de ondersteuning voor configuratie verschilt per diagramtype. Behandel compatibiliteit van syntaxis en identieke visuele uitvoer als afzonderlijke vragen.

Bouw een herbruikbare stijl voor stroomdiagrammen in de notitie

Maak een nieuwe notitie en plak het volledige blok hieronder, inclusief de openings- en sluitingshekken. De documentatie over geavanceerde opmaaksyntaxis van Obsidian schrijft voor diagrammen een omheind codeblok met het label mermaid voor.

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

De gedocumenteerde syntaxis classDef van Mermaid definieert een herbruikbare vormgeving; met class wijs je die toe aan benoemde knooppunten. Hier delen drie knooppunten standard en gebruikt één knooppunt alternate. Houd knooppunt-ID’s gescheiden van zichtbare labels, zodat wijzigingen in de tekst eenvoudig te volgen zijn. Deze mogelijkheden worden beschreven in Stroomdiagrammen — basissyntaxis.

Het kleurenpalet is een illustratieve ontwerpkeuze. Het combineert lichte vullingen met donkere tekst en duidelijkere randen. Het label Option D duidt ook de alternatieve stap aan, zodat de betekenis niet uitsluitend afhangt van de blauwe vulling.

Bekijk de notitie en controleer de labels op de leesgrootte die je normaal gebruikt. Het beoogde resultaat is drie bij elkaar passende grijze knooppunten en één blauw knooppunt. Laat de pijlen in eerste instantie op de standaardinstellingen van de renderer staan; zo kun je wijzigingen één voor één beoordelen.

Als je het patroon wilt hergebruiken, kopieer je het volledige blok naar een andere notitie, wijzig je de labels en verbindingen en werk je de knooppuntlijsten in de laatste twee regels bij. Bewaar één referentiekopie van het kleurenpalet. Dit is een handmatige afspraak: als je de referentie bewerkt, worden diagrammen die elders zijn gekopieerd niet automatisch bijgewerkt.

Pele ondersteunt ook stijlen die in het diagram zijn gedefinieerd. De documentatie legt uit dat kleuren die in de bron zijn gedefinieerd vast blijven wanneer het thema verandert. Daardoor is deze aanpak handig als je een consistent kleurenpalet wilt behouden en tegelijk je Obsidian-thema wilt behouden. Zie Thema’s van Pele.

Gebruik frontmatter voor het diagram alleen als Mermaid het diagram rendert

Als je geïnstalleerde omgeving Mermaid zelf gebruikt en frontmatter voor diagrammen ondersteunt, kun je het algemene kleurenpalet en de typografie van een diagram samen instellen. Mermaid documenteert configuratie via frontmatter vanaf versie 10.5.0. De initialisatie op siteniveau hoort bij de applicatie waarin Mermaid is geïntegreerd; de auteur van een notitie kan in plaats daarvan lokale configuratie voor het diagram gebruiken. Zie Mermaid-configuratie.

Dit volledige alternatief stelt één gedeelde vormgeving in voor alle drie de knooppunten. Test het eerst in een afzonderlijk blok:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

De YAML hoort binnen het mermaid-hek, vóór flowchart TD. Het gaat om diagramconfiguratie, los van de eigenschappen van de notitie bovenaan een Markdown-bestand.

Mermaid geeft aan dat base het aanpasbare thema is en vereist hexadecimale kleuren voor zijn thema-engine. De documentatie over thema-configuratie vermeldt de tekst-, vul-, rand-, lijn- en lettertypevariabelen die hierboven worden gebruikt. Deze instellingen bepalen de vormgeving van het diagram zonder een ander Obsidian-appthema te selecteren.

In Pele levert het wijzigen van de kleuren themeVariables in dit voorbeeld niet hetzelfde resultaat op: die kleuren worden expliciet niet ondersteund. Gebruik klassen die in de bron zijn gedefinieerd voor vaste knooppuntkleuren, of de onderstaande aanpak met CSS-variabelen voor gedeelde standaardinstellingen van de renderer. Vat genegeerde Mermaid-thema-instellingen niet op als een reden om hexadecimale waarden te blijven aanpassen. Zie Compatibiliteit met Pele.

Voeg gedeelde standaardinstellingen voor Pele toe met een klein CSS-fragment

Voor een installatie op basis van Pele bieden CSS-variabelen een andere ondersteunde mogelijkheid. Dit is handig wanneer meerdere diagrammen dezelfde standaardinstellingen moeten gebruiken en je liever één stijlblad wijzigt dan elk blok afzonderlijk.

Het volgende volledige fragment richt zich op Pele-stroomdiagrammen. Het stelt tekst, vullingen, randen en verbindingskleuren in, terwijl de omringende notitie en het applicatiethema ongemoeid blijven. De selector en variabelen worden beschreven in Thema’s van Pele.

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Installeer het via de gedocumenteerde desktopworkflow van Obsidian:

  1. Open Settings.
  2. Selecteer onder Appearance → CSS snippets de optie Open snippets folder.
  3. Maak in die map een bestand met platte tekst dat diagram-defaults.css heet en plak de CSS erin.
  4. Ga terug naar Appearance → CSS snippets en selecteer Reload snippets.
  5. Schakel diagram-defaults in.

Deze bedieningselementen en het automatisch toepassen van opgeslagen wijzigingen in fragmenten worden beschreven in CSS-fragmenten — Obsidian Help. Controleer op Mac of je editor de bestandsnaam met de extensie .css heeft opgeslagen.

Test de gedeelde standaardinstellingen met het diagram met drie knooppunten uit de vorige sectie, maar verwijder de frontmatter van het diagram. Kleuren die in de bron zijn gedefinieerd kunnen standaardinstellingen van de renderer overschrijven. De expliciete knooppuntklassen uit het eerste voorbeeld zijn daarom niet geschikt om te beoordelen of de gedeelde vulvariabelen effect hebben gehad.

Dit fragment gebruikt bewust een vast licht kleurenpalet. Als je een ander kleurenpalet nodig hebt voor je favoriete leesinstellingen, pas dan de tekst, oppervlakken, randen en lijnen samen aan en bekijk daarna het resultaat. De variabele --pele-bg wordt gebruikt voor achtergrondelementen; die garandeert geen ondoorzichtig paneel achter het volledige diagram.

Houd dit fragment specifiek voor Pele. De flowchartdocumentatie van Mermaid raadt classDef aan voor de vormgeving van knooppunten en waarschuwt dat externe CSS het kan afleggen tegen de interne stijlen van Mermaid. Ga er niet van uit dat een stijlblad dat op de ene renderer is gericht ook met de andere werkt. Zie Mermaids richtlijnen voor CSS-klassen.

Stel onleesbare diagrammen op een vaste volgorde bij

Volg deze stappen wanneer een diagram wordt weergegeven, maar de vormgeving niet consistent is. Zo kun je syntaxis, de reikwijdte van stijlen en de beschikbare ruimte afzonderlijk beoordelen zonder je appthema te wijzigen.

  1. Maak de test kleiner. Kopieer het diagram uit de notitie naar een tijdelijke notitie en gebruik drie korte labels. Als ook het kleine voorbeeld niet werkt, onderzoek dan eerst de syntaxis of ondersteuning door de renderer voordat je de kleuren verder verfijnt.
  2. Kies één manier om te stylen. Test alleen bronklassen, alleen Mermaid-frontmatter of alleen Pele-variabelen. Als je ze meteen combineert, is het lastiger te achterhalen wat iets overschrijft.
  3. Controleer kleurcombinaties. Bekijk de tekst tegen de vulling van het knooppunt en daarna de randen en pijlen tegen de omringende notitie. Pas de onleesbare combinatie aan voordat je een nieuw accent toevoegt.
  4. Controleer de leesbreedte. Bekijk het diagram bij de breedte van het deelvenster die je normaal gebruikt. Kort labels in of probeer een verticale indeling als het diagram te breed wordt.
  5. Voeg de complexiteit geleidelijk terug. Voeg de overige knooppunten, alternatieve stijlen en randlabels in kleine groepen toe. Bewaar de laatst leesbare versie om te vergelijken.

Voor de richting geeft Mermaid aan dat TD van boven naar beneden betekent en LR van links naar rechts. Probeer alleen die declaratie te wijzigen voordat je het diagram herschrijft. Zie Richting van stroomdiagrammen.

Beoordeel het eindresultaat in de Obsidian-renderer die je hebt geïnstalleerd. Een externe editor kan helpen bij het controleren van de syntaxis, maar Pele documenteert andere knooppuntposities, tussenruimten en verbindingspaden dan Mermaid. Dezelfde broncode hoeft geen identieke geometrie op te leveren.

Bewaar een klein referentiediagram naast je herbruikbare kleurenpalet. Zodra de labels, knooppunten en verbindingen bij de normale breedte van je deelvenster duidelijk leesbaar zijn, pas je dezelfde afspraken toe op je werknotities. Consistentie komt voort uit een herhaalbare stijl en een bekende grens tussen renderers; je Obsidian-thema kan blijven zoals het is.

Bronnen