Wykresy Sankey są bardzo skutecznymi narzędziami wizualizacji, używanymi do przedstawienia kierunkowego przepływu ilości między różnymi węzłami w systemie. Poprzez skalowanie fizycznej szerokości połączeń proporcjonalnie do objętości przepływu liczbowego pozwalają inżynierom, analitykom i zespołom operacyjnym natychmiast wykrywać istotne źródła, alokacje zasobów, nieefektywności lub wycieki w złożonych sieciach, takich jak sieci energetyczne, łańcuchy dostaw czy portfele finansowe.
Podstawowa struktura składni
Definicje układu Sankey opierają się na zoptymalizowanym formacie strukturalnym CSV (wartości rozdzielane przecinkami) z trzema kolumnami. Każdy plik zaczyna się od jednego z następujących nagłówków:sankey lub sankey-beta nagłówka deklaracji typu, po którym następują pojedyncze linie przepływu zgodne z rygorystycznym wzorcem “Źródło,Docelowy, Wartość“.
sankey
Węzeł źródłowy,Węzeł docelowy,150.50
Węzeł docelowy,Ostateczny węzeł wyjściowy,90.25
Odwołanie do składni
Poniższa tabela przedstawia podstawowe zasady i parametry danych wymagane do poprawnego przetworzenia wykresu Sankey w Mermaid.js.
| Element składni | Wymóg typu | Opis i zasady użytkowania |
|---|---|---|
| Deklaracja | Identyfikator słowa kluczowego | Inicjuje silnik renderowania układu strumieniowego. Akceptuje “sankey lub zgodny z wcześniejszymi wersjami “sankey-beta” ciąg znaków. |
| Węzeł źródłowy | Etykieta tekstowa | Kategoria początkowa, od której rozpoczyna się przepływ zasobów. Wielkość liter ma znaczenie. |
| Węzeł docelowy | Etykieta ciągu znaków | Węzeł odbiorczy, w którym kończy się określona objętość połączenia. |
| Wartość | Liczba zmiennoprzecinkowa dodatnia / Liczba całkowita dodatnia | Wartość liczbową przepływu. Grubość narysowanej ścieżki jest bezpośrednio obliczana względem tej wartości. |
| Linia komentarza | Wskaźnik składni | Dowolny tekst poprzedzony podwójnym znakiem procentu (“%%) jest ignorowany przez kompilator, co pozwala na czyste adnotacje danych. |
Obsługa znaków specjalnych w etykietach węzłów
Ponieważ przecinki i cudzysłowy pełnią rolę ograniczników strukturalnych w silniku układu, specjalne wpisy nazw wymagają określonych technik ucieczki, aby zapewnić poprawne wyświetlanie na płótnie frontendu.
1. Przecinki w nazwach
Jeśli konkretna etykieta węzła wymaga literowego przecinka, otocz całą zawartość ciągu węzła parą standardowych podwójnych cudzysłowów:
sankey
Budżet Pool,"Operacje, Wynagrodzenia i Admin",45000
2. Cudzysłowy w nazwach
Aby jawnie wyświetlić podwójne cudzysłowy w nazwie etykiety, otocz całą wartość parametru zewnętrznymi cudzysłowami i użyj podwójnej pary cudzysłowów (“"") wewnątrz ciągu wartości docelowej:
sankey
Klastery serwerów,"Wewnętrzny ""Krawędź"" Węzeł",850
Zaawansowana konfiguracja motywu (dyrektywy)
Możesz precyzyjnie dostosować prezentację diagramu, przekazując blok konfiguracji frontmatter na początku fragmentu dokumentu. Pozwala to kontrolować style połączeń, wypełnienie układu, style tekstu oraz wyrównanie elementów bezpośrednio z edytora tekstu surowego.
Macierz atrybutów konfiguracji Sankey
| Nazwa właściwości | Dopuszczalne wartości | Wynik wizualny |
|---|---|---|
pokażWartości |
prawda | fałsz |
Włącza lub wyłącza drukowanie tekstu wartości przepływu liczbowego bezpośrednio w polach etykiet węzłów. |
kolorPołączenia |
'źródło' | 'cel' | 'gradient' | '#hex' |
Określa mapowanie kolorów dla ścieżek połączeń.'gradient' płynnie łączy kolory między połączonymi jednostkami. |
wyrównanieWęzłów |
'wyrównaj' | 'lewo' | 'prawo' | 'środek' |
Wyrównuje kolumny strukturalne wzdłuż siatki przestrzeni kanwy. |
stylEtykiety |
'przestarzały' | 'obrysowane' |
'obrysowane' dodaje maskę obramowania tła za tekstem, aby zapewnić wysoką czytelność na złożonych układach. |
szerokoscWęzła |
Liczba całkowita (piksele) | Ustawia szerokość prostokątów węzłów (Domyślne: 10). |
odstepWęzła |
Liczba całkowita (piksele) | Ustawia parametry odstępu pionowego między warstwami (Domyślne: 12). |
Prawdziwy projekt: Dystrybucja sieci czystej energii
Ten kompleksowy projekt śledzi system zarządzania infrastrukturą sieci energetycznej. Pokazuje konfiguracje nagłówka — ustawia płynne gradienty kolorów połączeń, style typografii obrysowanej oraz wyłącza liczniki metryk w linii — w połączeniu z wielopoziomową strukturą układu.
---
config:
sankey:
pokazujWartosci: false
kolorPołączenia: 'gradient'
wyrównanieWęzła: 'justuj'
stylEtykiety: 'obrysowane'
szerokoscWęzła: 15
odstepWęzła: 18
---
sankey
%% Wiersze danych źródłowych
Farma słoneczna, Sieć magazynowania energii,120.50
Wiatraki, Sieć magazynowania energii,180.75
Wielka elektrownia wodna, Linia bezpośredniego przemysłu,210.00
Import paliw biologicznych, Stacja zapasowa termiczna,45.25
%% Węzły dystrybucji
Sieć magazynowania energii, Linie konsumentów mieszkaniowych,145.00
Sieć magazynowania energii, Linia bezpośredniego przemysłu,110.25
Sieć magazynowania energii, Straty systemowe i rozpraszanie,46.00
%% Ostateczne węzły końcowe dostawy
Linia bezpośredniego przemysłu, Hub ciężkiej produkcji,295.00
Linia bezpośredniego przemysłu, Sektor handlu detalicznego,25.25
Stacja zapasowa termiczna, Sektor handlu detalicznego,45.25
Typowe błędy składniowe i ograniczenia systemowe
Podczas kompilowania bardzo gęstych tablic danych, kilka subtelnych błędów konfiguracji spowoduje przerwanie analizy układu. Pamiętaj o tych zasadach rozwiązywania problemów:
- Dokładna weryfikacja kolumn: Każdy pojedynczy wiersz danych po deklaracji nagłówka musi zawierać dokładnie trzy parametry oddzielone przecinkami. Dodanie czwartej kolumny lub pominięcie wartości spowoduje całkowite zatrzymanie kompilacji diagramu.
- Zezwolenia na puste linie: W przeciwieństwie do tradycyjnych surowych reguł parsowania danych, Mermaid pozwala dodać puste, czyste linie wewnątrz bloku kodu, aby logicznie oddzielić różne poziomy lub fazy przetwarzania danych modelu.
- Blokowanie pętli zamkniętych: Struktury Sankey są projektowane ściśle wokół skierowanych grafów acyklicznych (DAG). Jeśli połączysz węzeł A z węzłem B, a następnie spróbujesz zapisać ścieżkę wiersza łączącego węzeł B z powrotem do węzła A, silnik układu doświadczy przerwania sprzężenia zwrotnego i zakończy działanie z błędem.
- Ograniczenia danych wartości: Pola wartości mogą parsować tylko liczby dodatnie. Ujemne wartości lub surowe znaki alfabetyczne nie mogą zostać przetworzone do parametrów szerokości.