Um Mermaid-Knoten bei Änderungen an Verbindungen in festen Zeilen zu halten, verwende ein Blockdiagramm mit expliziten Spalten, sofern dein Renderer dies unterstützt. Prüfe in Obsidian auf dem Mac zuerst den installierten Renderer: Flowchart-Subgraphs können dieses Layout nicht zuverlässig erzwingen.

Diese Anleitung behandelt eine konkrete Aufgabe: sechs neutrale Knoten in zwei horizontalen Zeilen anzuordnen und dabei die Verbindungen zwischen einzelnen Knoten beizubehalten. Entscheide separat, ob du ausgerichtete Kästchen, rechtwinklige Knicke der Verbindungslinien oder beides benötigst. Ein zufriedenstellendes Ergebnis für eine Anforderung kann die andere dennoch verfehlen.

Warum bringen Querverbindungen Flowchart-Zeilen durcheinander?

Mermaid dokumentiert eine konkrete Einschränkung bei Flowcharts: Wenn ein Knoten innerhalb eines Subgraphs mit einem Knoten außerhalb dieses Subgraphs verbunden ist, wird die lokale Richtung ignoriert und die Richtung des übergeordneten Graphen übernommen. Daher kann sich die Anordnung einer mit direction LR deklarierten Zeile innerhalb eines flowchart TB ändern, sobald eine externe Verbindung hinzugefügt wird. Siehe die offizielle Einschränkung der Subgraph-Richtung.

Diese vollständige illustrative Notiz enthält diese Bedingung. Ihre zwei internen Verbindungen lassen horizontale Zeilen erwarten, doch A --> D überschreitet die Subgraph-Grenze:

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid unterstützt auch Verbindungen zu Subgraph-IDs. Stattdessen RowOne mit RowTwo zu verbinden, kann vermeiden, auf ihre internen Knoten zu verweisen, ändert jedoch die Bedeutung der Beziehung: Es werden Gruppen statt Alpha und Delta verbunden. Verwende diese Option nur, wenn die Gruppenbeziehung zutrifft. Unsichtbare Verbindungen wie A ~~~ B sind dokumentierte Hilfsmittel zur Positionierung, aber kein dokumentierter Mechanismus zum Fixieren von Zeilen. Flowcharts Syntax

Behalte für diese Aufgabe die einzelnen Endpunkte bei. Eine erforderliche Knotenverbindung durch eine Gruppenverbindung zu ersetzen, würde die Zeichnung auf Kosten der zu vermittelnden Information aufräumen.

Prüfe, welchen Renderer dein Mac tatsächlich verwendet

Öffne in Obsidian Settings, dann General, und notiere die aktuelle App-Version. Die aktuelle Dokumentation verortet dort Versionsinformationen und die Schaltfläche Read the changelog. Lies die Versionshinweise zu deiner installierten Version, bevor du Anweisungen übernimmst, die für einen anderen Build geschrieben wurden. Settings — Obsidian Help

Es gibt eine wichtige Versionsgrenze: Obsidian 1.15.0 Desktop Early Access, veröffentlicht am 22. Oktober 2026, führt Pele für die Diagramm-Wiedergabe ein und beschreibt die Kompatibilität mit der Mermaid-12.1.0-Syntax. Aus dieser Ankündigung geht nicht hervor, welchen Renderer eine früher installierte Version verwendet. Versionshinweise zu Obsidian 1.15.0 Desktop

Pele dokumentiert eine eigene Layout-Engine mit Knotenpositionen, Abständen und Kantenverläufen, die sich von Mermaid unterscheiden. Die Kompatibilitätsliste umfasst sowohl block als auch block-beta. Daher reicht die Syntaxkompatibilität allein nicht als Beleg dafür aus, dass ein Obsidian-Diagramm genauso aussieht wie eine Mermaid-Wiedergabe aus dem Upstream-Projekt. Pele-Kompatibilität

Auch Mermaid selbst hat sich weiterentwickelt: In der Layout-Dokumentation steht, dass ELK in Version 12.0.0 integriert und zur Standardeinstellung für Flowcharts wurde; zuvor musste der Host das separate ELK-Paket installieren und registrieren. Die Empfehlung, layout: elk auszuwählen, muss daher vom Renderer und seiner Version abhängig bleiben. Mermaid-Layouts

