Verwende verschachtelte Flowchart-Subgraphs für Container mit Titeln, einschließlich der untergeordneten Blöcke. Wenn leere Container schlecht dargestellt werden, füge in jedem untergeordneten Block einen unsichtbaren Abstandhalter ein. So bleibt die sichtbare Hierarchie erhalten. Prüfe das Ergebnis in deiner installierten Obsidian-Version.

Diese Anleitung erstellt ein neutrales Diagramm: einen äußeren Block mit dem Titel Collection, der Group A und Group B enthält, jeweils mit benannten untergeordneten Containern. Ziel ist es, diese untergeordneten Blöcke wie Container mit Überschriften aussehen zu lassen, statt sie durch gewöhnliche beschriftete Rechtecke zu ersetzen.

Was sollte einen untergeordneten Block mit Titel darstellen?

Stelle jeden sichtbaren Container mit einem subgraph dar, unabhängig davon, ob er einen weiteren inhaltlich relevanten Block enthält. Mermaid dokumentiert Subgraphs, explizite Subgraph-IDs und Verschachtelungen in seinen Flowchart-Beispielen. Eine gewöhnliche Knotendeklaration wie leafA["Block A"] erstellt einen beschrifteten Knoten; sie deklariert keinen Container mit Titel. Siehe Mermaid: Flowcharts — Basic Syntax.

Unterscheide in diesem Beispiel zwischen dem sichtbaren Modell und den Hilfsmitteln für das Layout. Collection, die Gruppen und die untergeordneten Blöcke sind die inhaltlich relevanten Elemente. Ein Abstandhalter ist ein Implementierungsdetail, das einem untergeordneten Container Layout-Inhalt gibt. Durch das Hinzufügen dieses Hilfselements wird die Deklaration des untergeordneten Blocks nicht von einem Subgraph zu einem Knoten.

Diese Unterscheidung steckt auch die Grenzen dieses Ansatzes ab: Das Diagramm zeigt weiterhin untergeordnete Container mit Titeln, doch der Quelltext enthält gewöhnliche Hilfsknoten. Wenn deine Anforderung jede Knotendeklaration verbietet, einschließlich unsichtbarer Hilfsknoten, erfüllt diese Behelfslösung die strengere Vorgabe nicht.

Prüfen, welchen Renderer deine Mac-Installation verwendet

Öffne in Obsidian über die Seitenleiste Settings, wähle dann General aus und notiere die App-Version. In Obsidian wird General in der Dokumentation zu den Einstellungen als Ort der Versionsangabe genannt. Verwende diese Version, um die passenden Versionshinweise auszuwählen.

Es gibt einen wichtigen Unterschied zwischen den Renderern. In den offiziellen Versionshinweisen vom 22. Oktober 2026 wird Desktop 1.15.0 als Early Access bezeichnet. Dort steht, dass Mermaid-Syntax mit Obsidian’s Pele-Bibliothek gerendert wird und die Mermaid-Syntax 12.1.0 unterstützt. Dieselbe Version ändert auch die generierten Diagrammklassen in Pele-Klassen. Gehe nicht davon aus, dass eine ältere Installation Pele verwendet oder dass Kompatibilität eine identische Ausgabe wie bei Mermaid.js bedeutet. Siehe Obsidian 1.15.0 Desktop (Early access).

In der für diese Anleitung abgerufenen Mermaid-Dokumentation wird Version 12.2.0 angezeigt. Das ist eine andere Version als die in diesen Obsidian-Versionshinweisen genannte Kompatibilitätsstufe. Behandle die Dokumentation, einen Online-Editor und deine installierte Anwendung als separate Umgebungen, bis du dasselbe Beispiel in jeder davon geprüft hast.

Halte das Diagramm beim ersten Versuch frei von renderer-spezifischer Konfiguration und externen Stylesheet-Selektoren. Das folgende Beispiel verwendet Subgraphs und diagramminterne Formatierung. Es bietet einen kleinen Ausgangspunkt, um die Darstellung in deiner Installation zu prüfen.

Die verschachtelten Container in einer Obsidian-Notiz erstellen

