Les diagrammes Sankey sont des outils de visualisation très efficaces utilisés pour représenter le flux directionnel de quantités entre des nœuds distincts au sein d’un système. En ajustant physiquement la largeur des liens de connexion proportionnellement au volume numérique du flux, ils permettent aux ingénieurs, aux analystes et aux équipes opérationnelles d’identifier instantanément les principaux contributeurs, les affectations de ressources, les inefficacités ou les fuites au sein de réseaux complexes tels que les réseaux électriques, les chaînes d’approvisionnement et les portefeuilles financiers.
Structure de syntaxe de base
Les définitions de disposition Sankey sont basées sur un format structuré CSV (valeurs séparées par des virgules) optimisé à trois colonnes. Chaque fichier commence par soit le sankey ou sankey-beta déclaration de type d’en-tête, suivie de lignes de flux individuelles suivant un modèle strict Source, Cible, Valeur modèle.
sankey
Nœud source,Nœud cible,150,50
Nœud cible,Nœud de sortie final,90,25
Référence de syntaxe
Le tableau ci-dessous détaille les règles et paramètres principaux des données nécessaires pour analyser correctement un diagramme Sankey dans Mermaid.js.
| Élément de syntaxe | Exigence de type | Description et règles d’utilisation |
|---|---|---|
| Déclaration | Identificateur de mot-clé | Initialise le moteur de rendu de disposition en flux. Accepte sankey ou le mode compatible avec les versions antérieures sankey-beta chaîne. |
| Nœud source | Étiquette de chaîne | La catégorie d’origine où commence le flux de ressources. Identifiant sensible à la casse. |
| Nœud cible | Étiquette de chaîne | Le nœud destinataire où le volume de lien spécifique se termine. |
| Valeur | Nombre flottant / entier positif | Le poids numérique du flux. L’épaisseur du chemin rendu est directement calculée en fonction de cette valeur. |
| Ligne de commentaire | Indicateur de syntaxe | Tout texte précédé d’un signe de pourcentage double (“%%) est ignoré par le compilateur, permettant des annotations de données propres. |
Gestion des caractères spéciaux dans les étiquettes de nœuds
Parce que les virgules et les guillemets servent de délimiteurs système structurels au sein du moteur de mise en page, les entrées de nom spécialisées nécessitent des techniques d’échappement spécifiques pour garantir qu’elles s’affichent correctement sur le canevas frontend.
1. Virgules dans les noms
Si une étiquette de nœud spécifique nécessite une virgule littérale, entourez l’ensemble du conteneur de chaîne de nœud avec une paire de guillemets doubles standards :
sankey
Pool budgétaire,"Opérations, Paie et Administration",45000
2. Guillemets dans les noms
Pour afficher explicitement des guillemets doubles à l’intérieur d’un nom d’étiquette, entourez l’ensemble du paramètre avec des guillemets externes, et utilisez une paire de guillemets doubles (“"") à l’intérieur de la chaîne de valeur cible :
sankey
Clusters serveurs,"Nœud interne ""Edge""",850
Configuration avancée du thème (directives)
Vous pouvez affiner la présentation de votre diagramme en passant un bloc de configuration frontmatter en haut de votre extrait de document. Cela vous permet de contrôler les styles des liens, les marges de mise en page, les styles de texte et l’alignement des éléments directement depuis votre éditeur de texte brut.
Matrice des attributs de configuration Sankey
| Nom de la propriété | Valeurs acceptées | Résultat visuel |
|---|---|---|
showValues |
vrai | faux |
Active ou désactive l’affichage du texte de la valeur numérique du flux directement à l’intérieur des boîtes d’étiquette des nœuds. |
linkColor |
'source' | 'cible' | 'dégradé' | '#hex' |
Détermine le mappage de couleur des chemins de lien.'dégradé' mélange les couleurs de manière fluide entre les entités connectées. |
nodeAlignment |
'justifier' | 'gauche' | 'droite' | 'centré' |
Aligne les colonnes structurelles sur la grille d’espace de la toile. |
labelStyle |
'ancien' | 'en trait' |
'en trait' ajoute un masque de contour d’arrière-plan derrière le texte pour garantir une grande lisibilité sur des mises en page complexes. |
largeurNoeud |
Entier (pixels) | Définit la largeur des rectangles des nœuds (par défaut : 10). |
espacementNoeud |
Entier (pixels) | Définit les paramètres d’espacement vertical entre les lignes empilées (par défaut : 12). |
Maquette du monde réel : Distribution du réseau d’énergie propre
Cette maquette complète suit un système de gestion du réseau électrique d’infrastructure. Elle met en évidence les configurations de frontmatter — définissant des dégradés de couleur doux pour les liens, des styles typographiques en trait, et désactivant les comptages de métriques en ligne — associés à une structure de mise en page en plusieurs niveaux.
---
config:
sankey:
showValues: false
linkColor: 'gradient'
nodeAlignment: 'justifié'
labelStyle: 'en trait'
nodeWidth: 15
nodePadding: 18
---
sankey
%% Lignes de données sources
Ferme solaire,Grille de stockage d'énergie,120.50
Éoliennes,Grille de stockage d'énergie,180.75
Barrage hydroélectrique,Ligne industrielle directe,210.00
Importations de biocarburants,Station de secours thermique,45.25
%% Nœuds de distribution
Grille de stockage d'énergie,Lignes de consommation résidentielle,145.00
Grille de stockage d'énergie,Ligne industrielle directe,110.25
Grille de stockage d'énergie,Pertes du système et dissipation,46.00
%% Nœuds de terminaison de livraison finale
Ligne industrielle directe,Hub de fabrication lourde,295.00
Ligne industrielle directe,Secteurs commerciaux de détail,25.25
Station de secours thermique,Secteurs commerciaux de détail,45.25
Péchés de syntaxe courants et contraintes du système
Lors de la compilation de tableaux de données très denses, quelques erreurs de configuration subtiles déclenchent des ruptures dans l’analyse du layout. Gardez ces règles de dépannage à l’esprit :
- Vérification exacte des colonnes : Chaque ligne d’élément suivant la déclaration d’en-tête principale doit contenir exactement trois paramètres séparés par des virgules. L’ajout d’une quatrième colonne ou la suppression d’une valeur entraînera complètement l’arrêt de la compilation du diagramme.
- Autorisations de lignes vides : Contrairement aux règles rigides de traitement des données traditionnelles, Mermaid vous permet d’ajouter des lignes vides et propres à l’intérieur du bloc de code pour séparer logiquement différents niveaux ou phases de traitement de vos données modèles.
- Blocs de boucles circulaires : Les structures Sankey sont conçues strictement autour de graphes acycliques orientés (DAG). Si vous connectez le nœud A au nœud B, puis tentez d’écrire un chemin de ligne reliant le nœud B de retour au nœud A, le moteur de mise en page subira une rupture de rétroaction et échouera.
- Contraintes des données de valeur : Les champs de valeur ne peuvent traiter que des nombres positifs. Les valeurs négatives ou les caractères alphabétiques bruts ne peuvent pas être rendus dans les paramètres de largeur.