Mermaid Dokument

Appearance

Sankey-Diagramm (v10.3.0+) ​

Ein Sankey-Diagramm ist eine Visualisierung, die verwendet wird, um einen Fluss von einem Satz von Werten zu einem anderen darzustellen.

WARNING

Dies ist ein experimentelles Diagramm. Seine Syntax ist sehr nah an reinem CSV, wird jedoch in naher Zukunft erweitert.

Die miteinander verbundenen Elemente werden Knoten genannt und die Verbindungen werden Links genannt.

Beispiel ​

Dieses Beispiel stammt von observable. Es kann jedoch in Bezug auf Größe und Farben etwas anders dargestellt werden.

Code:
mermaid

Syntax ​

Die Idee hinter der Syntax ist, dass ein Benutzer zuerst das Schlüsselwort sankey-beta eingibt, dann den rohen CSV unterhalb einfügt und das Ergebnis erhält.

Es implementiert den CSV-Standard, wie hier beschrieben, mit subtilen Unterschieden:

  • CSV muss nur 3 Spalten enthalten
  • Es ist erlaubt, leere Zeilen ohne Komma-Separatoren aus visuellen GrĂĽnden zu haben

Grundsätzlich ​

Es wird impliziert, dass die 3 Spalten im CSV entsprechend source, target und value darstellen sollten:

Code:
mermaid

Leere Zeilen ​

CSV unterstützt standardmäßig keine leeren Zeilen ohne Komma-Trennzeichen. Aber Sie können sie hinzufügen, wenn nötig:

Code:
mermaid

Kommas ​

Wenn Sie ein Komma benötigen, setzen Sie es in Anführungszeichen:

Code:
mermaid

Doppelte Anführungszeichen ​

Wenn Sie ein doppeltes Anführungszeichen benötigen, setzen Sie ein Paar davon in den zitierten Text:

Code:
mermaid

Konfiguration ​

Sie können die Linkfarben, Knoten-Ausrichtungen und Diagrammdimensionen anpassen.

html
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>

Linkfarbe ​

Sie können die Farbe der Links anpassen, indem Sie linkColor auf eines dieser Elemente setzen:

  • source - der Link hat die Farbe des Quellknotens
  • target - der Link hat die Farbe des Zielknotens
  • gradient - die Linkfarbe wechselt sanft zwischen den Farben des Quell- und Zielknotens
  • hex Code einer Farbe, wie #a1a1a1

Knoten-Ausrichtung ​

Das Layout des Diagramms kann geändert werden, indem die nodeAlignment auf Folgendes gesetzt wird:

  • justifizieren
  • zentrieren
  • links
  • rechts