Für gut lesbare, einheitliche Mermaid-Flussdiagramme in Obsidian auf dem Mac definierst du wiederverwendbare Knotenstile direkt im jeweiligen Diagramm. Behalte dein App-Theme bei, prüfe, welcher Renderer in deiner installierten Version verwendet wird, und füge CSS nur für diagrammspezifische gemeinsame Standardwerte hinzu, wenn du sie brauchst.

Diese Anleitung erstellt ein kleines Flussdiagramm mit einheitlichen Knotenfüllungen, gut lesbaren Beschriftungen und einem eindeutig gekennzeichneten alternativen Schritt. Alle Beschriftungen sind synthetisch. Ziel ist ein wiederverwendbares Styling-Muster für gewöhnliche Notizen, mit gesonderten Hinweisen zu den unterschiedlichen Verhaltensweisen von Mermaid und Obsidians neuerem Pele-Renderer.

Prüfe den installierten Renderer, bevor du Einstellungen auswählst

Finde deine Build-Version unter Settings → About → App → Current version. Dieser Pfad ist in Obsidians Hilfe zu Early-Access-Versionen dokumentiert. Notiere die Version, bevor du Stile untersuchst.

Es gibt eine wichtige Grenze: Die Versionshinweise vom 22. Oktober 2026 zu Obsidian 1.15.0 Desktop, gekennzeichnet als Early Access, führen Pele zum Rendern von Mermaid-Diagrammen ein. Laut den Hinweisen unterstützt Pele die Mermaid-12.1.0-Syntax, verwendet Theme-Farben und -Schriftarten und erzeugt andere SVG-Klassen. Diese Versionshinweise beschreiben diese konkrete Version. Sie belegen nicht, welcher Renderer auf deinem Mac installiert ist. Siehe Obsidian 1.15.0 Desktop.

Verwende diese Entscheidungstabelle, bevor du Konfigurationen aus einer anderen Anleitung kopierst:

Deine Rendering-Umgebung Beginne mit Zu beachten
Obsidian verwendet Mermaid selbst Flussdiagrammklassen im Quelltext; optional Diagramm-Frontmatter Verfügbare Konfigurationsfunktionen hängen von der installierten Mermaid-Version ab.
Obsidian verwendet Pele Stile im Quelltext; optional CSS-Variablen von Pele Mermaid-Themes und themeVariables-Farben werden nicht angewendet.
Ein Plugin ersetzt das Rendern von Diagrammen Der dokumentierte Renderer und die Einstellungen des Plugins Das Verhalten des integrierten Renderers reicht nicht aus, um die Kompatibilität festzustellen.

Pele dokumentiert ausdrücklich sein eigenes Layout und Erscheinungsbild, auch wenn es Mermaid-Syntax akzeptiert. In der Kompatibilitätsdokumentation steht außerdem, dass die Konfigurationsunterstützung je nach Diagrammtyp variiert. Betrachte Syntaxkompatibilität und identische visuelle Ausgabe als zwei getrennte Fragen.

Erstelle einen wiederverwendbaren Flussdiagrammstil in der Notiz

Erstelle eine neue Notiz und füge den folgenden vollständigen Block einschließlich der öffnenden und schließenden Begrenzungszeichen ein. Obsidians Dokumentation zur erweiterten Formatierungssyntax legt für Diagramme einen abgegrenzten Codeblock mit der Kennzeichnung mermaid fest.

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

Die dokumentierte Mermaid-Syntax classDef definiert ein wiederverwendbares Erscheinungsbild; class weist es benannten Knoten zu. Hier teilen sich drei Knoten standard, und einer verwendet alternate. Halte Knotenkennungen und sichtbare Beschriftungen getrennt, damit sich Textänderungen leicht nachverfolgen lassen. Diese Mechanismen sind unter Flussdiagramme — Grundsyntax beschrieben.

Die Farbpalette ist eine beispielhafte Gestaltungsentscheidung. Sie kombiniert helle Füllungen mit dunklem Text und kräftigeren Rändern. Die Beschriftung Option D kennzeichnet den alternativen Schritt ebenfalls, sodass seine Bedeutung nicht allein von einer blauen Füllung abhängt.

