Qué es un Diagrama de Sankey: Visualiza Flujos de Usuario y Analítica de Producto en SaaS

Nota de la autora

Como fundadora de una empresa de visualización de datos, he visto a innumerables equipos tener dificultades para comprender el complejo comportamiento de los usuarios. A menudo nos quedamos atascados mirando cifras agregadas que ocultan la historia real. Los diagramas de Sankey siempre me han fascinado como una forma poderosa de desenredar esa complejidad y ver literalmente los caminos que toman los usuarios a través de una aplicación.

Declaración de transparencia: Este artículo lo publica Dashrendr. Cuando Dashrendr es relevante para la discusión —especialmente en la preparación de datos para su visualización— lo digo directamente, incluyendo sus limitaciones actuales.

¿Qué es un Diagrama de Sankey?

Un diagrama de Sankey es un tipo de diagrama de flujo que visualiza el movimiento de una cantidad desde un punto de partida hasta un punto final a través de múltiples etapas o procesos. Su característica más definitoria es que el ancho de las flechas o corrientes (llamadas enlaces) es directamente proporcional a la cantidad de flujo que representan. En resumen, una corriente más ancha significa una cantidad mayor.

Esto hace que la definición de un gráfico de Sankey sea simple: es una visualización de flujos. Te ayuda a ver no solo dónde empiezan y terminan las cosas, sino también la escala de los recorridos intermedios. A diferencia de un simple diagrama de flujo, los anchos proporcionales te dan una idea inmediata de las contribuciones más significativas a un flujo.

Los componentes principales de un diagrama de Sankey son:

• Nodos: Son los bloques rectangulares que representan diferentes etapas, categorías o estados en el proceso (p. ej., 'Registrado', 'Creó Proyecto', 'Invitó a Compañero').
• Enlaces: Son las conexiones o corrientes que fluyen entre los nodos, representando visualmente la cantidad que se mueve de un nodo al siguiente.

El concepto se remonta a 1898, cuando el capitán irlandés Matthew Sankey lo utilizó para ilustrar la eficiencia energética de una máquina de vapor. Pero uno de sus ejemplos históricos más famosos es el mapa de 1869 de Charles Minard sobre la desastrosa campaña rusa de Napoleón, que combina brillantemente un mapa de flujo tipo Sankey con datos de temperatura y tiempo. Según Edward Tufte, un pionero en la visualización de datos, el gráfico de Minard puede ser el mejor gráfico estadístico jamás dibujado. Hoy en día, son una herramienta esencial para la visualización de flujos de usuario en aplicaciones de software modernas.

Cómo Leer e Interpretar un Diagrama de Sankey

A primera vista, un diagrama de Sankey puede parecer una compleja red de ríos de colores. Pero una vez que entiendes su estructura, se convierte en una herramienta intuitiva para el análisis. Responder a la pregunta común, "¿Cómo se interpreta un diagrama de Sankey?" es sencillo si sigues el flujo.

Paso 1: Identifica los Puntos de Inicio y Fin

Mira en el extremo izquierdo las fuentes y en el extremo derecho los destinos. El ancho total de todos los enlaces que se originan en los nodos de inicio representa la cantidad inicial total. El diagrama muestra cómo esta cantidad inicial se distribuye y transforma a medida que avanza hacia los nodos finales.

Paso 2: Sigue una Ruta Específica

Elige un único nodo de origen y sigue su enlace a medida que se mueve por el diagrama. Observa cómo la corriente se divide, se fusiona con otras corrientes y cambia de ancho. Esta ruta representa un recorrido o segmento específico. Por ejemplo, podrías seguir la ruta de los usuarios que se registraron a través de Google para ver con qué funciones interactúan primero.

Paso 3: Presta Atención al Ancho del Enlace

El ancho es el elemento más crítico. Un enlace grueso indica un gran flujo, mientras que un enlace delgado representa uno pequeño. Esto te permite identificar rápidamente las rutas más significativas y los posibles cuellos de botella o abandonos. Si un enlace de 'Prueba Gratuita' a 'Suscrito' es muy delgado, es un claro indicador de un problema de conversión.

Paso 4: Analiza los Nodos Intermedios

Los nodos en medio del diagrama muestran las etapas intermedias del proceso. El flujo total que entra en un nodo debe ser igual al flujo total que sale de él. Analizar estos nodos puede revelar cómo se comportan diferentes segmentos en pasos cruciales. Por ejemplo, podrías ver que los usuarios de la 'Campaña A' tienen más probabilidades de pasar por el nodo 'Subir Datos' que los usuarios de la 'Campaña B'.

