II · Planning & Control FlowMature★★

Visual Workflow Graph

also known as Typed-Node Canvas, Drag-and-Drop Workflow Builder, Low-Code Agent Canvas

Express agentic logic as a visual graph of typed nodes connected on a canvas with Start and End nodes so non-coding stakeholders can read and edit the flow.

Context

A team is building on a low-code or no-code platform — Dify, Coze, n8n, Flowise, Langflow, FastGPT, Bisheng — or in an IDE-embedded workflow editor, where the same product surface is used both by developers and by non-developers such as business users or operations teams. The workflow itself is the artefact those users will edit and review, not the code behind it.

Problem

Procedural agentic code is dense and unfamiliar for non-coders, and review-heavy even for developers because the orchestration logic is buried inside source files. The graph topology — which nodes feed which, which branches gate which — is the part that most needs to be inspectable, but in a procedural codebase that topology has to be reconstructed by reading code. The platform needs a graph-shaped representation of the workflow as the primary artefact, with code only behind the individual nodes that need it.

Forces

  • Visual editing lowers the bar for non-developer contributors but raises the bar for version control and merge.
  • A typed-node vocabulary (LLM, retrieval, tool, conditional, iteration, code) lets the canvas validate connections statically.
  • The graph must round-trip with the runtime — what runs is what is drawn.
  • Conditional and iteration nodes need to compose without becoming visually unreadable.
  • Agent nodes inside the graph blur the line between deterministic workflow and agentic loop.

Example

A customer-success team wants to build a triage workflow that classifies incoming messages, retrieves relevant docs, drafts a reply, and routes high-confidence drafts to send while low-confidence drafts go to human review. Their engineering team uses Dify: a Start node receives the message; a Question Classifier routes by category; a Knowledge Retrieval node fetches docs per category; an LLM node drafts the reply; a Conditional node splits on confidence; one branch ends in Send, the other in Human Review. The whole workflow is one canvas. When customer success wants to add a new category, they edit the canvas; the engineering team reviews the artefact diff in the PR.

Diagram

Solution

Therefore:

Define a small vocabulary of node types — Start, End, LLM, Retrieval, Tool, Conditional, Iteration (see iteration-node), Code, Agent — each with a typed input/output schema. Build the workflow on a drag-and-drop canvas connecting nodes by edges; the editor validates connections by type. Persist the graph as a serialisable artefact (JSON/YAML) that the runtime executes directly. Pair with iteration-node (the per-element subgraph construct), pluggable execution semantics for Agent nodes, and policy-as-code-gate for guarded edges. Treat the canvas as a UI projection of the artefact, not the source of truth alone — diffs and reviews work on the artefact.

What this pattern forbids. All workflow logic must be expressed through typed nodes connected on the canvas; the runtime is not allowed to execute paths that do not appear in the graph artefact.

The smaller patterns that complete this one —

  • usesIteration Node★★— Express map-over-collection inside a visual workflow as an explicit Iteration node that runs a subgraph once per element of an input array, with bounded, deterministic, observable execution.

And the patterns that stand alongside it, or against it —

  • complementsEvent-Driven Agent★★— Trigger the agent on external events (webhooks, message queues, file changes) instead of user requests or schedules.
  • complementsPolicy-as-Code Gate★— Evaluate every proposed agent action against externally-managed machine-readable policies before dispatch, so compliance authorship lives outside the prompt and outside the agent code.
  • complementsAgent-as-Tool Embedding★— Wrap a sub-agent (with its own loop, prompt, and tool palette) behind a single function-shaped tool signature, so the parent agent calls it like any other tool and never sees the sub-agent's internal turns.
  • alternative-toSpec-First Agent★— Drive the agent loop from a human-authored specification document rather than free-form prompts.
  • complementsIteration Node★★— Express map-over-collection inside a visual workflow as an explicit Iteration node that runs a subgraph once per element of an input array, with bounded, deterministic, observable execution.

Neighbourhood

Click any neighbour to follow the language. Scroll to zoom, drag to pan.

Used in frameworks

References

Provenance