Zeige eine Vorschau der Notiz an und prüfe die Beschriftungen bei deiner üblichen Lesegröße. Das gewünschte Ergebnis sind drei übereinstimmende graue Knoten und ein blauer Knoten. Lass die Pfeile zunächst bei den Standardwerten des Renderers. So lässt sich jede Änderung leichter einzeln beurteilen.

Um das Muster wiederzuverwenden, kopiere den gesamten Block in eine andere Notiz, ändere die Beschriftungen und Verbindungen und passe die Knotenlisten in den letzten beiden Zeilen an. Bewahre eine Referenzkopie der Farbpalette auf. Das ist eine manuelle Konvention: Wenn du die Referenz bearbeitest, werden Diagramme, die du bereits an anderen Stellen kopiert hast, nicht automatisch aktualisiert.

Pele unterstützt ebenfalls im Diagramm definierte Stile. Die Dokumentation erklärt, dass im Quelltext definierte Farben gleich bleiben, wenn sich das Theme ändert. Das ist nützlich, wenn du eine einheitliche Palette möchtest und dein Obsidian-Theme beibehalten willst. Siehe Pele-Theming.

Verwende Diagramm-Frontmatter nur, wenn Mermaid das Diagramm rendert

Wenn in deiner installierten Umgebung Mermaid selbst verwendet wird und Diagramm-Frontmatter unterstützt, kannst du die Gesamtpalette und Typografie eines Diagramms gemeinsam festlegen. Mermaid dokumentiert die Frontmatter-Konfiguration ab Version 10.5.0. Die Initialisierung auf Website-Ebene erfolgt durch die integrierende Anwendung; Autorinnen und Autoren von Notizen können stattdessen eine lokale Diagrammkonfiguration verwenden. Siehe Mermaid-Konfiguration.

Diese vollständige Alternative legt ein gemeinsames Erscheinungsbild für alle drei Knoten fest. Verwende sie zunächst in einem separaten Testblock:

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

Das YAML gehört in den mermaid-Begrenzungsblock, vor flowchart TD. Es handelt sich um Diagrammkonfiguration, getrennt von den Eigenschaften der Notiz am Anfang einer Markdown-Datei.

Mermaid nennt base als anpassbares Theme und verlangt für seine Theming-Engine Hexadezimalfarben. Die Dokumentation zur Theme-Konfiguration führt die oben verwendeten Variablen für Text, Füllung, Ränder, Linien und Schriftarten auf. Diese Einstellungen legen das Erscheinungsbild des Diagramms fest, ohne ein anderes Obsidian-App-Theme auszuwählen.

Bei Pele führt eine Änderung der Farben für themeVariables in diesem Beispiel nicht zum gleichen Ergebnis: Diese Farben werden ausdrücklich nicht unterstützt. Verwende im Quelltext definierte Klassen für feste Knotenfarben oder den folgenden Ansatz mit CSS-Variablen für gemeinsame Standardwerte des Renderers. Wenn Mermaid-Theme-Einstellungen ignoriert werden, ist das kein Grund, weiter Hexadezimalwerte anzupassen. Siehe Pele-Kompatibilität.

Ergänze gemeinsame Pele-Standardwerte mit einem kleinen CSS-Snippet

Bei einer Installation mit Pele bieten CSS-Variablen eine weitere unterstützte Möglichkeit. Das ist nützlich, wenn mehrere Diagramme dieselben Standardwerte verwenden sollen und du lieber ein Stylesheet änderst, statt jeden Block zu bearbeiten.

Das folgende vollständige Snippet gilt für Pele-Flussdiagramme. Es legt Text-, Füll-, Rand- und Verbindungslinienfarben fest, ohne die umgebende Notiz oder das App-Theme anzutasten. Selektor und Variablen sind unter Pele-Theming dokumentiert.

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

Füge es über den dokumentierten Desktop-Ablauf von Obsidian hinzu:

  1. Öffne Settings.
  2. Wähle unter Appearance → CSS snippets die Option Open snippets folder.
  3. Erstelle in diesem Ordner eine reine Textdatei namens diagram-defaults.css und füge das CSS ein.
  4. Kehre zu Appearance → CSS snippets zurück und wähle Reload snippets.
  5. Aktiviere diagram-defaults.