Für einen aussagekräftigen Vergleich solltest du drei Dinge zusammenhalten: den exakten Diagrammquelltext, die Obsidian-App-Version und die Wiedergabeumgebung. Ändere immer nur eine Sache auf einmal. Wenn du unterschiedlichen Quelltext in verschiedenen Renderern vergleichst, lässt sich nicht feststellen, warum sich die Zeilen verschoben haben.

Verwende ein Blockdiagramm für eine explizite Zeilenanordnung

Mermaids Blockdiagramme ermöglichen eine vom Autor gesteuerte Anordnung über Spalten. Blöcke füllen die angegebenen Spalten und werden in nachfolgende Zeilen umgebrochen; space reserviert leere Zellen. Damit sind sie der von Mermaid unterstützte Weg, Kästchen unabhängig von der Anordnung im Flowchart zu platzieren. Block Diagram Syntax

Erstelle eine temporäre Obsidian-Notiz und füge den vollständigen Block unten ein, einschließlich der öffnenden und schließenden dreifachen Backticks. Obsidian dokumentiert Diagramme als Codeblöcke mit dem Sprachkennzeichner mermaid. Advanced formatting syntax — Obsidian Help

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

Die beabsichtigte Anordnung zeigt Alpha, Beta und Gamma nebeneinander in der oberen belegten Zeile, darunter Delta, Epsilon und Zeta. Fünf Spalten bieten Platz für zwei horizontale Lücken; space:5 reserviert eine vollständig leere Zeile zwischen den belegten Zeilen. Die Verbindungen verweisen auf die deklarierten Block-IDs. Diese Konstrukte entsprechen der dokumentierten Spalten-, Abstands- und Kantensyntax von Mermaid. Block Diagram Syntax

Wenn der installierte Renderer block nicht akzeptiert, halte bei dieser Kompatibilitätsfrage an. Prüfe die dokumentierte Syntax, bevor du die ältere Schreibweise block-beta ausprobierst. Pele führt ausdrücklich beide auf, doch das beweist keine Unterstützung in allen älteren Obsidian-Versionen. Die Beispiele hier wurden anhand der Dokumentation geprüft, nicht in einem installierten Obsidian-Renderer ausgeführt. Pele-Kompatibilität

Bewerte das Ergebnis in zwei Durchgängen. Prüfe zunächst die sechs Beschriftungen und ihre vorgesehene Zeilenzugehörigkeit. Kontrolliere dann alle acht Beziehungen, insbesondere die diagonale Verbindung von Alpha zu Zeta. Eine akzeptable Kästchenanordnung sollte keinen mehrdeutigen oder überlappenden Verbindungspfad verdecken.

Müssen auch rechtwinklige Verbindungslinien feste Zeilen beibehalten?

Behandle das Aussehen der Verbindungslinien als separates Abnahmekriterium. Mermaids Flowchart-Konfiguration definiert curve als Einstellung für die Kantendarstellung und führt step, stepBefore und stepAfter als mögliche Werte auf. Separat definiert sie nodeSpacing für Knoten auf derselben Ebene und rankSpacing für Knoten auf unterschiedlichen Ebenen. Diese Einstellungen betreffen Darstellung und Abstände; aus ihrem dokumentierten Zweck geht nicht hervor, dass sie die Zeilenzugehörigkeit fixieren. Flowchart Diagram Config Schema

Das Blockdiagramm-Beispiel behandelt die Platzierung der Kästchen. Es garantiert nicht, dass jede Querverbindung ausschließlich horizontale und vertikale Segmente verwendet. Gehe nicht davon aus, dass eine Kurveneinstellung für Flowcharts die Verbindungslinien von Blockdiagrammen steuert oder dass sich eine von Mermaid aus dem Upstream-Projekt akzeptierte Einstellung in Pele identisch verhält.

Nutze diese Entscheidungshilfe, bevor du Zeit in die Anpassung der Zeichnung investierst:

Gewünschtes Ergebnis Praktische Wahl Abnahmekriterium
Zwei feste Zeilen mit einzelnen Querverbindungen Blockdiagramm, sofern unterstützt Jeder Knoten bleibt in seiner vorgesehenen Zeile
Ein lesbares Flowchart mit flexibler Positionierung Flowchart-Layout und Anpassungen der Abstände Die Beziehungen bleiben nach jeder Änderung klar
Verbindungen zwischen ganzen Gruppen Subgraph-Endpunkte, wenn sie semantisch zutreffen Die Endpunkte beschreiben die beabsichtigte Beziehung
Manuell in Obsidian angeordnete Kästchen Canvas Kartenpositionen und Verbindungen entsprechen dem vorgesehenen Diagramm
Feste Zeilen und vorgeschriebene Knicke der Verbindungslinien Beide Anforderungen separat prüfen Jeden Knick und jede Kreuzung im tatsächlichen Renderer kontrollieren

Was, wenn dein installiertes Obsidian das Blockdiagramm nicht darstellen kann?

Für eine gewöhnliche Aufgabe auf dem Mac, bei der manuell platzierte Karten akzeptabel sind, bietet Obsidian Canvas eine dokumentierte Alternative. Öffne die Befehlspalette und wähle Canvas: Create new canvas. Doppelklicke auf die Canvas-Fläche, um Textkarten zu erstellen, und gib dann die sechs erfundenen Beschriftungen ein. Canvas — Obsidian Help

Wähle die drei oberen Karten aus und klicke auf Align, dann auf Arrange in a row. Wiederhole dies für die drei unteren Karten. Passe die Abstände nach Bedarf an. Bewege zum Verbinden der Karten den Mauszeiger über eine Kartenkante, bis ein ausgefüllter Kreis erscheint, und ziehe diesen Kreis dann auf die Kante einer anderen Karte. Diese Anordnungs- und Verbindungssteuerungen sind dokumentierte Canvas-Funktionen. Canvas — Obsidian Help

Canvas erstellt ein separates .canvas-Dokument statt eines inline eingebetteten Mermaid-Codeblocks. Wähle es, wenn direkt angeordnete Karten als Ergebnis akzeptabel sind. Die Positionierungssteuerungen eignen sich für die Zeilenanordnung; aus der zitierten Dokumentation geht jedoch nicht hervor, dass sich beliebige Wegpunkte für Verbindungslinien bearbeiten lassen. Canvas — Obsidian Help

Prüfe das Ergebnis, bevor du weitere Verbindungen hinzufügst

Verwende eine kurze Abfolge von Vergleichen, um nicht unterstützte Syntax von Layoutverhalten zu unterscheiden. Dies ist ein Diagnoseverfahren, das aus den dokumentierten Einschränkungen abgeleitet wurde, keine Aussage über eine getestete Obsidian-Installation:

  1. Rendere die sechs deklarierten Blöcke ohne ihre acht Verbindungslinien. Prüfe die Zeilenzugehörigkeit.
  2. Stelle die vier Verbindungen innerhalb der Zeilen wieder her. Prüfe Beschriftungen und Pfeilrichtung.
  3. Stelle die drei Verbindungen zwischen den entsprechenden Spalten wieder her. Untersuche den Abstand zwischen den Zeilen.
  4. Stelle zuletzt A --> F wieder her. Prüfe, ob der Verlauf lesbar bleibt.
  5. Öffne den endgültigen Quelltext erneut in der Umgebung, in der du ihn lesen möchtest. Beurteile diese Wiedergabe.

Wenn der erste Schritt zu einem Syntaxfehler führt, prüfe die Diagrammunterstützung, bevor du die Abstände änderst. Ist die Platzierung zufriedenstellend, aber eine Verbindungslinie unklar, passe genau diesen Verlauf an oder überdenke die Darstellung. Behalte beim Vergleich von Alternativen alle erforderlichen Beziehungen sichtbar; die problematische Verbindung zu löschen, würde genau die Bedingung entfernen, mit der das Diagramm umgehen muss.

Beginne für stabile Zeilen mit einer expliziten Blockanordnung und prüfe sie in deinem installierten Renderer. Behalte die Knotenbeziehungen bei, kontrolliere die Geometrie der Verbindungslinien separat und verwende Canvas, wenn die direkte Anordnung von Karten die praktischere Lösung für die Aufgabe ist.

Quellen