mailinapp
Documentation menu

Bloque Sankey

Bandas de flujo proporcional entre nodos nombrados — filas de Desde, Hacia y Valor, por ejemplo fuente de tráfico → página de destino → conversión. Es la forma indicada para rastrear hacia dónde va el volumen a medida que se mueve por una secuencia de etapas, cuando la única secuencia lineal de un embudo simple no basta para mostrar rutas ramificadas.

Cómo funciona

A diferencia de cualquier otro gráfico hermano de esta familia, los nodos de un diagrama Sankey no se definen directamente — no existe ninguna columna de "nodo" que completar. En cambio, los nodos se derivan de las etiquetas que se repiten en las columnas Desde y Hacia: escribe "Visitó" como valor de Desde en una fila y como valor de Hacia en otra, y es el mismo nodo en ambos casos. La posición de izquierda a derecha de cada nodo (en qué capa vertical se ubica) también se calcula, mediante un recorrido de ruta más larga sobre el grafo dirigido que describen tus filas. Un nodo sin entradas comienza en la capa más a la izquierda, y cada otro nodo se ubica una capa después de su predecesor más alejado en sentido ascendente. Nada de esto es algo que se posicione a mano.

El valor de cada enlace es simplemente una cantidad positiva — un flujo no tiene una lectura "negativa" con sentido, así que un valor definido en cero o negativo se descarta en el momento de agrupar en lugar de dibujarse como una banda invertida o de ancho cero. Un autobucle (una fila cuyo Desde y Hacia son la misma etiqueta) se omite directamente, ya que un nodo que fluye hacia sí mismo no tiene una banda con sentido en un diseño de izquierda a derecha. Las filas repetidas que describen el mismo par Desde/Hacia se suman entre sí, no se sobrescriben — dos filas que digan ambas "Referido → Se registró" realmente significan el doble de flujo, a diferencia de una sola medición que una edición posterior debería reemplazar.

El color de un enlace toma por defecto el propio color de su nodo de origen (la lectura convencional "coloreado por origen" de un Sankey) a menos que lo anules por fila mediante la celda opcional de Color de flujo. Los colores de los nodos en sí no son directamente configurables — un nodo simplemente toma la siguiente ranura de color fija en orden de primera aparición, la misma asignación de color basada en identidad que usan todos los demás gráficos de esta familia.

Pasado el límite de nodos o enlaces (12 nodos, 24 enlaces), un nodo desbordado se descarta, no se agrupa. Esa es una diferencia deliberada respecto a cómo manejan el desbordamiento el gráfico circular o el mapa de árbol. Fusionar dos extremos de flujo distintos en un nodo sintético "Otros" tergiversaría lo que realmente muestra el diagrama, ya que todo el sentido de un Sankey es rastrear rutas distintas, no resumir una porción de un todo.

Cualquier enlace cuyo origen o destino haya sido eliminado junto con un nodo recortado también se descarta. Sin embargo, la tabla de datos sigue enumerando cada fila que definiste sin importar si llegó al diagrama dibujado, incluyendo flujos que un error de autoría cíclico (A → B → A) deja sin dibujar pero que siguen siendo reales. Nada de lo que escribiste desaparece silenciosamente de la vista.

Campos configurables:

  • Título del gráfico — texto de encabezado opcional sobre el gráfico.
  • Flujos (desde, hacia, valor) — la lista de filas: una etiqueta Desde, una etiqueta Hacia, un Valor numérico, y una anulación opcional de Color de flujo por flujo.
  • Color de fondo, relleno, borde y radio de borde de la tarjeta.
  • Color/tamaño del título y color/tamaño de la leyenda — estilos de texto para el encabezado y el texto de la leyenda/tabla debajo de la imagen.

Si todavía no se ha definido ninguna fila de flujo válida — todas las filas en blanco, con autobucles, o no positivas — el bloque omite la imagen. En su lugar, renderiza solo su título y el marco de la tarjeta, con un simple aviso de "Agrega al menos una fila de datos de flujo (desde, hacia, valor) para renderizar este gráfico".

Ejemplos

Un diagrama de recorrido de usuario — Visitó → Se registró → Compró, con una segunda rama hacia Abandonó y una tercera hacia Se dio de baja — hace visibles la caída y la ramificación en una sola imagen donde un embudo forzaría todo a una única línea. Un flujo de asignación de presupuesto (Ingresos → Presupuestos de departamento → Partidas) le da a un resumen financiero un rastro visual de hacia dónde se mueve el dinero etapa por etapa. Un equipo de soporte puede hacer fluir el volumen de tickets desde el Canal (correo/chat/teléfono) a través de la Categoría (facturación/error/cómo-hacer) hasta la Resolución (resuelto/escalado), revelando qué canales alimentan qué resultados.

Cómo se ve la alternativa estática

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

El texto alternativo enumera cada banda de flujo dibujada; la tabla enumera cada fila definida, incluidas las que un límite de nodo/enlace o un diseño cíclico dejó sin dibujar.

Relacionado