Składnia schematu blokowego Mermaid.js i przewodnik po układzie siatki

Schemat blokowy to silnie zorganizowany silnik układu służący do przedstawiania złożonych architektur oprogramowania, platform sprzętowych lub modeli organizacyjnych. Wprowadzony zgodnie z zasadami Mermaid.js, silnik block traktuje obszar układu jako absolutną macierz matematyczną siatki. Zapewnia dokładne zarządzanie wyrównaniem kolumn, izolowanymi granicami zagnieżdżania układu, blokami odstępów strukturalnych oraz jawnymi konfiguracjami połączeń portów krawędzi.

Zrozumienie strategii macierzy siatki

W przeciwieństwie do standardowych schematów przepływu o swobodnej formie, które dynamicznie przewidują ścieżki układu, schemat blokowy opiera się na sztywnej liniowej sieci współrzędnych:

• Próg kolumn: Ustawiasz surowy poziomy limit, używając modyfikatora columns modyfikatora. Gdy siatka zostanie wypełniona blokami, dodatkowe elementy automatycznie przechodzą do następnej linii w sposób czysty.
• Wymiary według pól siatki: Domyślnie każdy blok zajmuje pojedyncze miejsce współrzędnych ($1 times 1$). Możesz zmienić to zachowanie, przypisując jawne szerokości kolumn, aby elementy rozciągały się idealnie na kilka ścieżek.

Podstawowa struktura składni

Każdy układ zaczyna się od nagłówka deklaracji block deklaracji. Następnie ustala się pojemność szerokości wiersza za pomocą słowa kluczowego columns i deklarowania bloków w kolejnych liniach.

block
  columns 3
  componentA["Pierwszy blok"]
  componentB["Środkowy blok"]
  componentC["Prawy blok"]

Odwołanie składniowe

Poniższa tabela rozkłada podstawowe parametry danych, słowa kluczowe niestandardowego stylu oraz strukturalne kontenery rozpoznawane domyślnie przez interpreter bloków.

Zaawansowana funkcja: jawne wymiary bloku i modyfikatory przestrzeni

W przypadku układów asymetrycznych możesz przekazać jawne metryki poziome bezpośrednio do standardowych bloków lub separatorów przestrzeni, używając separatora w notacji dwukropka (:szerokość). To zmusza elementy do rozciągania się po wielu pozycjach siatki w sposób czysty.

blok
  kolumny 4
  wideComponent["Szeroki nagłówek pulpitu"] :4
  leftBar["Pasek boczny"] space:2 rightBar["Główny panel"]

Zaawansowana funkcja: typy krawędzi, kierunki i opcje połączeń

Połączenia wewnątrz bloksilnik są dzielone na standardowe linie semantyczne i strukturalne strzałki blokowe układu. Standardowe linie połączeń wspierają określanie jawnych ograniczeń kierunkowych, aby określić sposób owijania linii wokół elementów.

1. Standardowe połączenia linii

Połączenia blokowe używają standardowych operatorów połączeń (-->, --, <-->). Jednak możesz kontrolować trasę, dodając kierunki lub modyfikatory w nawiasach:

• A --> B : Rysuje standardową linię kierunkową od elementu A do elementu B.
• A -- x B : Rysuje ścieżkę połączenia zakończoną znakiem „X”, wskazującą drogę zablokowaną.
• A -- o B : Rysuje ścieżkę połączenia zakończoną otwartym kółkiem połączeniowym.

2. Strzałki blokowe dynamicznego układu

Strzałki blokowe traktowane są jako rzeczywiste składniki układu zajmujące rzeczywisty blok indeksu współrzędnych w macierzy budżetu wierszy. Używają właściwości składni większy niż i mniejszy niż do mapowania fizycznych ścieżek przepływu:

block
  columns 3
  producer["Dostawca danych"]
  midArrow<["Przetwarzanie ruchu"]>(right)
  consumer["Konsument danych"]

Zaawansowana funkcja: Zagnieżdżanie macierzy podbloków (grupowanie złożone)

Pojedynczy block:id otaczający działa jako izolowane środowisko kontekstowe pudełka układu. Kontener grupy aplikacji może ustalić własną unikalną liczbę kolumn poziomych wewnątrz podbloku, umożliwiając szczelne grupowanie złożonych składników bez wpływu na odstępy globalnej siatki szablonu kanału nadrzędnego.

block
  columns 2
  rootGateway["Brama globalna"]
  
  block:microserviceCluster
    columns 3
    auth["Węzeł uwierzytelniania"]
    api["Główny interfejs API"]
    worker["Silnik pracownika"]
  end

Szablon z rzeczywistego świata: Wielowarstwowa infrastruktura z pamięcią podręczną

Ten kompleksowy szablon wielowierszowy demonstruje czystą konfigurację infrastruktury produkcyjnej. Ustala układ siatki przetwarzania 3-kolumnowej, używa elementów strukturalnychprzestrzenido izolacji warstwy bazy danych, mapuje grubą strzałkę w dółblockArrow, i izoluje osobny kontener wewnętrznej podsystemu przy użyciu zagnieżdżonego block:id ... end złożony otwieracz.

block
  columns 3

  %% Wiersz 1: Usługi wejściowe
  dnsClient(("Klient WWW"))
  loadBalancer["Balanser obciążenia krawędziowy"]
  space

  %% Wiersz 2: Połączenie przepływu w dół do mikrousług
  space
  downRoute<["Przesyłanie ruchu"]>(down)
  space

  %% Wiersz 3: Zestaw środowiska aplikacji złożonej
  block:appCluster
    columns 2
    authService["Uwierzytelnianie"]
    apiEngine["Pracownik głównego interfejsu API"]
  end
  space
  database[("Baza danych PostgreSQL")]

  %% Ustanów jasne dopasowania strukturalne linii macierzy do macierzy
  loadBalancer --> appCluster
  appCluster --> database

Typowe błędy składniowe i ograniczenia systemu

Podczas kompilowania dokładnych map macierzy siatki pamiętaj o tych sprawdzianach weryfikacji, aby zapobiec błędom analizy składni:

• Wymuszanie budżetu kolumn: Dokładnie śledź liczbę kolumn. Jeśli określisz columns 3 i napiszesz 4 kolejne bloki w wierszu, czwarty blok automatycznie przejdzie do wiersza 2, co może naruszyć zamierzone ścieżki połączeń od lewej do prawej.
• Kolejność zagnieżdżania złożonego: Podczas budowania wewnętrznych kontenerów przy użyciu block:id, musisz zawsze zamknąć obszar podsiatki przy użyciu end słowa kluczowego w izolowanym wierszu przed zadeklarowaniem kolejnych elementów. Niezamknięcie bloku spowoduje zatrzymanie budowania diagramu.
• Ograniczenia docelowego strzałki blokowej: Właściwość kierunku ujęta w nawiasach po strzałce blokowej (np. (up), (down)) musi być małą literą, doskonale pasującą do słów kluczowych systemu. Duże litery w kierunku spowodują błędy przetwarzania.
• Kolizje granic etykiet: Standardowe dekoracje kształtów schematu przepływu (jak nawiasy () dla okręgów lub klamry {} dla diamentów) są w pełni obsługiwane. Upewnij się, że wszystkie etykiety tekstowe wyświetlane wewnątrz kształtów używają czystych podwójnych cudzysłowów, aby uniknąć usuwania znaków.