---
title: "Ver cómo se conectan las pantallas de un flow"
description: "Abre un mapa de cada pantalla de un flow y los caminos entre ellas — ramas, saltos y callejones sin salida incluidos — generado por el skill flow-generator en tu navegador."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

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](flow-generator-skill) 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](flow-generator-skill#install-the-skill). Dibujar el mapa solo lee el flow: no guarda nada en tu dashboard.
:::

## Para qué sirve \{#what-its-for\}

- **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 \{#how-to-use-it\}

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 \{#what-the-map-shows\}

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](flow-timer). |
| 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 \{#examples\}

**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 \{#without-a-browser\}

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 \{#limitations\}

- **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](paywall-device-compatibility-preview).
- **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](flow-generator-skill#the-preview-renders-one-screen-in-one-state).
- **Las acciones personalizadas terminan en el límite del flow**: Cuando un botón activa una [**Custom Action**](onboarding-actions#custom-actions), 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.