Flow Canvas

À quoi sert cet écran

Le canevas est l’endroit où l’architecture prend forme : les composants deviennent des nœuds, et les liens que vous tracez entre eux deviennent le câblage à partir duquel l’application est générée.

Avant de commencer

Ouvrir l’écran

Au centre de l’onglet App Designer.

Le Flow Canvas est l’espace de travail central où vous concevez visuellement l’architecture de votre application en plaçant des composants et en les connectant.

📸 Capture d’ecran : Le canevas avec trois composants connectés. Repères : (1) un nœud, (2) sa poignée d’entrée, (3) sa poignée de sortie, (4) un lien de connexion, (5) le contrôle Auto-Organize.

Vue d’ensemble du canevas

• Canevas infini avec panoramique et zoom
• Placement de composants par glisser-déposer
• Lignes de connexion visuelles entre les composants

Ajout de composants

Glissez un composant depuis la Component Palette sur le canevas. Un nouveau nœud apparaît affichant l’icône, le nom et les ports par défaut du composant. Des poignées de connexion apparaissent en haut et en bas.

Nœuds de composants

Chaque composant sur le canevas est représenté comme un nœud :

                  ●  ← Poignée d'entrée (haut)
        ┌─────────────────────────────┐
        │ [Icône]  [Nom du Composant] │ ← Cliquer pour ouvrir la config
        ├─────────────────────────────┤
        │  Port(s): 3000              │
        └─────────────────────────────┘
                  ●  ← Poignée de sortie (bas)

Connexion de composants

Les connexions définissent les dépendances, le flux de données et les chemins de communication entre les composants.

Cliquez et maintenez le Poignée de sortie (bas) d’un composant, glissez vers le Poignée d’entrée (haut) du composant cible, et relâchez.

Une flèche directionnelle apparaît reliant les deux composants. L’App Builder peut auto-générer des variables d’environnement selon le schéma de connexion :

Suppression de composants

Ouvrez le Config Modal et cliquez sur Delete, ou appuyez sur Backspace. Toutes les connexions vers/depuis le composant sont également supprimées. Cette action est irréversible.

Suppression de connexions

Cliquez sur une ligne de connexion pour la supprimer. Les variables d’environnement auto-générées peuvent également être supprimées.

Navigation dans le canevas

Composants Sidecar

Les sidecars sont des conteneurs auxiliaires qui s’exécutent aux côtés d’un composant principal (ex. collecteurs de logs, proxys de service mesh, agents de monitoring).

Pour ajouter un sidecar :

1. Cliquez sur le composant principal pour ouvrir le Config Modal
2. Dans l’onglet General, cliquez sur “Add Sidecar”

Le nœud sidecar apparaît automatiquement connecté au parent — aucune connexion manuelle requise. Les sidecars reçoivent des suggestions de montages de volumes et de bind mounts de leur parent. La suppression d’un sidecar retire le nœud et son lien avec le parent.

Scénario

Un backend qui n’atteint pas sa base de données.

1. Regardez le canevas avant toute configuration. Une connexion manquante se voit de loin et c’est la cause la plus fréquente.
2. Vérifiez le sens. Les connexions vont d’une poignée de sortie vers une poignée d’entrée, et un lien inversé n’est pas la même relation.
3. Ouvrez le nœud backend et vérifiez ses Connected Components — voir Configuration d’un composant. Si la base n’y figure pas, le lien n’a pas été pris en compte.
4. Retracez la connexion et revérifiez. Les variables d’environnement générées suivent le lien : rien en aval ne fonctionne tant qu’il n’est pas correct.

En cas de problème

Pour aller plus loin

• Configuration d’un composant — configurer un nœud