¿Por Qué Usar Diagramas de Sankey en un Contexto SaaS?

Aunque los diagramas de Sankey se utilizan en muchos campos, son excepcionalmente potentes para las empresas SaaS que intentan comprender el comportamiento de los usuarios. Las métricas agregadas como los Usuarios Activos Diarios son útiles, pero no te dicen *qué* están haciendo esos usuarios. Un estudio de Forrester Research encontró que las empresas que priorizan las decisiones basadas en datos tienen un 58% más de probabilidades de superar sus objetivos de ingresos. Los diagramas de Sankey convierten esos datos en historias accionables.

Visualización de Embudos de Onboarding de Usuarios

Un caso de uso clásico es mapear el recorrido de onboarding del usuario. Puedes visualizar el flujo desde 'Registrado' a 'Email Verificado', 'Creó Primer Proyecto' e 'Invitó a Compañero'. Un diagrama de Sankey te mostrará inmediatamente dónde abandonan los usuarios. Si una corriente enorme fluye hacia 'Email Verificado' pero solo un hilo llega a 'Creó Primer Proyecto', has encontrado un punto de fricción crítico en tu secuencia de activación.

Mapeo de Rutas de Adopción de Funciones

¿Qué funciones conducen a la retención a largo plazo? Un diagrama de Sankey puede mapear las rutas que toman los usuarios después de su primera semana. Podrías descubrir que los usuarios que interactúan con tu función de 'Instantáneas Programadas' tienen muchas más probabilidades de fluir hacia el nodo de 'Retenido después de 90 días'. Esta información es oro, y te dice qué funciones destacar para los nuevos usuarios.

Análisis de Ingresos y Rutas de Churn

Los diagramas de Sankey no son solo para el comportamiento del usuario. Puedes usarlos para visualizar flujos financieros. Por ejemplo, podrías mapear el MRR (Ingreso Mensual Recurrente) de diferentes fuentes ('Nuevos Clientes', 'Upgrades', 'Expansión') a diferentes planes de suscripción. Por otro lado, puedes visualizar las rutas de churn, mostrando la secuencia de eventos o inactividad que precede a la cancelación de la suscripción de un usuario. Un estudio de PWC señala que el 32% de los clientes abandonará una marca que aman después de una sola mala experiencia, lo que hace vital detectar estas rutas negativas a tiempo.

Diagrama de Sankey vs. Otros Diagramas de Flujo (como los Gráficos de Embudo)

Los equipos de SaaS a menudo usan gráficos de embudo para seguir las conversiones. Entonces, ¿en qué se diferencia un diagrama de Sankey?

Un gráfico de embudo es ideal para visualizar una única ruta lineal con abandonos sucesivos. Es perfecto para un embudo simple de ventas o conversión donde la única opción en cada etapa es continuar o abandonar. La limitación clave es que no puede mostrar a los usuarios moviéndose entre diferentes estados o volviendo a los anteriores.

Un diagrama de Sankey sobresale donde un gráfico de embudo se queda corto. Puede visualizar relaciones de muchos a muchos y rutas complejas y ramificadas. Si un usuario puede ir desde 'Dashboard' a 'Función A', 'Función B' o 'Ajustes', un diagrama de Sankey puede mostrar el flujo proporcional a cada una de esas opciones. Revela la realidad no lineal y desordenada del comportamiento del usuario que un simple embudo oculta.

La conclusión clave a nivel de arquitectura es esta: Usa un gráfico de embudo para procesos lineales de una sola ruta. Usa un diagrama de Sankey cuando necesites comprender el flujo entre múltiples estados, incluyendo rutas ramificadas, flujos que se fusionan y relaciones de muchos a muchos.

Cómo Construir la Estructura de Datos para un Diagrama de Sankey

Crear un diagrama de Sankey requiere que tus datos estén en un formato específico. Necesitas una lista de flujos, donde cada flujo tiene tres componentes: un origen, un destino y un valor. Por ejemplo: ['Registrado', 'Email Verificado', 1000].

Aquí es donde una plataforma de analítica embebida como Dashrendr se vuelve esencial. Aunque Dashrendr no ofrece un componente nativo de gráfico de Sankey en su constructor de arrastrar y soltar *a día de hoy*, sobresale en el paso fundamental: preparar tus datos. Nuestra plataforma se basa en dos vías de ingesta: conectores directos a bases de datos y una API REST para enviar datos pre-agregados.

