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

This post explains how Cloudflare built automatic visual diagrams for Workflows by statically parsing JavaScript code using Abstract Syntax Trees (ASTs).

• •Cloudflare Workflows follow a dynamic execution model where steps execute as the runtime encounters them, not in a predefined sequential order
• •Diagrams are generated at deploy time by fetching the bundled script and parsing it into an AST to derive the full execution graph
• •oxc-parser from the JavaScript Oxidation Compiler (OXC) was chosen to handle minified JavaScript produced by various bundlers such as esbuild, rspack, and vite
• •A Rust Worker running via WebAssembly converts the minified JS into AST node types, then maps them into a graph representation rendered on the dashboard
• •