Aby węzły Mermaid pozostawały w stałych wierszach mimo zmian połączeń, użyj diagramu blokowego z jawnym określeniem kolumn, jeśli obsługuje go używany renderer. W Obsidianie na Macu najpierw sprawdź zainstalowany renderer: podgrafy schematu blokowego nie pozwalają niezawodnie wymusić takiego układu.

Ten poradnik dotyczy jednego zadania: rozmieszczenia sześciu neutralnych węzłów w dwóch poziomych wierszach przy zachowaniu połączeń między poszczególnymi węzłami. Osobno zdecyduj, czy potrzebujesz wyrównanych ramek, prostokątnych załamań łączników, czy obu tych elementów. Wynik zadowalający pod jednym względem może nie spełniać drugiego wymagania.

Dlaczego połączenia krzyżowe zaburzają układ wierszy schematu blokowego?

Dokumentacja Mermaid opisuje konkretne ograniczenie schematów blokowych: gdy węzeł wewnątrz podgrafu łączy się z elementem poza tym podgrafem, jego lokalny kierunek jest ignorowany, a węzeł przejmuje kierunek grafu nadrzędnego. W efekcie wiersz zadeklarowany jako direction LR wewnątrz flowchart TB może zmienić układ po dodaniu połączenia zewnętrznego. Zobacz oficjalny opis ograniczenia kierunku podgrafu.

Poniższy kompletny przykład zawiera ten warunek. Dwa połączenia wewnętrzne sugerują poziome wiersze, ale A --> D przekracza granicę podgrafu:

```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 obsługuje również połączenia z identyfikatorami podgrafów. Zamiast tego można połączyć RowOne z RowTwo, unikając wskazywania ich wewnętrznych węzłów, ale zmienia to znaczenie relacji: połączenie łączy grupy, a nie Alpha i Delta. Używaj tej opcji tylko wtedy, gdy relacja między grupami jest zgodna z zamierzeniem. Niewidoczne połączenia, takie jak A ~~~ B, są udokumentowanymi pomocami w pozycjonowaniu, a nie udokumentowanym sposobem blokowania wierszy. Składnia schematów blokowych

W tym zadaniu zachowaj poszczególne punkty końcowe. Zastąpienie wymaganego połączenia węzłów połączeniem grup sprawiłoby, że rysunek byłby schludniejszy kosztem informacji, które ma przekazywać.

Sprawdź, którego renderera faktycznie używa Twój Mac

Otwórz Settings w Obsidianie, a następnie General, i zanotuj aktualną wersję aplikacji. Aktualna dokumentacja wskazuje, że w tym miejscu znajdują się informacje o wersji oraz opcja Read the changelog. Przed zastosowaniem instrukcji napisanych dla innej wersji zapoznaj się z informacjami o wydaniu dla zainstalowanej wersji. Ustawienia — pomoc Obsidiana

Istnieje istotna granica wersji: wersja Obsidian 1.15.0 Desktop w ramach wczesnego dostępu, wydana 22 października 2026 r., wprowadza Pele do renderowania diagramów i opisuje zgodność ze składnią Mermaid 12.1.0. To ogłoszenie nie określa, którego renderera używa wcześniejsza zainstalowana wersja. Informacje o wydaniu Obsidian 1.15.0 Desktop

Pele opisuje własny silnik układu, w którym pozycje węzłów, odstępy i ścieżki krawędzi różnią się od tych w Mermaid. Lista zgodności obejmuje zarówno block, jak i block-beta. Sama zgodność składni nie wystarcza więc, by mieć pewność, że diagram w Obsidianie będzie wyglądać tak samo jak renderowany przez Mermaid. Zgodność Pele

Mermaid również wprowadził zmiany: dokumentacja układów podaje, że w wersji 12.0.0 ELK stał się dołączonym i domyślnym układem schematów blokowych; wcześniej host musiał zainstalować i zarejestrować osobny pakiet ELK. Zalecenie wyboru layout: elk musi zatem zależeć od renderera i wersji. Układy Mermaid

Aby porównanie było miarodajne, uwzględnij jednocześnie trzy elementy: dokładny kod źródłowy diagramu, wersję aplikacji Obsidian i środowisko renderowania. Zmieniaj tylko jeden element naraz. Porównywanie różnych kodów źródłowych w różnych rendererach nie pozwala ustalić, dlaczego wiersze zmieniły położenie.

Użyj diagramu blokowego, aby jawnie ustalić położenie wierszy

Diagramy blokowe Mermaid pozwalają autorowi określać położenie za pomocą kolumn. Bloki wypełniają zadeklarowane kolumny, a następnie przechodzą do kolejnych wierszy; space rezerwuje puste komórki. To obsługiwany przez Mermaid sposób rozmieszczania ramek niezależnie od rangowania schematu blokowego. Składnia diagramu blokowego

Utwórz tymczasową notatkę w Obsidianie i wklej cały poniższy blok, wraz z początkowymi i końcowymi potrójnymi znakami grawisu. Obsidian opisuje diagramy jako bloki kodu wydzielone potrójnymi znakami grawisu i oznaczone identyfikatorem języka mermaid. Zaawansowana składnia formatowania — pomoc Obsidiana

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

Zamierzony układ to Alpha, Beta, Gamma w górnym zajętym wierszu, a pod nimi Delta, Epsilon, Zeta. Pięć kolumn zapewnia dwa poziome odstępy; space:5 rezerwuje cały pusty wiersz między zajętymi wierszami. Połączenia odwołują się do zadeklarowanych identyfikatorów bloków. Konstrukcje te są zgodne z udokumentowaną składnią kolumn, odstępów i krawędzi w Mermaid. Składnia diagramu blokowego

Jeśli zainstalowany renderer odrzuci block, zatrzymaj się i sprawdź zgodność. Przed wypróbowaniem starszej pisowni block-beta sprawdź składnię opisaną w jego dokumentacji; Pele wymienia obie formy, ale nie dowodzi to ich obsługi w każdej starszej wersji Obsidiana. Przykłady w tym poradniku sprawdzono na podstawie dokumentacji, a nie uruchomiono w zainstalowanym rendererze Obsidiana. Zgodność Pele

Oceń wynik w dwóch etapach. Najpierw sprawdź sześć etykiet i to, czy znalazły się w odpowiednich wierszach. Następnie przejrzyj wszystkie osiem relacji, zwłaszcza ukośne połączenie Alpha–Zeta. Akceptacja układu ramek nie powinna przesłaniać niejednoznacznego lub nachodzącego na inne elementy łącznika.

Czy prostokątne łączniki również wymagają stałych wierszy?

Traktuj wygląd łączników jako osobne kryterium akceptacji. Konfiguracja schematów blokowych Mermaid definiuje curve jako ustawienie renderowania krawędzi i wymienia wśród jego wartości step, stepBefore oraz stepAfter. Osobno definiuje nodeSpacing dla węzłów na tym samym poziomie oraz rankSpacing dla węzłów na różnych poziomach. Te ustawienia dotyczą wyglądu i odstępów; ich udokumentowane przeznaczenie nie gwarantuje zachowania stałego układu wierszy. Schemat konfiguracji diagramu schematu blokowego

Przykład diagramu blokowego dotyczy położenia ramek. Nie gwarantuje, że każde połączenie krzyżowe będzie składać się wyłącznie z odcinków poziomych i pionowych. Nie zakładaj, że ustawienie krzywych w schemacie blokowym kontroluje łączniki diagramu blokowego ani że ustawienie obsługiwane przez Mermaid zachowa się identycznie w Pele.

Zanim poświęcisz czas na dostrajanie rysunku, skorzystaj z poniższej pomocy w podjęciu decyzji:

Wymagany rezultat Praktyczny wybór Kryterium akceptacji
Dwa stałe wiersze z indywidualnymi połączeniami krzyżowymi Diagram blokowy, jeśli jest obsługiwany Każdy węzeł pozostaje w odpowiednim wierszu
Czytelny schemat blokowy z elastycznym pozycjonowaniem Dostosowanie układu i odstępów schematu blokowego Relacje pozostają czytelne po każdej edycji
Połączenia między całymi grupami Punkty końcowe podgrafów, jeśli są zgodne ze znaczeniem Punkty końcowe opisują zamierzoną relację
Ręczne rozmieszczenie ramek w Obsidianie Canvas Położenie kart i połączenia odpowiadają zamierzonemu diagramowi
Stałe wiersze i określone załamania łączników Osobna ocena obu wymagań Sprawdź każde załamanie i każde przecięcie w faktycznie używanym rendererze

Co zrobić, jeśli zainstalowany Obsidian nie renderuje diagramu blokowego?

W zwykłym zadaniu na Macu, w którym akceptowalne są ręcznie rozmieszczone karty, udokumentowaną alternatywę stanowi Canvas w Obsidianie. Otwórz paletę poleceń i wybierz Canvas: Create new canvas. Kliknij dwukrotnie obszar Canvas, aby utworzyć karty tekstowe, a następnie wpisz sześć przykładowych etykiet. Canvas — pomoc Obsidiana

Zaznacz trzy górne karty i użyj polecenia Align, a następnie Arrange in a row. Powtórz to dla trzech dolnych kart. W razie potrzeby skoryguj odstępy. Aby połączyć karty, najedź kursorem na krawędź karty, aż pojawi się wypełnione kółko, a następnie przeciągnij to kółko do krawędzi innej karty. Te funkcje rozmieszczania i łączenia są udokumentowanymi możliwościami Canvas. Canvas — pomoc Obsidiana

Canvas tworzy osobny dokument .canvas, a nie osadzony blok kodu Mermaid. Wybierz tę opcję, jeśli bezpośrednie rozmieszczenie kart jest akceptowalnym rezultatem. Jego narzędzia pozycjonowania pozwalają ułożyć wiersze, ale przytoczona dokumentacja nie potwierdza możliwości dowolnego edytowania punktów pośrednich łączników. Canvas — pomoc Obsidiana

Sprawdź wynik przed dodaniem kolejnych połączeń

Wykonaj krótką serię porównań, aby odróżnić nieobsługiwaną składnię od zachowania układu. To procedura diagnostyczna wyprowadzona z udokumentowanych ograniczeń, a nie twierdzenie o przetestowanej instalacji Obsidiana:

  1. Wyrenderuj sześć zadeklarowanych bloków bez ośmiu linii połączeń. Sprawdź ich przynależność do wierszy.
  2. Przywróć cztery połączenia w obrębie wierszy. Sprawdź etykiety i kierunek strzałek.
  3. Przywróć trzy połączenia między odpowiadającymi sobie kolumnami. Sprawdź przestrzeń między wierszami.
  4. Na końcu przywróć A --> F. Sprawdź, czy jego przebieg pozostaje czytelny.
  5. Otwórz końcowy kod źródłowy w środowisku, w którym zamierzasz go czytać. Oceń właśnie ten sposób renderowania.

Jeśli pierwszy krok kończy się błędem parsowania, przed zmianą odstępów sprawdź obsługę diagramów. Jeśli położenie jest zadowalające, ale łącznik pozostaje nieczytelny, zajmij się konkretnym przebiegiem albo rozważ inną prezentację. Podczas porównywania zachowaj widoczność wszystkich wymaganych relacji; usunięcie problematycznego połączenia zlikwidowałoby właśnie ten warunek, który diagram ma obsłużyć.

Aby uzyskać stabilne wiersze, zacznij od jawnego rozmieszczenia bloków i sprawdź je w zainstalowanym rendererze. Zachowaj relacje między węzłami, osobno sprawdź geometrię łączników, a gdy bezpośrednie rozmieszczenie kart jest praktyczniejszym rozwiązaniem, użyj Canvas.

Źródła