Sankey-Diagramme sind äußerst effektive Visualisierungswerkzeuge, die verwendet werden, um die gerichtete Fließrichtung von Mengen zwischen verschiedenen Knoten innerhalb eines Systems darzustellen. Durch die proportionale Skalierung der physischen Breite der Verbindungsverbindungen entsprechend dem numerischen Flussvolumen können Ingenieure, Analysten und Betriebsteams sofort Hauptbeiträge, Ressourcenallokationen, Ineffizienzen oder Lecks innerhalb komplexer Netzwerke wie Energienetze, Lieferketten und Finanzportfolios erkennen.
Grundlegende Syntaxstruktur
Sankey-Layoutdefinitionen basieren auf einem optimierten, 3-Spalten-CSV-Format (komma-getrennte Werte). Jede Datei beginnt entweder mit dem “sankey oder sankey-beta Typ-Deklarationskopf, gefolgt von einzelnen Flusszeilen, die einem strengen “Quelle,Ziel,Wert“-Muster.
sankey
Quellknoten,Zielknoten,150,50
Zielknoten,Endausgabeknoten,90,25
Syntaxreferenz
Die Tabelle unten erläutert die wichtigsten Datenregeln und Parameter, die erforderlich sind, um ein Sankey-Diagramm korrekt in Mermaid.js zu parsen.
| Syntaxelement | Typanforderung | Beschreibung und Verwendungsregeln |
|---|---|---|
| Deklaration | Schlüsselwort-Bezeichner | Initialisiert die Stream-Rendering-Layout-Engine. Akzeptiert “sankey oder das rückwärtskompatible “sankey-beta“-Zeichenfolge. |
| Quellknoten | Zeichenfolgenbezeichnung | Die ursprüngliche Kategorie, in der der Ressourcenfluss beginnt. Groß-/Kleinschreibung beachtender Bezeichner. |
| Zielknoten | Zeichenfolgenbeschriftung | Der Empfängerknoten, an dem das spezifische Linkvolumen endet. |
| Wert | Positive Gleitkommazahl / Ganzzahl | Der numerische Gewichtung des Flusses. Die Dicke des gerenderten Pfades wird direkt relativ zu diesem Wert berechnet. |
| Kommentarzeile | Syntaxindikator | Jeder Text, der durch ein doppeltes Prozentzeichen (“%%) wird vom Compiler ignoriert, was saubere Datenannotationen ermöglicht. |
Behandlung spezialisierter Zeichen in Knotenbeschriftungen
Da Kommas und Anführungszeichen innerhalb des Layout-Engines als strukturelle Systemtrennzeichen dienen, erfordern spezialisierte Namenseingaben spezifische Escape-Techniken, um sicherzustellen, dass sie korrekt auf der Frontend-Leinwand angezeigt werden.
1. Kommas in Namen
Wenn eine spezifische Knotenbeschriftung ein wörtliches Komma erfordert, umschließen Sie den gesamten Knoten-String-Container mit einem Paar standardisierter doppelter Anführungszeichen:
sankeyrnBudgetpool,"Operations, Gehaltsabrechnung & Verwaltung",45000
2. Anführungszeichen in Namen
Um doppelte Anführungszeichen innerhalb einer Beschriftung explizit darzustellen, umschließen Sie den gesamten Parameter mit äußeren Anführungszeichen und verwenden Sie ein dupliziertes Paar doppelter Anführungszeichen (“"") innerhalb der Zielwertzeichenfolge:
sankeyrnServer-Cluster,"Intern ""Edge""-Knoten",850
Erweiterte Themenkonfiguration (Anweisungen)
Sie können die Darstellung Ihres Diagramms verfeinern, indem Sie einen Frontmatter-Konfigurationsblock am Anfang Ihres Dokumentausschnitts übergeben. Dadurch können Sie Link-Stile, Layout-Padding, Textstile und Elementausrichtungen direkt von Ihrem Roh-Text-Editor aus steuern.
Sankey-Konfigurations-Attributmatrix
| Eigenschaftsname | Akzeptierte Werte | Visueller Ergebnis |
|---|---|---|
showValues |
wahr | falsch |
Schaltet ein, ob der numerische Flusswerttext direkt innerhalb der Knotenbeschriftungsboxen gedruckt wird. |
linkColor |
'source' | 'target' | 'gradient' | '#hex' |
Bestimmt die Farbzuordnung der Verbindungswege.'gradient' mischt die Farben nahtlos zwischen den verbundenen Entitäten. |
nodeAlignment |
'justify' | 'left' | 'right' | 'center' |
Justiert strukturelle Spalten über das Raster des Zeichenbereichs. |
labelStyle |
'legacy' | 'umrandet' |
'umrandet' fügt eine Hintergrundstrichmaske hinter den Text hinzu, um eine hohe Scannbarkeit über komplexe Layouts zu gewährleisten. |
nodeWidth |
Ganzzahl (Pixel) | Legt die Breite der Knotenrechtecke fest (Standard: 10). |
nodePadding |
Ganzzahl (Pixel) | Legt die vertikalen Abstandseinstellungen zwischen gestapelten Zeilen fest (Standard: 12). |
Realitätsnahe Vorlage: Verteilung von sauberer Energie-Infrastruktur
Diese umfassende Vorlage verfolgt ein Infrastruktur-Netzwerk-Management-System. Sie zeigt Frontmatter-Konfigurationen – Einstellung von sanften Link-Farbverläufen, umrandete Typografie-Stile und Deaktivierung von Inline-Metrikzählen – in Kombination mit einer mehrschichtigen Layoutstruktur.
---
config:
sankey:
showValues: false
linkColor: 'gradient'
nodeAlignment: 'justify'
labelStyle: 'outlined'
nodeWidth: 15
nodePadding: 18
---
sankey
%% Quelldatenzeilen
Solarfarm,Stromspeicher-Netz,120.50
Windkraftanlagen,Stromspeicher-Netz,180.75
Wasserkraftwerk,Direkte Industrielinie,210.00
Biokraftstoff-Importe,Thermische Notstation,45.25
%% Verteilungsknoten
Stromspeicher-Netz,Haushaltsverbraucherlinien,145.00
Stromspeicher-Netz,Direkte Industrielinie,110.25
Stromspeicher-Netz,Verluste und Dissipation im System,46.00
%% Endpunkte der Lieferung
Direkte Industrielinie,Schwerindustriehub,295.00
Direkte Industrielinie,Handels- und Einzelhandelssektoren,25.25
Thermische Notstation,Handels- und Einzelhandelssektoren,45.25
Häufige Syntax-Fehler und Systembeschränkungen
Beim Kompilieren von sehr dichten Daten-Arrays können einige subtile Konfigurationsfehler zu Unterbrechungen beim Layout-Parsing führen. Behalten Sie diese Fehlerbehebungsregeln im Gedächtnis:
- Genauige Spaltenprüfung: Jede einzelne Zeile nach der Hauptkopfzeile muss genau drei durch Kommas getrennte Parameter enthalten. Das Hinzufügen einer vierten Spalte oder das Auslassen eines Wertgewichts wird die Diagrammkompilierung vollständig stoppen.
- Leerzeilen-Zulassung: Im Gegensatz zu traditionellen starren Regeln für die Datenparsung erlaubt Mermaid Ihnen, leere, saubere Zeilen innerhalb des Codeblocks hinzuzufügen, um logisch verschiedene Ebenen oder Verarbeitungsphasen Ihrer Modell-Daten zu trennen.
- Zirkuläre Schleifenblöcke: Sankey-Strukturen sind streng auf gerichtete azyklische Graphen (DAGs) ausgelegt. Wenn Sie Knoten A mit Knoten B verbinden und dann versuchen, eine Zeilenpfadverbindung von Knoten B zurück zu Knoten A zu schreiben, wird die Layout-Engine-Mathematik eine Rückkopplungsstörung erfahren und fehlschlagen.
- Einschränkungen für Wertdaten: Wertfelder können nur positive Zahlen verarbeiten. Negative Werte oder rohe alphabetische Zeichen können nicht in Breitenparameter umgesetzt werden.