Workflows are now visualized via step diagrams in the dashboard. Here’s how we translate your TypeScript code into a visual representation of the workflow.

Cloudflare's platform is a leading provider of internet security and performance solutions, offering insights into web security, content delivery, and DNS management. Through documentation, blog posts, and webinars, Cloudflare provides insights into protecting websites and applications from cyber threats and improving performance. Developers and IT professionals can learn about CDN (Content Delivery Network), DDoS mitigation, and firewall configurations to secure and accelerate web traffic.

Cloudflare

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.

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