Los diagramas Sankey son herramientas de visualización altamente efectivas utilizadas para representar el flujo direccional de cantidades entre nodos distintos dentro de un sistema. Al escalar el ancho físico de los enlaces conectores proporcionalmente al volumen numérico del flujo, permiten a ingenieros, analistas y equipos de operaciones identificar instantáneamente los principales contribuyentes, asignaciones de recursos, ineficiencias o fugas dentro de redes complejas como redes de energía, cadenas de suministro y carteras financieras.
Estructura básica de sintaxis
Las definiciones de diseño Sankey se basan en un formato estructural optimizado de CSV (valores separados por comas) de 3 columnas. Cada archivo comienza con el sankey o sankey-beta encabezado de declaración de tipo, seguido por líneas de flujo individuales que siguen un patrón estricto de Origen,Objetivo,Valor patrón.
sankey
Nodo de origen,Nodo de destino,150.50
Nodo de destino,Nodo de salida final,90.25
Referencia de sintaxis
La tabla a continuación desglosa las reglas y parámetros principales de datos necesarios para analizar correctamente un gráfico Sankey en Mermaid.js.
| Elemento de sintaxis | Requisito de tipo | Descripción y reglas de uso |
|---|---|---|
| Declaración | Identificador de palabra clave | Inicializa el motor de diseño de renderizado de flujo. Acepta sankey o el sankey-beta cadena. |
| Nodo de origen | Etiqueta de cadena | La categoría de origen donde comienza el flujo de recursos. Identificador sensible a mayúsculas y minúsculas. |
| Nodo de destino | Etiqueta de cadena | El nodo receptor donde termina el volumen de enlace específico. |
| Valor | Número positivo decimal / entero | El peso numérico del flujo. El grosor de la ruta renderizada se calcula directamente en relación con este valor. |
| Línea de comentario | Indicador de sintaxis | Cualquier texto precedido por un signo de porcentaje doble (“%%) es ignorado por el compilador, permitiendo anotaciones de datos limpias. |
Manejo de caracteres especializados en etiquetas de nodos
Dado que las comas y las comillas sirven como delimitadores estructurales del sistema dentro del motor de diseño, las entradas de nombres especializadas requieren técnicas específicas de escape para garantizar que se muestren correctamente en la superficie de visualización del frontend.
1. Comas en nombres
Si una etiqueta de nodo específica requiere una coma literal, envuelva todo el contenedor de cadena del nodo entre un par de comillas dobles estándar:
sankeyrnPresupuesto Pool,"Operaciones, Nómina y Administración",45000
2. Comillas en nombres
Para representar explícitamente comillas dobles dentro de un nombre de etiqueta, envuelva el parámetro completo entre comillas externas y use un par duplicado de comillas dobles (“"") dentro de la cadena de valor objetivo:
sankeyrnClusters de servidores,"Nodo interno ""Borde""",850
Configuración avanzada de temas (directivas)
Puedes ajustar finamente la presentación de tu diagrama pasando un bloque de configuración de frontmatter en la parte superior de tu fragmento de documento. Esto te permite controlar estilos de enlaces, relleno de diseño, estilos de texto y alineaciones de elementos directamente desde tu editor de texto sin formato.
Matriz de atributos de configuración de Sankey
| Nombre de propiedad | Valores aceptados | Resultado visual |
|---|---|---|
mostrarValores |
verdadero | falso |
Conmuta si el texto del valor numérico de flujo se imprime directamente dentro de las cajas de etiquetas de los nodos. |
colorEnlace |
'origen' | 'destino' | 'gradiente' | '#hex' |
Determina el mapeo de color para las rutas de enlace.'gradiente' mezcla los colores suavemente entre las entidades conectadas. |
alineacionNodo |
'justificar' | 'izquierda' | 'derecha' | 'centro' |
Alinea las columnas estructurales a través de la cuadrícula del espacio del lienzo. |
estiloEtiqueta |
'herencia' | 'contorneado' |
'contorneado' añade una máscara de trazo de fondo detrás del texto para garantizar una alta escaneabilidad sobre diseños complejos. |
anchoNodo |
Entero (píxeles) | Establece el ancho de los rectángulos de nodo (predeterminado: 10). |
espaciadoNodo |
Entero (píxeles) | Establece los parámetros de separación vertical entre filas apiladas (predeterminado: 12). |
Plano del mundo real: Distribución de red de energía limpia
Este plano completo rastrea un sistema de gestión de red de infraestructura eléctrica. Muestra configuraciones de frontmatter: establece gradientes de color suaves en los enlaces, estilos tipográficos contorneados y desactiva los recuentos de métricas en línea, todo combinado con una estructura de diseño en múltiples niveles.
---
config:
sankey:
mostrarValores: false
colorEnlaces: 'gradiente'
alineacionNodos: 'justificar'
estiloEtiquetas: 'contorneado'
anchoNodo: 15
espaciadoNodo: 18
---
sankey
%% Filas de datos de origen
Granja solar,Red de almacenamiento de energía,120.50
Turbinas eólicas,Red de almacenamiento de energía,180.75
Presas hidroeléctricas,Línea industrial directa,210.00
Importaciones de biocombustibles,Estación de respaldo térmico,45.25
%% Nodos de distribución
Red de almacenamiento de energía,Líneas de consumo residencial,145.00
Red de almacenamiento de energía,Línea industrial directa,110.25
Red de almacenamiento de energía,Pérdidas del sistema y disipación,46.00
%% Nodos de terminación de entrega final
Línea industrial directa,Hub de fabricación pesada,295.00
Línea industrial directa,Sectores comerciales minoristas,25.25
Estación de respaldo térmico,Sectores comerciales minoristas,45.25
Errores comunes de sintaxis y limitaciones del sistema
Al compilar matrices de datos altamente densas, algunos errores sutiles de configuración provocarán interrupciones en el análisis del diseño. Tenga en cuenta estas reglas de solución de problemas:
- Verificación exacta de columnas: Cada línea de elemento que sigue a la declaración del encabezado principal debe contener exactamente tres parámetros separados por comas. Añadir una cuarta columna o omitir un valor provocará la interrupción completa de la compilación del diagrama.
- Permisos para líneas vacías: A diferencia de las reglas rígidas tradicionales de análisis de datos, Mermaid le permite añadir líneas vacías y limpias dentro del bloque de código para separar lógicamente diferentes niveles o fases de procesamiento de sus datos del modelo.
- Bloques de bucle circular: Las estructuras Sankey están diseñadas estrictamente alrededor de Grafos Dirigidos Acíclicos (DAG). Si conecta el Nodo A con el Nodo B, y luego intenta escribir una ruta que conecte el Nodo B de vuelta al Nodo A, el motor de diseño experimentará una ruptura de retroalimentación y generará un error.
- Restricciones de datos de valor: Los campos de valor solo pueden analizar números positivos. Los valores negativos o caracteres alfabéticos sin procesar no pueden representarse como parámetros de ancho.