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.
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 mapa | Significado |
|---|---|
| Flecha gris | Un camino que no depende de una respuesta. |
| Flecha morada con etiqueta | Un 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 discontinua | Vuelve a una pantalla con un número inferior. |
| Etiqueta after timer | La pantalla avanza sola cuando termina su temporizador. |
| Etiqueta branches | El camino se divide en esta pantalla. |
| Etiquetas buys, restores, closes flow, back | Acciones que abandonan la pantalla sin abrir otra. |
| Etiqueta nothing leads here | Ninguna pantalla conduce a esta, por lo que los usuarios no llegan a ella. |
| Etiqueta no way out | Ningú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.
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.
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.