Dla czytelnych, spójnych diagramów Mermaid w Obsidian na Mac, zdefiniuj wielokrotnego użytku style węzłów wewnątrz każdego diagramu. Zachowaj motyw aplikacji, sprawdź, który renderer używa Twoja zainstalowana wersja, i dodaj CSS w zakresie diagramu tylko wtedy, gdy potrzebujesz wspólnych ustawień domyślnych.

Ten przewodnik tworzy mały diagram przepływu ze spójnymi wypełnieniami węzłów, czytelnymi etykietami i jednym wyraźnie oznaczonym krokiem alternatywnym. Wszystkie etykiety są syntetyczne. Celem jest wielokrotnego użytku wzorzec stylizowania dla zwykłych notatek, z osobnymi instrukcjami, gdzie Mermaid i nowszy renderer Pele w Obsidian zachowują się inaczej.

Sprawdź zainstalowany renderer przed wyborem ustawień

Znajdź swoją kompilację w Ustawienia → Informacje → Aplikacja → Bieżąca wersja, lokalizacja udokumentowana w pomocy Obsidian dotyczącej wersji wczesnego dostępu. Zanotuj tę wersję przed rozwiązywaniem problemów ze stylami.

Istnieje istotna granica: informacje o wersji z 22 października 2026 r. dla Obsidian 1.15.0 Desktop, oznaczony jako Wersja wczesnego dostępu, wprowadzają Pele do renderowania diagramów Mermaid. Informacje te mówią, że obsługuje on składnię Mermaid 12.1.0, używa kolorów i czcionek motywu oraz generuje inne klasy SVG. Te informacje dotyczą konkretnej wersji; nie ustalają, jaki renderer ma zainstalowany Twój Mac. Zobacz Obsidian 1.15.0 Desktop.

Użyj tej tabeli decyzyjnej przed kopiowaniem konfiguracji z innego poradnika:

Twoje środowisko renderowania Zacznij od Granica do zapamiętania
Obsidian używający samego Mermaid Klasy diagramów na poziomie źródła; opcjonalnie frontmatter diagramu Funkcje konfiguracji zależą od zainstalowanej wersji Mermaid.
Obsidian używający Pele Style na poziomie źródła; opcjonalnie zmienne CSS Pele Motywy Mermaid i kolory themeVariables nie mają zastosowania.
Wtyczka zastępująca renderowanie diagramów Zadokumentowany renderer i ustawienia wtyczki Zachowanie wbudowanego renderera nie wystarcza do ustalenia kompatybilności.

Pele wprost dokumentuje własny układ i wygląd, nawet gdy akceptuje składnię Mermaid. Jego dokumentacja kompatybilności również stwierdza, że wsparcie konfiguracji zależy od typu diagramu. Traktuj kompatybilność składni i identyczny wygląd wizualny jako odrębne pytania.

Zbuduj wielokrotnego użytku styl diagramu wewnątrz notatki

Utwórz nową notatkę i wklej poniższy kompletny blok, w tym jego otwierające i zamykające ogrodzenia. Dokumentacja Obsidian dotycząca zaawansowanej składni formatowania określa ogrodzony blok kodu oznaczony mermaid dla diagramów.

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

Zadokumentowana składnia classDef Mermaid definiuje wielokrotnego użytku wygląd; class przypisuje go do nazwanych węzłów. Tutaj trzy węzły dzielą standard, a jeden używa alternate. Zachowaj identyfikatory węzłów oddzielone od widocznych etykiet, aby zmiany sformułowań były łatwe do śledzenia. Te mechanizmy opisano w Diagramy przepływu — Podstawowa składnia.

Paleta jest ilustracyjnym wyborem projektowym. Łączy błahe wypełnienia z ciemnym tekstem i mocniejszymi obramowaniami. Etykieta Opcja D również identyfikuje krok alternatywny, więc jego znaczenie nie zależy wyłącznie od niebieskiego wypełnienia.

