Ver cómo se conectan las pantallas de un flow

El Flow & Paywall Builder muestra una pantalla a la vez, por lo que en un onboarding largo con ramas de quiz es difícil ver adónde lleva cada respuesta. El skill flow-generator puede dibujar el flow completo como un mapa: cada pantalla en orden, cada camino entre ellas y cada punto donde el camino se divide o termina.

El mapa es un único archivo HTML que se abre en el navegador. Incluye las previsualizaciones de las pantallas, así que puedes enviárselo a un compañero y podrá abrirlo sin ninguna configuración previa.

Important

El mapa forma parte del skill flow-generator, por lo que no hay nada adicional que instalar: sigue los pasos de instalación del flow-generator. Dibujar el mapa solo lee el flow: no guarda nada en tu dashboard.

Para qué sirve

  • Revisar la ramificación antes de publicar: comprueba qué pantalla abre cada respuesta del cuestionario y dónde se vuelven a unir las ramas.
  • Detectar errores de conexión: el mapa señala las pantallas a las que nada dirige y las que no tienen salida. Ambas pasan la comprobación de publicación, pero dejan a los usuarios bloqueados en el dispositivo.
  • Revisar un flow creado por otra persona: lee un onboarding de 20 pantallas de un vistazo, sin tener que recorrerlo pantalla por pantalla.
  • Compartir la estructura: envía el archivo a un diseñador o a un product manager que no use el Adapty Dashboard.

Cómo usarlo

El skill abre el mapa por sí solo después de construir o reconstruir un flow de diez o más pantallas, o después de añadir o modificar una rama. Para abrirlo con cualquier flow, pregunta en lenguaje natural:

How are the screens in my "Sleep onboarding" flow connected?
Where does the "Not really" button on the Busy mind screen lead?

El skill obtiene el flow, renderiza cada pantalla y abre el mapa. Para desplazarte, arrastra el fondo o usa el scroll. Para hacer zoom, usa + y −, o haz clic en Fit para ver el flow completo. Para ampliar una pantalla, haz clic en ella.

Qué muestra el mapa

Las pantallas van de izquierda a derecha desde la primera. Las pantallas que una rama coloca una al lado de la otra aparecen en la misma columna.

En el mapaSignificado
Flecha grisUn camino que no depende de una respuesta.
Flecha morada con etiquetaUn caso de una rama. La etiqueta indica la respuesta que la activa, por ejemplo goal = Falling asleep faster. La etiqueta otherwise marca el caso por defecto.
Flecha discontinuaVuelve a una pantalla con un número inferior.
Etiqueta after timerLa pantalla avanza sola cuando termina su temporizador.
Etiqueta branchesEl camino se divide en esta pantalla.
Etiquetas buys, restores, closes flow, backAcciones que abandonan la pantalla sin abrir otra.
Etiqueta nothing leads hereNinguna pantalla conduce a esta, por lo que los usuarios no llegan a ella.
Etiqueta no way outNingún botón abre otra pantalla, realiza una compra ni cierra el flow. Un botón Back por sí solo no cuenta.

Para resaltar los paths de una pantalla, coloca el cursor sobre ella. Las demás pantallas y flechas se atenúan.

Ejemplos

Ramificación según las respuestas del cuestionario. La pantalla Goal envía cada respuesta a su propia pantalla, y Busy mind vuelve a ramificarse. Los tres caminos convergen en What keeps you up.

El mapa de pantallas de un onboarding de sueño: la pantalla Goal con tres flechas moradas etiquetadas con respuestas del cuestionario que llevan a tres pantallas, una segunda ramificación en la pantalla Busy mind y los caminos que se unen antes de la pantalla Sound

Una rama sin salida. Los usuarios que responden After midnight en la pantalla Bedtime van a Name, pero el botón Continue de Name no tiene ninguna acción asignada. El mapa lo marca como no way out.

La pantalla Bedtime se ramifica hacia Name y Wind-down. Name lleva una etiqueta roja no way out y no tiene ninguna flecha de salida, mientras que Wind-down continúa hacia la siguiente pantalla

Sin navegador

Si tu herramienta de IA se ejecuta en una máquina remota, el skill imprime el mismo mapa como texto en el chat:

◆ Bedtime
    bedtime = After midnight  →  Name
    otherwise  →  Wind-down
    back
▢ Name
    back
    (no way out)
▢ Wind-down
    "Continue"  →  Reaction: wind-down

El símbolo ◆ marca una pantalla donde el camino se divide. Etiquetas como back listan las acciones que salen de una pantalla sin abrir otra.

Limitaciones

  • Muestra la configuración, no el dispositivo: El mapa dibuja los caminos que define el flow. Para confirmar que un temporizador se activa o que una rama abre la pantalla correcta en un teléfono, usa la vista previa en dispositivo.
  • Las vistas previas de pantalla tienen las mismas limitaciones que la vista previa del skill: Los precios se muestran como nombres de variables y los toggles aparecen en su estado desactivado. Consulta La vista previa muestra una pantalla, en un estado.
  • Las acciones personalizadas terminan en el límite del flow: Cuando un botón activa una Custom Action, el mapa etiqueta la pantalla con el ID de la acción. La pantalla que abre tu app en respuesta no forma parte del flow, por lo que el mapa no la muestra.
  • El mapa es de solo lectura: Para cambiar un camino, pídele al skill que lo haga o edita el flow en el Flow & Paywall Builder y vuelve a abrir el mapa.