How we use Abstract Syntax Trees (ASTs) to turn Workflows code into visual diagrams

Cloudflare Workflows now generates visual step diagrams in the dashboard. Since workflows are written as TypeScript code (not declarative YAML/JSON), the team built an AST-based pipeline to statically derive the execution graph. After bundling and minification, the code is parsed using oxc-parser from the JavaScript Oxidation Compiler, running inside a Rust-based Cloudflare Worker via WebAssembly. The parser tracks Promise/await relationships to determine parallel vs. sequential execution, handles patterns like loops, branches, try/catch, and ternary operators, and maps everything to a set of predefined node types (StepDo, LoopNode, IfNode, ParallelNode, etc.). Each node carries starts/resolves indices to capture timing relationships for vertical positioning in the diagram. The goal is to evolve these diagrams into a full debugging tool with real-time execution tracing, error discovery, and local dev support.