Podglądaj notatkę i sprawdź etykiety przy zwyczajnym rozmiarze czytania. Zamierzonym rezultatem są trzy pasujące szare węzły i jeden niebieski węzeł. Zostaw strzałki przy domyślnych ustawieniach renderera na początku; to ułatwia ocenę jednej zmiany naraz.

Aby ponownie użyć wzorca, skopiuj cały blok do innej notatki, zmień etykiety i połączenia oraz zaktualizuj listy węzłów w ostatnich dwóch liniach. Zachowaj jedną kopię referencyjną palety. To ręczna konwencja: edycja referencji nie aktualizuje automatycznie diagramów skopiowanych w inne miejsca.

Pele również obsługuje stylizację zdefiniowaną w diagramie, a jego dokumentacja wyjaśnia, że kolory zdefiniowane w źródle pozostają stałe przy zmianie motywu. To sprawia, że to podejście jest przydatne, gdy chcesz spójną paletę, zachowując swój motyw Obsidian. Zobacz Motywowanie Pele.

Używaj frontmatter diagramu tylko gdy Mermaid renderuje diagram

Jeśli Twoje zainstalowane środowisko używa samego Mermaid i obsługuje frontmatter diagramu, możesz ustawić ogólną paletę i typografię diagramu razem. Mermaid dokumentuje konfigurację frontmatter od wersji 10.5.0. Inicjalizacja na poziomie strony należy do aplikacji integrującej; autor notatki może użyć konfiguracji lokalnej diagramu. Zobacz Konfiguracja Mermaid.

Ta kompletna alternatywa ustawia wspólny wygląd dla wszystkich trzech węzłów. Użyj jej w osobnym blokcie testowym najpierw:

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

YAML należy wewnątrz ogrodzenia mermaid, przed flowchart TD. To konfiguracja diagramu, oddzielona od właściwości notatki na początku pliku Markdown.

Mermaid określa base jako motyw do dostosowywania i wymaga kolorów heksadecymalnych dla swojego silnika motywów. Jego dokumentacja konfiguracji motywu wymienia zmienne tekstu, wypełnienia, obramowania, linii i czcionki użyte powyżej. Te ustawienia opisują wygląd diagramu bez wyboru innego motywu aplikacji Obsidian.

W Pele zmiana kolorów themeVariables w tym przykładzie nie da tego samego rezultatu: te kolory są wprost nieobsługiwane. Użyj klas zdefiniowanych w źródle dla stałych kolorów węzłów lub podejścia ze zmiennymi CSS poniżej dla wspólnych ustawień domyślnych renderera. Nie interpretuj zignorowanych ustawień motywu Mermaid jako powód do dalszego dostrajania wartości heksadecymalnych. Zobacz Kompatybilność Pele.

Dodaj wspólne ustawienia domyślne Pele za pomocą małego fragmentu CSS

W przypadku instalacji opartej na Pele, zmienne CSS oferują inną wspieraną drogę. To przydatne, gdy kilka diagramów ma dzielić ustawienia domyślne, a Ty wolisz zmienić jeden arkusz stylów zamiast edytować każdy blok.

Poniższy kompletny fragment dotyczy diagramów przepływu Pele. Ustawia kolory tekstu, wypełnienia, obramowania i łączników, nie ingerując w otaczającą notatkę i motyw aplikacji. Selektor i zmienne są udokumentowane w Motywowaniu Pele.

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

Zainstaluj go poprzez udokumentowany proces dla wersji desktopowej Obsidian:

  1. Otwórz Ustawienia.
  2. W Wygląd → Fragmenty CSS, wybierz Otwórz folder fragmentów.
  3. Utwórz plik tekstowy o nazwie diagram-defaults.css w tym folderze i wklej do niego CSS.
  4. Wróć do Wygląd → Fragmenty CSS i wybierz Przeładuj fragmenty.
  5. Włącz diagram-defaults.

