Workflow Editor Overview

Last updated: Jan 2026

The workflow editor is a visual canvas where you design, test, and refine your AI automations. It provides a node-based interface for building complex workflows with drag-and-drop simplicity, real-time execution monitoring, and powerful undo/redo capabilities.

Interface Layout

The editor is divided into distinct areas, each serving a specific purpose in your workflow building process.

ComponentDescription
Editor Canvas (Center)The main workspace powered by ReactFlow. This infinite canvas supports pan, zoom, and multi-select. Nodes are positioned visually with automatic routing for connections.
Component Library (Left)Browse the different node/step types. Browse tools. Drag nodes and tools onto the canvas.
Configuration Panel (Right)Appears when you select a node. Configure prompts, AI models, conditions, approval requirements, and other node-specific settings.
Toolbar (Top)Quick access to save, undo/redo, run workflow, auto-layout, add sticky notes, workflow settings, and exeucution/history view toggle.

Editor & Execution Views

The workflow interface has two primary views that you can toggle between using the switch in the toolbar. Each view is optimized for different stages of your workflow lifecycle.

ViewPurposeFeatures
Editor ViewBuild and configure your workflowFull canvas access, node library, drag-and-drop, connection editing, and node configuration panels.
Execution ViewMonitor runs and review historyLive execution stats, real-time node status, step outputs, error details, and previous run history.

Editor View

This is the default view when you open a workflow. The editor view provides the full canvas experience where you can add nodes, configure settings, create connections, and design your automation logic. Use this view when building or modifying your workflow.

Execution View

Switch to the execution view to monitor workflow runs and review past executions. This view displays:

  • Live execution monitoring — Watch nodes execute in real-time with status indicators
  • Step outputs — View the output data from each completed node
  • Error details — Inspect error messages and stack traces when nodes fail
  • Run history — Browse previous executions, compare results, and debug issues
  • Execution stats — See duration, token usage, and other metrics for each run

Quick Toggle

Use the view toggle in the toolbar to quickly switch between Editor and Execution views. When you run a workflow, it automatically switches to Execution view so you can monitor progress.

Execution Modes

ORCFLO supports two execution modes that determine how your workflow nodes are processed.

ModeBehaviorBest For
DAG Mode (Parallel)Nodes execute in parallel when their dependencies are met. A node runs as soon as all its upstream connections complete.Workflows where independent steps can run simultaneously, maximizing throughput.
Sequential ModeNodes execute one at a time in a defined order, regardless of dependencies. Each step waits for the previous to complete.Debugging or when API rate limits require controlled pacing.

Switching Modes

Toggle between DAG and Sequential mode in the workflow settings. Your workflow structure remains the same; only the execution order changes.

Canvas Navigation

The Editor canvas supports intuitive navigation controls for exploring and organizing your workflow.

ActionHow To
PanClick and drag on empty canvas space, or hold Space and scroll.
ZoomScroll wheel to zoom in/out, or use the zoom controls in the bottom-right corner.
Fit to ViewUse the fit-to-view button to center all nodes in the viewport.
Select MultipleHold Command/Control and select multiple nodes.

Auto-Layout

Click the auto-layout button in the toolbar to automatically arrange nodes in a clean DAG structure based on their connections.

Toolbar & Actions

The toolbar provides quick access to essential actions. Familiarize yourself with these to speed up your workflow building.

ActionDescriptionShortcut
SaveSave current workflowCmd+S
Undo / RedoUndo or redo changes made in the canvasCmd+Z / Cmd+Shift+Z
RunExecute the workflow with real-time monitoring-
Auto-LayoutAutomatically position nodes in the canvas-
Copy & Paste / DeleteDuplicate or remove selected nodesCmd+C and Cmd+V / Delete

Keyboard Shortcuts

Master these shortcuts to work more efficiently in the editor.

ActionMacWindows/Linux
Save workflowCmd+SCtrl+S
UndoCmd+ZCtrl+Z
RedoCmd+Shift+ZCtrl+Y
Copy selectedCmd+CCtrl+C
PasteCmd+VCtrl+V
Delete selectedDeleteDelete
Select allCmd+ACtrl+A

Pro Tips

  1. Use Note Cards: Add sticky notes to document sections and explain complex logic on the canvas.
  2. Auto-layout frequently: After adding or rearranging nodes, use auto-layout for clean DAG positioning.
  3. Name your steps: Give nodes descriptive names so their outputs are easier to identify and reference.
  4. Use templates: Start from official or user-published templates instead of building from scratch.