Jetpack Compose UI-Fluss mit Mermaid und KI entwerfen

Einführung

Wenn Sie einen Jetpack Compose-App entwerfen und dabei mit KI zusammenarbeiten, wie vermitteln Sie den UI-Fluss?

• Screenshots der KI zeigen
• Diagramme in FigJam oder Miro zeichnen
• Mündliche Erklärung geben

All diese Methoden verlieren entweder Informationen oder sind für die KI schwer zu verarbeiten.

Wenn Sie Mermaid (Textflussnotation) verwenden, können Sie den UI-Fluss als Code verwalten und gleichzeitig in einem Format behalten, das Sie direkt der KI übergeben können.

Werkzeugvergleich: Was vermittelt sich am besten der KI?

Warum Mermaid stark ist:

• Als Text kann es direkt in Prompts eingefügt werden
• Differenzen können mit Git verwaltet werden
• Die Struktur passt leicht zu Compose Navigation
• KI kann es leicht generieren und bearbeiten

Grundlegende Mermaid-Schreibweise

Das Wesen des Mermaid UI-Flusses ist „Bildschirm (Screen) = Knoten, Übergänge = Pfeile".

Minimale Konfiguration

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

Bedingte Übergänge

flowchart TD
    Home --> Detail
    Detail -->|habitId erforderlich| Edit
    Edit -->|Nur wenn angemeldet| Confirm
    Confirm --> Home

Zustand hinzufügen (wichtig)

Der UI-Fluss ändert das UX je nach Zustand. Durch das explizite Angeben des Zustands werden Designfehler sichtbar.

flowchart TD
    Home["Home\n[state: listLoaded]"]
    Detail["Detail\n[state: habitSelected]"]
    Edit["Edit\n[state: formDirty]"]

    Home --> Detail
    Detail --> Edit
    Edit -->|Speichern| Home
    Edit -->|Abbrechen| Detail

Entsprechung mit Compose Navigation

Durch die Anpassung der Mermaid-Schreibweise an Jetpack Compose Navigation wird das Design deutlich.

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

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

// Mermaid-Struktur direkt in Navigation widerspiegeln
NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("detail/{habitId}") { DetailScreen(navController) }
    composable("edit/{habitId}") { EditScreen(navController) }
}

Darstellung von Registerkarten und BottomNav

Mermaid ist nicht gut darin, Registerkarten darzustellen. Das liegt daran, dass Registerkarten keine „Bildschirmübergänge", sondern „UI-Zustände" sind.

Es gibt jedoch Darstellungsmethoden.

Methode 1: Mit Verzweigungsknoten darstellen (am einfachsten)

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

Methode 2: Mit subgraph umschließen (visuell klarer)

flowchart TD
    subgraph BottomNav
        Home
        Search
        Profile
    end

    Home --> Detail
    Detail --> Edit

Methode 3: Als Zustand darstellen (am genauesten für Compose)

flowchart TD
    MainScreen["MainScreen\n[selectedTab: Home|Search|Profile]"]
    MainScreen -->|tab=Home| HomeContent
    MainScreen -->|tab=Search| SearchContent
    MainScreen -->|tab=Profile| ProfileContent
    HomeContent --> Detail

Die Idee „Registerkarten sind Zustände"

Wenn Sie versuchen, alles mit Mermaid darzustellen, wird es ungeordnet.

Richtige Schichtentrennung:

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

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

Dies ist das realistische Modell von Jetpack Compose Navigation mit BottomNav.

Praktisches Format zum Übergeben an KI

Wenn Sie das folgende Format an Claude Code übergeben, können Sie UI-Fluss, Zustand und Einschränkungen zusammen vermitteln.

UI Flow (Mermaid):
flowchart TD
    Home --> Detail
    Detail -->|habitId erforderlich| Edit
    Edit -->|Speichern| Home

State:
- Home: listLoaded
- Detail: habitSelected
- Edit: formDirty

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

Wenn Sie dieses Format in Claude Code einfügen:

• Die Navigation-Design kann überprüft werden
• Vorschläge für ViewModel-Design erhalten
• UX-Fluss-Probleme können aufgezeigt werden

Häufige Fehler

Zu abstrakt, um verstanden zu werden

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

Wenn Bildschirmnamen nicht enthalten sind, wird nichts vermittelt.

UI und Zustand nicht getrennt

Das Vermischen von Bildschirmübergängen und Zustandsänderungen macht das Design unklar. Mit Mermaid sollte es nur auf „Bildschirmübergänge" beschränkt sein, um lesbar zu sein.

Versuchen, alle Registerkarten als Übergänge zu schreiben

Da Registerkarten Zustandsschalter sind, führt das Schreiben als Bildschirmübergänge zu einer verzerrten Struktur. Halten Sie es auf subgraph oder state-Darstellung beschränkt.

Zusammenfassung

Die Kombination von Mermaid und Claude Code ermöglicht es Ihnen, UI-Flow-Design „zusammen mit KI zu durchdenken und zu schreiben". Sie können viel schneller iterieren als mit Figma oder Screenshots.