🇮🇹 IT

4.2 Editor a Grafo

L'Editor a Grafo è un canvas libero dove i nodi del workflow vengono posizionati visivamente e collegati con archi (frecce). Supporta l'esecuzione parallela, configurazioni complesse di agenti AI e instradamento multi-percorso che sarebbe difficile da rappresentare come un semplice elenco.

Canvas dell'editor a grafo — Editor a grafo — canvas libero con nodi collegati, barra laterale a griglia di icone a sinistra e console in basso. Lo sfondo mostra una griglia a doppio strato (punti piccoli e grandi) per facilitare l'allineamento.

Quando Usare l'Editor a Grafo

Scegli l'Editor a Grafo quando il tuo workflow necessita di:

Rami paralleli — esegui più percorsi simultaneamente e unisci i risultati.
Nodi di configurazione agenti AI — collega un nodo Model Config, Memory o MCP Tool direttamente a un nodo Agent.
Instradamento complesso — più rami switch collegati a sotto-grafi diversi.
Chiarezza visiva — quando un elenco verticale rende il flusso difficile da seguire.

Navigazione del Canvas

Azione	Come eseguirla
Panoramica	Clicca e trascina su uno spazio vuoto del canvas.
Zoom avanti/indietro	Scorri la rotella del mouse, oppure usa i pulsanti +/- nella mini-mappa.
Adatta tutti i nodi	Premi il pulsante "adatta vista" nei controlli della mini-mappa.
Seleziona un nodo	Clicca su qualsiasi scheda nodo.
Sposta un nodo	Trascina la scheda nodo in una nuova posizione sul canvas.
Selezione multipla	Clicca e trascina su spazio vuoto per disegnare un rettangolo di selezione.
Snap alla griglia	I nodi si agganciano automaticamente alla griglia di sfondo durante lo spostamento, garantendo un allineamento ordinato.

Aggiungere Nodi al Canvas

Ci sono tre modi per aggiungere un nodo:

Trascina dalla barra laterale — la barra laterale sinistra presenta una griglia compatta di icone raggruppate per categoria. Trascina qualsiasi icona di nodo e rilasciala sul canvas nella posizione desiderata.
Clicca nella barra laterale — cliccando un'icona di nodo nella griglia della barra laterale lo posiziona al centro dell'area visibile del canvas.
Clic destro sul canvas — appare un menu contestuale con un'opzione per aggiungere un nodo da un selettore rapido.

Collegare i Nodi (Disegnare Archi)

I nodi vengono collegati tramite archi (frecce). Un arco rappresenta il flusso di esecuzione — i dati passano lungo un arco dal nodo sorgente al nodo destinazione.

Passa il mouse sul nodo sorgente Piccole maniglie circolari chiamate porte appaiono a destra (output) e a sinistra (input) della scheda nodo.
Trascina da una porta di output Clicca e trascina dalla porta a destra del nodo sorgente.
Rilascia sulla porta di input del nodo destinazione Rilascia il mouse sulla porta a sinistra del nodo destinazione. Viene disegnata una freccia che collega i due nodi.

Per eliminare un arco, cliccaci sopra per selezionarlo, poi premi Canc o Backspace.

Aspetto dei Nodi

Ogni scheda nodo sul canvas ha angoli squadrati e presenta una striscia colorata sul lato sinistro con un'icona bianca che identifica il tipo di nodo. Il colore della striscia corrisponde alla categoria del nodo (es. azzurro per i trigger, viola per gli agenti AI, verde per le utilità).

Editor a grafo con barra laterale a griglia di icone — Editor a grafo — la barra laterale sinistra mostra una griglia compatta di icone raggruppate per categoria, inclusi i nodi AI & Agenti (AI Agent, Model, Memory, MCP Tool) disponibili per il drag-and-drop sul canvas.

Griglia di Sfondo

Il canvas presenta una griglia di sfondo a doppio strato: punti piccoli ravvicinati per l'allineamento di precisione e punti più grandi distanziati come riferimento visivo principale. La griglia aiuta a mantenere un layout ordinato e facilita lo snap automatico dei nodi durante il posizionamento.

Nodi di Configurazione

I nodi di configurazione sono nodi speciali che non eseguono alcuna azione — trasportano dati di configurazione ai nodi a cui sono collegati. Appaiono come schede più piccole e con uno stile distintivo sul canvas e si trovano nella categoria AI & Agenti della barra laterale.

Nodo	Si collega a	Configura
Model Config	Agent → model_in	Provider, nome modello, temperatura, token massimi.
Memory	Agent → memory_in	Provider di Memoria, ambito, namespace, turni massimi di cronologia.
MCP Tool	Agent → tool_in	Strumento esterno tramite sottoprocesso stdio o endpoint HTTP SSE.

Esecuzione Parallela

Per eseguire step simultaneamente, usa il nodo Parallel. Collega il suo output a più nodi — partiranno tutti allo stesso momento. Dopo il completamento di tutti i rami, il workflow continua verso qualsiasi nodo collegato dopo la convergenza dei rami paralleli.

Denominazione rami: Quando configuri un nodo Parallel, definisci rami con nome (es. "fetch_users", "fetch_orders"). Gli output di ogni ramo sono disponibili come {{ parallel_step.output.branch_name }} dopo la convergenza.

Configurare i Nodi in Modalità Grafo

Fai doppio clic su qualsiasi scheda nodo sul canvas, oppure clicca l'icona modifica che appare quando passi il mouse su un nodo, per aprire il pannello di configurazione a destra. Il pannello funziona in modo identico all'editor lineare — tutti i campi e i riferimenti alle variabili si comportano allo stesso modo.

Menu Contestuale

Cliccando con il tasto destro su qualsiasi punto del canvas, su una scheda nodo o su un arco si apre un menu contestuale adattato all'elemento selezionato.

Click destro su un nodo

Opzione	Azione
Modifica	Apre il pannello di configurazione del nodo.
Copia	Copia il nodo negli appunti del canvas.
Duplica	Crea una copia del nodo nelle vicinanze sul canvas.
Elimina	Rimuove il nodo e tutti i suoi archi collegati.

Click destro su una connessione

Opzione	Azione
Elimina Connessione	Rimuove l'arco selezionato senza modificare i nodi collegati.

Click destro sull'area di lavoro

Opzione	Azione
Incolla	Incolla l'ultimo nodo copiato sul canvas nella posizione del cursore.
Adatta Vista	Zoom e panoramica del canvas per adattare tutti i nodi nell'area visibile.
Layout Automatico	Dispone automaticamente tutti i nodi in un layout da sinistra a destra.
Annulla	Annulla l'ultima modifica al canvas (aggiunta, spostamento, eliminazione, connessione).
Ripristina	Ripristina l'ultima modifica annullata.

Mini-Mappa

Una piccola mappa nell'angolo in basso a destra mostra il layout completo del canvas. I nodi appaiono come piccoli rettangoli colorati. Trascina all'interno della mini-mappa per spostare rapidamente il canvas principale, oppure clicca in qualsiasi punto della mini-mappa per saltare a quella posizione.

Suggerimenti per l'Editor a Grafo

Usa layout coerenti da sinistra a destra — rende il flusso più facile da leggere, specialmente quando si esporta in PDF.
Raggruppa visivamente i nodi correlati posizionandoli vicini tra loro.
Per configurazioni complesse di agenti AI, posiziona i nodi Model Config, Memory e Tool direttamente sopra o a sinistra del nodo Agent che servono.
Salva spesso — anche il layout del canvas viene salvato con il workflow.
Usa la mini-mappa per navigare rapidamente canvas grandi con molti nodi.