Conception du flux UI Jetpack Compose avec Mermaid et l'IA

Introduction

Quand vous concevez une application Jetpack Compose avec l'IA, comment communiquez-vous le flux UI ?

• Coller des captures d'écran dans l'IA
• Dessiner des diagrammes dans FigJam ou Miro
• Le décrire verbalement

Chacune de ces approches manque soit d'informations, soit est dans un format difficile à traiter pour l'IA.

Mermaid (une notation de flux basée sur du texte) vous permet de gérer le flux UI comme du code tout en le gardant dans un format que vous pouvez passer directement à l'IA.

Comparaison des outils : Ce qui communique le mieux à l'IA

Pourquoi Mermaid fonctionne si bien :

• C'est du texte, donc vous pouvez le coller directement dans un prompt
• Les diffs peuvent être suivis dans Git
• Correspond naturellement à la structure de Compose Navigation
• L'IA peut le générer et le modifier facilement

Les bases de Mermaid

L'essence du flux UI Mermaid est écrans (Screen) = nœuds, transitions = flèches.

Exemple minimal

flowchart TD
    Home --> Detail
    Detail --> Edit

Transitions conditionnelles

flowchart TD
    Home --> Detail
    Detail -->|habitId requis| Edit
    Edit -->|connecté seulement| Confirm
    Confirm --> Home

Inclure l'état (Important)

L'UX du flux UI change selon l'état. Rendre l'état explicite fait apparaître les problèmes de conception tôt.

flowchart TD
    Home["Home\n[état: listChargée]"]
    Detail["Detail\n[état: habitSélectionné]"]
    Edit["Edit\n[état: formulaireSale]"]

    Home --> Detail
    Detail --> Edit
    Edit -->|enregistrer| Home
    Edit -->|annuler| Detail

Correspondance avec Compose Navigation

Aligner votre diagramme Mermaid avec Jetpack Compose Navigation rend votre conception explicite.

flowchart TD
    NavGraph["NavGraph"]
    NavGraph --> Home
    NavGraph --> Detail
    NavGraph --> Edit

    Home -->|"navigate(Detail)"| Detail
    Detail -->|"navigate(Edit)"| Edit
    Edit -->|"popBackStack()"| Detail

// Refléter directement la structure Mermaid dans Navigation
NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("detail/{habitId}") { DetailScreen(navController) }
    composable("edit/{habitId}") { EditScreen(navController) }
}

Représenter les onglets et BottomNav

Mermaid n'est pas naturellement adapté aux onglets — parce que les onglets sont un état de l'interface, pas des transitions d'écran.

Cela dit, il y a des approches praticables.

Option 1 : Nœuds de branchement (Le plus simple)

flowchart TD
    App --> Home
    App --> Search
    App --> Profile
    Home --> Detail

Option 2 : subgraph (Visuellement clair)

flowchart TD
    subgraph BottomNav
        Home
        Search
        Profile
    end

    Home --> Detail
    Detail --> Edit

Option 3 : Représenter comme état (Le plus précis pour Compose)

flowchart TD
    MainScreen["MainScreen\n[ongletSélectionné: Home|Search|Profile]"]
    MainScreen -->|onglet=Home| HomeContent
    MainScreen -->|onglet=Search| SearchContent
    MainScreen -->|onglet=Profile| ProfileContent
    HomeContent --> Detail

Les onglets sont un état, pas des transitions

Forcer tout en transitions fait s'effondrer votre diagramme Mermaid.

La bonne séparation des couches :

flowchart TD
    subgraph "Main (BottomNav)"
        Home
        Search
        Profile
    end

    Home -->|"navigate(Detail)"| Detail
    Detail -->|"navigate(Edit)"| Edit
    Edit -->|"popBackStack"| Detail

C'est un modèle réaliste pour Jetpack Compose Navigation avec BottomNav.

Un format pratique pour l'IA

Passer ce format à Claude Code vous permet de communiquer flux UI, état et contraintes en même temps :

Flux UI (Mermaid) :
flowchart TD
    Home --> Detail
    Detail -->|habitId requis| Edit
    Edit -->|enregistrer| Home

État :
- Home: listChargée
- Detail: habitSélectionné
- Edit: formulaireSale

Contrainte :
- Compose Material3
- state hoisting
- BottomNav: Home/Search/Profile

Avec ce format, Claude Code peut :

• Revoir votre conception Navigation
• Suggérer une structure ViewModel
• Signaler les problèmes de flux UX

Erreurs courantes

Trop abstrait pour être utile

flowchart TD
    A --> B
    B --> C

Sans noms d'écran, rien n'est communiqué.

Mélanger UI et état

Mélanger transitions d'écran et changements d'état rend la conception difficile à lire. Gardez Mermaid focalisé uniquement sur les transitions.

Essayer d'exprimer les onglets comme des transitions

Les onglets sont des changements d'état, pas des transitions d'écran. Les écrire comme des transitions déforme la structure. Gardez-les dans des subgraphs ou des représentations d'état.

Résumé

Mermaid + Claude Code rend possible la conception du flux UI en "pensant aux côtés de l'IA pendant que vous écrivez." L'itération est bien plus rapide qu'avec Figma ou des captures d'écran.