Diese Steuerelemente und die automatische Anwendung gespeicherter Snippet-Änderungen sind in CSS-Snippets — Obsidian-Hilfe dokumentiert. Prüfe auf dem Mac, ob dein Editor die Datei mit der Erweiterung .css gespeichert hat.

Teste die gemeinsamen Standardwerte mit dem Drei-Knoten-Diagramm aus dem vorherigen Abschnitt und entferne dessen Diagramm-Frontmatter. Im Quelltext definierte Farben können die Standardwerte des Renderers überschreiben. Daher eignen sich die expliziten Knotenklassen aus dem ersten Beispiel nicht, um zu beurteilen, ob die gemeinsamen Füllvariablen wirksam sind.

Dieses Snippet verwendet bewusst eine feste helle Palette. Wenn du für deine bevorzugte Leseumgebung eine andere Palette brauchst, ändere Text-, Flächen-, Rand- und Linienfarben gemeinsam und prüfe anschließend das Ergebnis. Die Variable --pele-bg gilt für Hintergrundelemente; sie garantiert keine deckende Fläche hinter dem gesamten Diagramm.

Beschränke dieses Snippet auf Pele. Die Mermaid-Dokumentation zu Flussdiagrammen empfiehlt classDef für Knotenstile und warnt, dass externes CSS gegenüber den internen Stilen von Mermaid unterliegen kann. Gehe nicht davon aus, dass ein Stylesheet für einen Renderer auch mit dem anderen funktioniert. Siehe Hinweise von Mermaid zu CSS-Klassen.

Unleserliche Diagramme systematisch untersuchen

Gehe bei einem Diagramm, das zwar gerendert wird, aber uneinheitlich aussieht, wie folgt vor. So kannst du Syntax, Geltungsbereich der Stile und verfügbaren Platz getrennt prüfen, ohne dein App-Theme zu ändern.

  1. Reduziere den Test. Kopiere das Diagramm der Notiz in eine temporäre Notiz und beschränke dich auf drei kurze Beschriftungen. Wenn auch das kleine Beispiel fehlschlägt, untersuche zuerst die Syntax oder Rendererunterstützung, bevor du die Farben verfeinerst.
  2. Verwende jeweils nur einen Stilmechanismus. Teste nur Quelltextklassen, nur Mermaid-Frontmatter oder nur Pele-Variablen. Wenn du sie sofort kombinierst, lassen sich Überschreibungen schwerer erkennen.
  3. Prüfe zusammengehörige Farben. Prüfe den Text auf der Knotenfüllung und anschließend Ränder und Pfeile im Kontrast zur umgebenden Notiz. Korrigiere unleserliche Farbkombinationen, bevor du einen weiteren Akzent hinzufügst.
  4. Prüfe die verfügbare Breite. Zeige das Diagramm in der normalerweise verwendeten Fensterbreite an. Kürze Beschriftungen oder probiere eine vertikale Anordnung aus, wenn das Diagramm zu breit wird.
  5. Füge schrittweise mehr Komplexität hinzu. Ergänze die übrigen Knoten, alternativen Stile und Kantenbeschriftungen in kleinen Gruppen. Bewahre die letzte gut lesbare Version zum Vergleich auf.

Für die Richtungsprüfung dokumentiert Mermaid TD für oben nach unten und LR für links nach rechts. Ändere zunächst nur diese Deklaration, bevor du das Diagramm umschreibst. Siehe Flussdiagramm-Richtung.

Beurteile das Endergebnis im installierten Obsidian-Renderer. Ein externer Editor kann bei der Syntaxprüfung helfen, doch Pele dokumentiert andere Knotenpositionen, Abstände und Kantenverläufe als Mermaid. Derselbe Quelltext muss nicht dieselbe Geometrie ergeben.

Bewahre neben deiner wiederverwendbaren Farbpalette ein kleines Referenzdiagramm auf. Wenn Beschriftungen, Knoten und Verbindungen bei deiner üblichen Fensterbreite gut lesbar sind, übernimm dieselbe Konvention in deine Arbeitsnotizen. Einheitlichkeit entsteht durch einen wiederholbaren Stil und klare Kenntnisse der Renderergrenzen; dein Obsidian-Theme kann bleiben, wie es ist.

Quellen