---
title: "Voir comment les écrans d'un flow sont reliés"
description: "Ouvrez une carte de chaque écran d'un flow et des chemins entre eux — branches, sauts et impasses inclus — dessinée par le skill flow-generator dans votre navigateur."
---

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

Le Paywall Builder affiche un écran à la fois, ce qui rend difficile la visualisation du chemin parcouru dans un long onboarding avec des branches de quiz. Le [skill flow-generator](flow-generator-skill) peut représenter l'ensemble du flow sous forme de carte : chaque écran dans l'ordre, chaque chemin entre eux, et chaque endroit où le chemin se divise ou s'arrête.

La carte est un fichier HTML unique qui s'ouvre dans votre navigateur. Elle contient les aperçus des écrans, vous pouvez donc l'envoyer à un collègue qui pourra l'ouvrir sans aucune installation.

:::important
La carte fait partie du skill flow-generator, il n'y a donc rien de plus à installer — suivez les [étapes d'installation du flow-generator](flow-generator-skill#install-the-skill). Dessiner la carte se contente de lire le flow : rien n'est enregistré dans votre tableau de bord.
:::

## À quoi ça sert \{#what-its-for\}

- **Vérifier les embranchements avant de publier** : voyez quelle écran chaque réponse de quiz ouvre, et où les branches se rejoignent.
- **Repérer les erreurs de câblage** : la carte signale un écran vers lequel rien ne mène et un écran sans issue. Les deux passent la vérification de publication, et les deux bloquent les utilisateurs sur leur appareil.
- **Comprendre un flow créé par quelqu'un d'autre** : lisez un onboarding de 20 écrans d'un coup d'œil au lieu de cliquer écran par écran.
- **Partager la structure** : envoyez le fichier à un designer ou un chef de produit qui n'utilise pas l'Adapty Dashboard.

## Comment l'utiliser \{#how-to-use-it\}

Le skill ouvre la carte tout seul après avoir construit ou reconfiguré un flow de dix écrans ou plus, ou après avoir ajouté ou modifié une branche. Pour l'ouvrir sur n'importe quel flow, posez la question en langage naturel :

```
How are the screens in my "Sleep onboarding" flow connected?
```

```
Where does the "Not really" button on the Busy mind screen lead?
```

Le skill récupère le flow, affiche chaque écran et ouvre la carte. Pour vous déplacer, faites glisser l'arrière-plan ou faites défiler. Pour zoomer, utilisez **+** et **−**, ou cliquez sur **Fit** pour voir le flow en entier. Pour agrandir un écran, cliquez dessus.

## Ce que la carte montre \{#what-the-map-shows\}

Les écrans s'affichent de gauche à droite depuis le premier. Les écrans qu'une branche place côte à côte se trouvent dans la même colonne.

| Sur la carte | Signification |
| :--- | :--- |
| Flèche grise | Un chemin qui ne dépend pas d'une réponse. |
| Flèche violette avec un libellé | Un cas d'une branche. Le libellé indique la réponse qui l'ouvre, par exemple `goal = Falling asleep faster`. Le libellé **otherwise** marque le cas par défaut. |
| Flèche en pointillés | Revient vers un écran avec un numéro inférieur. |
| Libellé **after timer** | L'écran avance automatiquement lorsque son [minuteur](flow-timer) se termine. |
| Tag **branches** | Le chemin se divise sur cet écran. |
| Tags **buys**, **restores**, **closes flow**, **back** | Actions qui quittent l'écran sans en ouvrir un autre. |
| Tag **nothing leads here** | Aucun écran n'ouvre celui-ci, donc les utilisateurs n'y accèdent pas. |
| Tag **no way out** | Aucun bouton n'ouvre un autre écran, n'effectue d'achat ni ne ferme le flow. Un bouton **Back** seul ne compte pas. |

Pour mettre en évidence les chemins d'un écran, passez la souris dessus. Les autres écrans et flèches s'estompent.

## Exemples \{#examples\}

**Branches selon les réponses au quiz.** L'écran **Goal** envoie chaque réponse vers son propre écran, et **Busy mind** crée une nouvelle branche. Les trois chemins se rejoignent à **What keeps you up**.

**Une branche sans issue.** Les utilisateurs qui répondent **After midnight** sur l'écran **Bedtime** sont redirigés vers **Name**, mais le bouton **Continue** sur **Name** n'a aucune action. La carte le signale comme **no way out**.

## Sans navigateur \{#without-a-browser\}

Si votre outil d'IA tourne sur une machine distante, le skill affiche la même carte sous forme de texte dans le chat :

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

Un ◆ marque un écran où le chemin se divise. Les tags comme `back` listent les actions qui quittent un écran sans en ouvrir un autre.

## Limitations \{#limitations\}

- **Il montre la config, pas l'appareil** : La carte dessine les chemins définis par le flow. Pour vérifier qu'un timer se déclenche ou qu'une branche ouvre le bon écran sur un téléphone, utilisez un [aperçu sur appareil](paywall-device-compatibility-preview).
- **Les aperçus d'écran ont les mêmes limites que l'aperçu du skill** : Les prix s'affichent sous forme de noms de variables, et les bascules montrent leur état désactivé. Voir [L'aperçu affiche un seul écran, dans un seul état](flow-generator-skill#the-preview-renders-one-screen-in-one-state).
- **Les actions personnalisées s'arrêtent à la frontière du flow** : Lorsqu'un bouton déclenche une [**Custom Action**](onboarding-actions#custom-actions), la carte marque l'écran avec l'ID de l'action. L'écran que votre application ouvre en réponse ne fait pas partie du flow, donc la carte ne l'affiche pas.
- **La carte est en lecture seule** : Pour modifier un chemin, demandez au skill ou modifiez le flow dans le Flow & Paywall Builder, puis rouvrez la carte.