# Visual Workflow Graph

> 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.

- **Category**: Agentic AI
- **Subcategory**: Planning & Control Flow
- **Canonical URL**: https://designpattern.fyi/patterns/visual_workflow_graph/

---

## Description
**Intent**: 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 — where the same product surface is used by both developers and 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.
**Solution**: - Define a small vocabulary of node types — Start, End, LLM, Retrieval, Tool, Conditional, Iteration, 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. - Treat the canvas as a UI projection of the artefact, not the source of truth alone — diffs and reviews work on the artefact.


## Use Cases
- Non-developer stakeholders must read, review, or edit the workflow.
- Topology inspectability is a stronger requirement than code-level concision.
- Iteration, conditional, and agent constructs need to compose visibly.
- The runtime can execute a serialised graph artefact directly.





## Trade-offs


### Advantages

- Topology is inspectable at a glance by non-developers.

- Non-developers can read and propose edits without touching code.

- Typed-node contracts catch wiring errors before execution.

- Iteration, conditional, and agent nodes compose without leaving the canvas.

- The graph artefact is auditable and reviewable via VCS diffs.




### Considerations & Drawbacks

- Version-controlling visual diffs is harder than text diffs without good artefact-level diffing.

- Large graphs become visually unreadable — modularisation into subflows is mandatory at scale.

- Lowest-common-denominator node vocabulary may not cover bespoke logic; Code escape-hatch nodes appear and bypass the canvas''s safety.

- Cross-graph refactoring is harder than across-code refactoring.







---
**Reference**: [Original Source](https://www.agentpatternscatalog.org/patterns/visual-workflow-graph/)