AI Agent Workflow Editor Explained: Visually Orchestrate iPhone Automation with Drag & Drop

Anyone who has done phone automation knows: once scripts get complex, they become a mess. Dozens of lines are fine; hundreds or thousands, with conditionals, error handling, and retries, become a maintenance nightmare. And if you cannot code at all, you never even get past the gate.

The AI workflow editor solves exactly this: it turns automation from “writing code” into “drawing flow charts” — drag nodes, connect lines, click to edit parameters, complex logic visualized and clear at a glance. This article takes you through the editor completely.

1. What the Workflow Editor Is

A workflow saves steps like 「tap where, wait how long, open which app」into a repeatable flow. Click 「Workflow Editor」 at the top of the AI agent to enter.

Editor layout:

Zone	Content
Left	Workflow library (tree: main flows and sub-flows)
Middle top	Open flow tabs (multiple can be open)
Middle bottom	Visual flow chart or text mode
Right	Selected step parameters, variable pool, AI assistant panel

2. Two Editing Modes: Visual First, Text Second

Mode	For whom
Visual	Most users: drag nodes, connect lines, click steps to edit parameters
Text	Users familiar with config files: edit JSON directly

Beginners should stay in visual mode. Step cards toggle simple / advanced views in the top-right: simple hides JSON and advanced items; advanced shows full config.

3. What’s in a Flow Chart: States, Arrows, Diamonds

Workflow charts are built from three kinds of elements:

• Boxes (states): a group of steps executed in order;
• Arrows: on success, go to the next step; you can also draw failure and condition branches;
• Diamonds: branch by condition (e.g., 「tap when found, wait when not found」);
• Sub-flows: a step that invokes another saved flow (invoke).

The canvas is pleasant to work with: drag, zoom, minimap; Ctrl+Z (Mac: Cmd+Z) to undo; right-click to copy, delete, or insert a step on a connection.

After a test run, nodes highlight green/red/blue — green success, red failure, blue running; select a node to see that step’s log and input/output.

4. Core Concepts: Variable Pool and Flow Config

Users only need to remember two kinds of data:

Type	Meaning	Where to configure
Flow config	Defaults that exist before the flow starts (package names, keywords, etc.)	The 「Flow Config」dialog
Step results	Data left by a completed step (screenshots, OCR, match results, etc.)	「Save to variable」on the step

Variable pool (canvas toolbar) shows everything:

• Design view: infers which configs and step results exist from the flow structure;
• Run view: shows actual variable values after a test run;
• Click a variable to highlight the steps that reference it;
• Optionally enable test-run variable flow to see data connections between nodes in this run.

When invoking sub-flows, use the checkbox list to select variables passed in / brought back — no hand-written JSON needed.

5. Step Types at a Glance: From UI Operations to Data Extraction

Workflow steps are grouped by category when inserting: Common · Agent events · OCR · Visual location (VLM) · Image recognition · Album · IME input · BLE Bluetooth · Link management · Data processing · Files · HTTP/CLI/MCP · Sub-workflow (FSM).

5.1 Environment and App (most used)

Step	Purpose
Device authorization check	Checks whether USB/mirroring authorization is valid
Start automation environment	Starts the device automation service and polls until ready
Open app	Launches an App by Bundle ID
Go home	Simulates the Home button

5.2 UI and gestures

Node capture (dump the UI tree), click, swipe, long press, double click, multi-touch, input text, plus VLM·visual location (a vision LLM locates element coordinates in a screenshot from a Chinese description like “settings button top right”).

5.3 Screenshots, OCR, and image recognition

• Screenshot/OCR each split into without automation and with automation steps (names match AI chat);
• OCR supports multiple engines: paddleOcrNcnnV5 (default, balanced speed/accuracy), ONNX v5/v4, OcrLite;
• Matching: find image without/with automation (OpenCV template matching), find image by color without/with automation;
• Typical chain: match_template_* → pick_match (take center point) → click_point.

5.4 Data extraction

pick_node (extract fields/regions/coordinates from node variables), pick_ocr (pick rows, fields, center points from OCR results), pick_match (take center point or best match from matching results) — with shortcut templates and last-test-run preview.

5.5 Flow control

Step	Purpose
Conditional branch	Two nested step groups, if/else
Multi-way branch	Matches cases in order, otherwise default
Human pause	Pauses the task, waits for a human to press continue in the task panel
Invoke workflow	Synchronously runs another workflow; passes parameters and writes back variables

5.6 External integration

HTTP requests (registered endpoints or a specified URL), CLI execution, MCP execution — connect external systems into the automation flow and extend the AI agent’s capability boundary.

6. Test Run: Verify First, Don’t Jump to Production

Always test-run after changes — do not go straight to production devices:

1. Pick an online device in the toolbar;
2. Click test run / run (or run from this step / run selected steps);
3. Canvas steps change color: running, success, failure at a glance;
4. Force stop anytime.

Test runs create real tasks; from the task panel click 「Workflow orchestration」 to return to the editor and replay each step’s result from that run.

6.1 Live preview when editing certain steps

With a test-run device selected, some steps support live preview:

Step type	Preview capability
OCR	Captures the screen and recognizes text
Matching / color-keyed matching	Match box, search region selection, crop & save template
Node capture	Shows which elements on the current screen are clickable
VLM visual location	Marks positions on the screenshot from a Chinese description
Coordinate click	Pick a point on the screenshot

7. AI-Assisted Flow Writing: Say It, Get a Flow Chart

The AI panel on the right (requires an LLM configured) can:

• Describe a whole automation in Chinese and have AI generate the flow chart;
• Check modify selected state only for AI to rewrite parts of the flow;
• Iterate in multiple conversation turns until satisfied.

Always validate and test-run after generation. This is the “AI chat + workflow editor” combo: validate ideas in chat, and fix them in the editor as formal flows that run repeatedly and schedule in batches.

8. Validate Before Saving: The Editor’s Safety Net

Before saving or test-running, click validate — the editor automatically checks:

• Workflow ID, FSM initial/final reachability;
• Whether album steps have folderPath filled;
• Whether matching steps provide a template path or Base64;
• Whether external-mode file steps specify a directory;
• Whether invoke creates circular dependencies;
• Global variable name conflicts and reserved words.

On failure, the first error message is shown. Don’t force it through validation — fix first, then run.

9. Summary

The essence of the AI workflow editor: upgrading the expression of automation from “code” to “graph”:

• Visual orchestration: drag nodes, connect lines, conditional branches — complex logic is no longer a tangled mess;
• Reusable: sub-flows extract common logic; main flows only orchestrate;
• Debuggable: test-run node colors, checkable logs, replayable results;
• AI as a safety net: AI generates flow charts and rewrites parts — non-coders can start too;
• Settles into assets: operations verified in chat become workflows that run repeatedly, schedule in batches, and trigger on timers.

For iPhone automation users, the workflow editor is the dividing line of “scaling up” — use chat for one-off runs, workflows for long-running repeats. From today on, upgrade your automation from “scripts” to “flows”.