Puedes conectar Dashrendr directamente a tu base de datos de producción (como PostgreSQL o MySQL) o a tu data warehouse (BigQuery). Desde allí, puedes escribir una consulta SQL simple para transformar tus datos de eventos al formato [Origen, Destino, Valor] requerido. Este es uno de los muchos casos de uso de analíticas integradas que van más allá de los simples KPIs.

Alternativamente, tu backend puede procesar los registros de eventos, agregarlos en el formato Sankey y enviar esos datos a Dashrendr a través de nuestra API REST. Este enfoque es perfecto para escenarios complejos y minimiza la carga en tu base de datos principal. Una vez que los datos están preparados, puedes pasarlos a una librería de gráficos de JavaScript para renderizar la visualización final dentro de tu SaaS.

Herramientas y Librerías para Crear Diagramas de Sankey

Una vez que tienes tus datos estructurados correctamente, varias herramientas pueden ayudarte a visualizarlos. La elección depende de tus necesidades técnicas y del nivel de personalización deseado.

• Google Charts: La librería de Google Charts proporciona una implementación de diagramas de Sankey robusta y muy personalizable. Es una gran opción para desarrolladores web que buscan embeber gráficos interactivos en sus aplicaciones.
• D3.js: Para una máxima flexibilidad y personalización, D3.js es el estándar de la industria. Es una librería de bajo nivel que te da un control total sobre cada elemento visual, pero tiene una curva de aprendizaje más pronunciada. Muchas otras librerías, incluyendo Google Charts, están construidas sobre D3.
• Plotly: Plotly ofrece APIs de alto nivel en lenguajes como Python y JavaScript, lo que facilita la generación de visualizaciones complejas como los diagramas de Sankey con menos código.
• SankeyMATIC: Para una solución sin código, SankeyMATIC es una herramienta online gratuita que te permite pegar tus datos y generar un diagrama al instante. Es perfecta para exploraciones rápidas o informes puntuales, pero no para embeber dentro de un producto.

Mejores Prácticas para Diseñar Diagramas de Sankey Efectivos

Un Sankey mal diseñado puede ser más confuso que útil. Como en todo diseño de dashboards, la claridad es primordial. Según un informe de Tableau, el 90% de la información transmitida al cerebro es visual. Asegúrate de que tus visualizaciones cuenten la historia correcta.

• Mantenlo simple: Evita añadir demasiados nodos o etapas. Si el diagrama se convierte en un lío enmarañado, pierde su poder explicativo. Agrupa los flujos menores en una categoría 'Otros' si es necesario.
• Usa el color estratégicamente: El color se puede usar para agrupar flujos relacionados o destacar una ruta específica. Sin embargo, evita usar demasiados colores brillantes y competitivos, que pueden abrumar al usuario. Usa un color consistente para cada categoría principal a lo largo de su recorrido.
• Ordena los nodos lógicamente: Organiza los nodos para minimizar el cruce de enlaces tanto como sea posible. Un flujo limpio de izquierda a derecha es más fácil de seguir. La mayoría de las librerías lo gestionan automáticamente, pero a veces puedes influir en ello por cómo ordenas tus datos.
• Proporciona etiquetas claras y contexto: Etiqueta tus nodos y considera añadir anotaciones para las ideas clave. Un título y una breve descripción explicando lo que muestra el gráfico son esenciales.

Conclusión: Viendo el Flujo en tu SaaS

El diagrama de Sankey es más que un simple gráfico complejo; es una lente poderosa para comprender los sistemas dinámicos e interconectados que impulsan tu negocio SaaS. Al visualizar el flujo proporcional de usuarios, ingresos o eventos, puedes ir más allá de las métricas estáticas y agregadas y descubrir las historias ocultas en tus datos.

Ya sea que estés diagnosticando un embudo de onboarding con fugas, identificando las rutas de tus usuarios más valiosos, o simplemente tratando de construir un producto más informado por los datos, el diagrama de Sankey es una herramienta inestimable para cualquier desarrollador o equipo de producto.

¿Listo para obtener los datos que necesitas para visualizaciones potentes como esta? Dashrendr es una plataforma de analítica embebida visual-first para equipos SaaS, con conectores nativos para PostgreSQL, BigQuery, MySQL y más. Nuestros planes empiezan en solo 6€/mes, y puedes explorar todas nuestras funciones con una prueba gratuita de 14 días, sin necesidad de tarjeta de crédito. Empieza hoy y ve el flujo en tus datos.