JieGou a toujours offert plusieurs façons de visualiser les workflows : une liste d’étapes pour l’édition rapide, un diagramme pour comprendre la structure, et une vue DAG pour l’ordre d’exécution. Mais aucun ne permettait de construire visuellement — arranger les étapes sur un canevas, tracer des connexions entre elles et voir les relations spatiales dans votre automatisation.
Le nouveau canevas de workflow visuel change cela. C’est un éditeur SVG complet avec glisser-déposer, zoom, défilement, minimap, accrochage à la grille et visualisation d’exécution en direct.
Construire sur le canevas
Le canevas affiche chaque étape de workflow comme un noeud. Les noeuds sont codés par couleur selon le type d’étape — les étapes recette, les étapes LLM, les branches de condition, les boucles, les groupes parallèles, les portes d’approbation et autres ont chacune leur propre identité visuelle.
Pour ajouter une connexion entre les étapes, faites glisser depuis le port de sortie d’un noeud (en bas) vers le port d’entrée d’un autre noeud (en haut). Une ligne bleue en pointillés de prévisualisation suit votre curseur pendant le glissement, et les cibles de dépôt valides se mettent en surbrillance au survol. Relâchez sur un port pour créer l’arête. Les arêtes s’affichent comme des courbes de Bézier lisses entre les noeuds connectés.
Déplacer les noeuds est simple : cliquez et faites glisser. Les noeuds s’accrochent à une grille de 20 pixels, pour que les mises en page restent propres sans alignement manuel. Le seuil d’accrochage est de 10 pixels — assez proche de la ligne de grille et le noeud se verrouille en place, mais vous avez encore la liberté de positionner précisément quand vous en avez besoin.
Naviguer dans les grands workflows
Les petits workflows tiennent sur un écran. Les workflows de production non. Le canevas fournit plusieurs outils de navigation :
Zoom — La molette de souris (avec Ctrl/Cmd) zoome de 0,15x à 2,5x, centré sur la position de votre curseur. Les raccourcis clavier fonctionnent aussi : Cmd+0 réinitialise à 1x, Cmd+= zoome, Cmd+- dézoome.
Défilement — Faites défiler horizontalement et verticalement avec votre trackpad ou molette de souris. Le canevas glisse en douceur sous les noeuds.
Minimap — Un aperçu de 200x140 pixels dans le coin inférieur droit montre la disposition complète du workflow avec un rectangle blanc indiquant votre viewport actuel. Cliquez n’importe où sur la minimap pour y sauter instantanément.
Tout sélectionner — Cmd+A sélectionne chaque noeud sur le canevas. Escape désélectionne tout et annule tout glissement en cours.
Visualisation d’exécution en direct
Le canevas n’est pas seulement un constructeur — c’est un visualiseur pour les workflows en cours d’exécution.
Quand un workflow s’exécute, le canevas montre l’état d’exécution en temps réel. L’étape active brille. Les étapes terminées affichent leur statut. Les étapes échouées sont immédiatement visibles. Vous pouvez regarder votre automatisation parcourir le graphe, étape par étape, pendant qu’elle s’exécute.
Pour les étapes utilisant Claude ou d’autres LLM, une surcouche de raisonnement apparaît en bas du canevas quand vous sélectionnez une étape en cours d’exécution. Elle montre le processus de réflexion du modèle — la chaîne de pensée derrière la sortie. C’est utile pour déboguer les prompts et comprendre pourquoi l’IA a pris une décision particulière.
Surcouches multi-agents
Pour les workflows qui utilisent plusieurs agents IA — un coordinateur déléguant à des spécialistes, un pipeline passant le travail entre agents à rôles spécifiques — le canevas montre les régions de mémoire partagée comme des boîtes englobantes translucides avec des bordures en pointillés.
Chaque région est codée par couleur selon le rôle de l’agent : cyan pour les coordinateurs, rose pour les spécialistes, vert pour les travailleurs. Les labels de région montrent quelles variables partagées connectent les agents. Cette visualisation rend clair comment les données circulent entre les agents dans un workflow multi-agents.
Le canevas exécute également la détection de cycles sur les workflows multi-agents. Si des dépendances circulaires existent entre les étapes, les noeuds affectés brillent en rouge et un badge d’avertissement apparaît dans la barre d’outils avec un comptage des cycles détectés. Les cycles dans la délégation d’agents peuvent causer des boucles infinies — mieux vaut les attraper au moment de la conception qu’à l’exécution.
Système de grille et de ports
L’arrière-plan de grille utilise un motif à deux couches : des points de 20 pixels pour l’alignement fin et des points de 100 pixels pour les lignes de grille principales. La grille est activable/désactivable via la barre d’outils si vous préférez un canevas propre.
Les ports — les points de connexion sur chaque noeud — font 6 pixels de rayon avec une zone de détection de clic de 12 pixels, les rendant faciles à cibler même à des niveaux de zoom faibles. Les ports d’entrée sont en haut de chaque noeud, les ports de sortie en bas. Quand vous survolez près d’un port pendant la création d’arête, il se met en surbrillance pour confirmer que vous ciblez le bon point de connexion.
Vues du canevas aux côtés des autres modes
Le canevas est l’un des quatre modes de vue de workflow, disponibles via des onglets sur la page de détail du workflow :
- Liste — La liste d’étapes originale, idéale pour des modifications rapides des configurations d’étapes individuelles
- Diagramme — Un diagramme structurel en lecture seule
- DAG — Graphe acyclique dirigé montrant les dépendances d’exécution
- Canevas — Le nouvel éditeur visuel avec interactivité complète
Les quatre vues reflètent le même workflow. Modifiez la configuration d’une étape en vue liste, passez en vue canevas, et voyez le changement reflété immédiatement. Le canevas est également disponible dans le flux de création de workflow — quand vous générez un workflow en langage naturel, le canevas montre un aperçu des étapes générées pour que vous puissiez les réarranger avant de sauvegarder.
Disponibilité
Le canevas de workflow visuel est disponible sur les plans Team et Enterprise, aux côtés du mode d’exécution DAG et de l’ensemble complet de fonctionnalités d’orchestration de workflows. En savoir plus sur l’orchestration de workflows ou démarrer votre essai gratuit.