Te kontrolki i automatyczne stosowanie zapisanych zmian fragmentów są udokumentowane w Fragmenty CSS — Pomoc Obsidian. Na Macu sprawdź, czy edytor zapisał nazwę pliku z rozszerzeniem .css.

Przetestuj wspólne ustawienia domyślne używając diagramu trzech węzłów z poprzedniej sekcji, usuwając jego frontmatter diagramu. Kolory zdefiniowane w źródle mogą nadpisywać ustawienia domyślne renderera, więc jawne klasy węzłów z pierwszego przykładu nie nadają się do oceny, czy zmienne wspólnego wypełnienia zadziałały.

Ten fragment celowo używa stałej jasnej palety. Jeśli Twoja preferowana konfiguracja czytania potrzebuje innej palety, zmień tekst, powierzchnie, obramowania i linie razem, a następnie zbadaj wynik. Zmienna --pele-bg służy elementom tła; nie gwarantuje ona nieprzezroczystego panelu za całym diagramem.

Trzymaj ten fragment specyficzny dla Pele. Dokumentacja Mermaid dotycząca diagramów przepływu zaleca classDef do stylizowania węzłów i ostrzega, że zewnętrzny CSS może przegrywać ze stylami wewnętrznymi Mermaid. Arkusz stylów celujący w jeden renderer nie powinien być zakładany jako działający z drugim. Zobacz Wskazówki Mermaid dotyczące klas CSS.

Diagnozuj nieczytelne diagramy w powtarzalnej kolejności

Użyj poniższej sekwencji, gdy diagram renderuje się, ale jego wygląd jest niespójny. Oddziela ona składnię, zakres stylizacji i dostępną przestrzeń bez zmiany motywu aplikacji.

  1. Zredukuj test. Skopiuj diagram notatki do tymczasowej notatki i zachowaj trzy krótkie etykiety. Jeśli mały przykład również nie powiedzie się, zbadaj składnię lub wsparcie renderera przed dopracowywaniem kolorów.
  2. Wybierz jeden mechanizm stylizacji. Przetestuj same klasy źródłowe, sam frontmatter Mermaid lub same zmienne Pele. Łączenie ich od razu utrudnia identyfikację nadpisywania.
  3. Sprawdź sparowane kolory. Zbadaj tekst na tle wypełnienia węzła, potem obramowania i strzałki na tle otaczającej notatki. Napraw nieczytelną parę przed dodaniem kolejnego akcentu.
  4. Sprawdź szerokość czytania. Podglądaj diagram w szerokości okienka, której normalnie używasz. Skróć etykiety lub spróbuj układu pionowego, jeśli diagram staje się zbyt szeroki.
  5. Wprowadzaj złożoność stopniowo. Dodawaj pozostałe węzły, style alternatywne i etykiety krawędzi w małych grupach. Zachowaj ostatnią czytelną wersję do porównania.

Do sprawdzania kierunku Mermaid dokumentuje TD jako od góry do dołu i LR jako od lewej do prawej. Spróbuj zmienić tylko tę deklarację przed przepisaniem diagramu. Zobacz Kierunek diagramu przepływu.

Oceń końcowy wynik w Twoim zainstalowanym renderze Obsidian. Zewnętrzny edytor może pomóc zbadać składnię, ale Pele dokumentuje inne pozycje węzłów, odstępy i ścieżki krawędzi niż Mermaid. Zgodność źródła nie wymaga zgodności geometrii.

Trzymaj mały diagram referencyjny obok swojej wielokrotnego użytku palety. Gdy jego etykiety, węzły i łączniki czytelnie wyglądają przy normalnej szerokości okienka, zastosuj tę samą konwencję do swoich roboczych notatek. Spójność pochodzi od powtarzalnego stylu i znanej granicy renderera; Twój motyw Obsidian może zostać bez zmian.

Źródła