Skip to main content

The Visual Canvas

The workflow editor is a drag-and-drop canvas built with SvelteKit, Svelte 5 runes, and SvelteFlow (XYFlow). It's a direct visual editor for the underlying DSL — every action on the canvas maps to a change in the workflow's JSON definition, and vice versa (paste/import a DSL and the canvas renders it).

Node types on the canvas​

  • TriggerNode — the workflow's single entry point (webhook, schedule, manual, event poller, LiveKit). Rendered distinctly at the top/left of the graph.
  • WorkflowNode — a regular step (HTTP, LLM, Transform, Connector, etc.). Shows a Lucide icon badge per node type, a colored border by category, a target handle on the left, and a source handle on the right for chaining (depends_on).
  • ToolNode — represents a tool attached to an Agent node (e.g. a connector action, web search, code tool). Rendered with a dashed border and a "→ to agent" arrow, with a single source handle connecting up to the agent.
  • Agent nodes have an extra bottom handle (yellow square) specifically for tool connections, separate from the main step-to-step flow handles.

Connecting steps​

Dragging an edge from one node's source handle to another's target handle adds that step's ID to the target's depends_on. Steps with no shared dependency chain run in parallel automatically when the workflow executes.

Conditional branches​

Connecting an edge from a Condition or Switch node's branch-specific output (e.g. the "true" output) to a downstream node sets that node's branch_deps — the downstream step only runs if the upstream condition took that branch. The canvas visually distinguishes branch edges (e.g. labeled "true"/"false") from plain dependency edges.

Deleting edges​

Edges are deleted via useSvelteFlow().deleteElements() directly in FloatingEdge.svelte — clicking the delete control on a hovered edge removes just that dependency without affecting the rest of the graph.

Node configuration panel​

Selecting a node opens the NodeConfigPanel, a form generated from that node type's schema:

  • Text/number/boolean fields map directly to config keys.
  • Fields that accept expressions ({{...}}) get VarAutocomplete — typing {{ suggests steps.*, trigger.*, vars.*, secret.*, and input.* paths based on the actual upstream steps connected to this node, so you don't have to remember step IDs or output shapes.
  • Credential fields (API keys, OAuth connections) show a picker backed by /api/v1/secrets and /api/v1/oauth/connections — see Secrets & Credentials.
  • For agent nodes, builtin_tools and the connector tools list use multi-select toggle UIs rather than raw JSON editing.

Node palette​

The left-side palette groups available node types by category (mirroring the Node Reference categories) plus a separate Agent Tools palette for everything that can be attached to an agent node as a ToolNode (built-in tools, connector actions, custom HTTP tools).

Design conventions​

  • No emoji — every node type, trigger type, and tool uses a Lucide icon for a consistent, professional look.
  • Color-coding by category (AI nodes, data nodes, communication nodes, etc.) makes large workflows scannable at a glance.

Saving, versions, import/export​

  • Save writes the current canvas state back to the workflow's dsl field, creating a new version.
  • Export downloads the DSL as .goagents.json; Import creates a new workflow from one.
  • The AI Workflow Generator can populate the canvas directly from a natural-language prompt — see AI Workflow Generator.

Next​