Öffne eine Notiz in der Bearbeitungsansicht und füge den vollständigen Block unten ein, einschließlich der öffnenden und schließenden Code-Zäune. Obsidian dokumentiert Mermaid-Diagramme als umzäunte Codeblöcke mit der Sprachkennung mermaid. Für dieses dokumentierte Notizformat ist kein zusätzliches Diagramm-Plugin erforderlich. Siehe Erweiterte Formatierungssyntax.

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

Drücke Cmd+E, um zwischen der Bearbeitungsansicht und der Reading view zu wechseln. Prüfe das fertige Diagramm in der Leseansicht, damit der Bearbeitungscursor nicht den Quelltext sichtbar macht. Diese Steuerelemente sind in Obsidian unter Ansichten und Bearbeitungsmodus dokumentiert.

Das erwartete Ergebnis zeigt sechs Container mit Titeln: eine Collection, zwei Gruppen und drei untergeordnete Blöcke. Jeder untergeordnete Block enthält ein Hilfselement, dessen Beschriftung aus einem einzelnen Leerzeichen besteht. Die Klasse spacer fordert transparente Füllung, Umrandung und Text an. Das verbindet den dokumentierten Klassenmechanismus von Mermaid mit einer Layout-Behelfslösung. Mermaid dokumentiert classDef und die Klassenzuweisung in der Referenz zur Flowchart-Formatierung.

Das Beispiel wurde anhand der dokumentierten Syntax geprüft, aber für diesen Artikel nicht in einer Mac-Obsidian-Sitzung gerendert. Die Abnahme erfolgt daher visuell in deiner lokalen Umgebung: Alle sechs Titel sollten erscheinen, jede Gruppe sollte ihre zugeordneten untergeordneten Blöcke enthalten und kein Abstandhalter-Rechteck sollte sichtbar sein. Genaue Abstände und Positionen nebeneinander sind keine Abnahmekriterien.

Beschriftungen ändern, ohne die Hierarchie zu ändern

Beginne damit, nur die Titel in Anführungszeichen zu ändern. Achte darauf, dass collection, groupA, blockA und die anderen IDs eindeutig bleiben. So kannst du die bearbeitete Version leichter mit dem Ausgangsbeispiel vergleichen.

Um einen weiteren untergeordneten Block hinzuzufügen, kopiere einen vollständigen Subgraph für einen solchen Block, gib sowohl seinem Subgraph als auch dem Abstandhalter neue IDs und ergänze die neue Abstandhalter-ID in der abschließenden Klassenzuweisung. Füge ihn vor dem end der umschließenden Gruppe ein. Ein vierter untergeordneter Block in Group B gehört beispielsweise neben blockC innerhalb von groupB.

Lies die schließenden Anweisungen von innen nach außen: Schließe den untergeordneten Block, dann seine Gruppe und anschließend die Collection. Einrückungen machen diese Struktur beim Bearbeiten sichtbar, aber dein Quelltext muss die Position jedes end korrekt ausdrücken.

Warum Abstandhalter statt leerer Subgraphs verwenden?

Das Verhalten leerer Container war je nach Renderer und Version unterschiedlich. Der Mermaid-Issue-Bericht 5402 beschreibt, dass ein leerer Subgraph mit ELK in Mermaid 10.8.0 fehlschlägt, während das mitgelieferte Dagre-Beispiel funktioniert. Das ist ein historischer Bericht über eine bestimmte Konfiguration und kein Beleg dafür, dass jeder aktuelle Renderer leere Subgraphs ablehnt. Siehe Elk-Renderer funktioniert nicht mit leerem Subgraph.

Daraus lässt sich praktisch ableiten, dass sich ein Diagramm für eine nicht näher bestimmte Installation nicht ausschließlich auf das Verhalten leerer Container stützen sollte. Der Abstandhalter-Ansatz gibt jedem untergeordneten Block expliziten Inhalt, während der aussagekräftige Titel auf dem Subgraph bleibt.

Nutze diese Entscheidungshilfe, um festzulegen, wie strikt dein Quelltext sein muss:

Anforderung Ausgangsansatz Was zu prüfen ist
Sichtbare untergeordnete Blöcke müssen Container mit Titeln bleiben Verschachtelte Subgraphs mit transparenten Abstandhaltern Titel, Containment und verborgene Hilfselemente
Der Quelltext darf keine Hilfsknoten enthalten Leere Subgraphs für untergeordnete Blöcke im Ziel-Renderer ausprobieren Ob jeder leere Block akzeptabel gerendert wird
Untergeordnete Blöcke werden später echte Elemente enthalten Subgraphs der untergeordneten Blöcke beibehalten und Abstandhalter ersetzen Nur nicht mehr benötigte Hilfselemente entfernen
Blöcke benötigen eine gezielte Platzierung in Spalten Mermaid-Blockdiagramme separat prüfen Unterstützung in der installierten Version und Darstellung der Titel

Mermaids spezielle Dokumentation zu Blockdiagrammen beschreibt zusammengesetzte Blöcke, Spalten und explizite Abstände. Diese Funktionen sind eine Prüfung wert, wenn die Platzierung im Mittelpunkt steht. Für sich allein belegen sie jedoch nicht, dass eine Umwandlung genau diese Darstellung von Containern mit Titeln beibehält. Siehe Dokumentation zu Blockdiagrammen.

Ein unerwartetes Ergebnis untersuchen

Ändere immer nur eine Sache auf einmal. Bewahre eine Kopie des vollständigen Ausgangsbeispiels in einer separaten Notiz auf, damit du einen Renderer-Unterschied von einem Bearbeitungsfehler unterscheiden kannst.

  1. Die Notiz zeigt Code statt eines Diagramms. Prüfe, ob der öffnende Code-Zaun mermaid verwendet, und wechsle dann zur Reading view. Vergleiche den Code-Zaun mit Obsidian’s dokumentiertem Diagrammformat.
  2. Ein untergeordneter Block sieht wie ein gewöhnliches beschriftetes Rechteck aus. Prüfe seine Deklaration. Sie sollte mit subgraph beginnen, und der Abstandhalter sollte in einer eigenen Zeile darin stehen.
  3. In einem untergeordneten Block bleibt ein kleines Rechteck sichtbar. Vergleiche die ID des Abstandhalters mit der abschließenden Anweisung class. Entferne vorübergehend die Formatierung, um herauszufinden, welches Hilfselement sichtbar ist, und stelle sie anschließend wieder her.
  4. Ein Block erscheint in der falschen Gruppe. Prüfe die Reihenfolge der schließenden end-Anweisungen, bevor du die Layouteinstellungen anpasst.
  5. Das Diagramm funktioniert online, sieht in Obsidian aber anders aus. Vergleiche die Versionshinweise der installierten App mit der Version des Online-Renderers. Verwende das funktionierende lokale Beispiel als Referenz.

Containment erhalten, bevor die Platzierung angepasst wird

Sobald die Titel und das Containment stimmen, prüfe, ob die Anordnung gut lesbar ist. Ersetze einen Subgraph eines untergeordneten Blocks nicht durch einen Knoten, nur um sein Rechteck zu verkleinern: Damit würdest du die Darstellung ändern, die erhalten bleiben soll.

Füge außerdem nur dann Verbindungslinien hinzu, wenn das Diagramm eine Beziehung über das Containment hinaus darstellen soll. Mermaid dokumentiert eine Einschränkung der Richtung: Wird ein Knoten innerhalb eines Subgraphs mit einem Knoten außerhalb verknüpft, übernimmt dieser Subgraph die Richtung seines übergeordneten Elements. Prüfe das Layout nach dem Hinzufügen solcher Kanten erneut. Siehe Richtung in Subgraphs.

Prüfe die Notiz zum Schluss bei der Breite, mit der du sie normalerweise liest. Behalte die Version, die die Collection, ihre Gruppen und deren untergeordnete Blöcke mit Titeln deutlich zeigt. Das Ergebnis sollte eine gut lesbare Containment-Hierarchie sein, deren untergeordnete Blöcke Subgraphs bleiben und deren unsichtbare Layouthilfen klar gekennzeichnet und später leicht zu entfernen sind.

Quellen