How to Turn Workflows Code into Visual Diagrams Using Abstract Syntax Trees (AST)

Cloudflare Workflows is an execution engine that maintains long-lived state while supporting step-by-step execution, retries, and parallel processing. However, since Workflows is written not in JSON or YAML but in code itself, static analysis was needed to reconstruct the actual execution order and branching structure into a diagram.

To do this, Cloudflare fetches the script at deploy time, parses it into an AST (abstract syntax tree), and tracks Promise and await relationships to determine which tasks run in parallel and what gets awaited. An internal service then converts WorkflowEntrypoint and step calls into a graph and visualizes it on the dashboard.

The core challenge was obfuscated minified JavaScript. While TypeScript is easy to read, the minified output varied greatly depending on the bundler and configuration—esbuild, rspack, vite, and others—so Cloudflare chose OXC's oxc-parser to generate the AST quickly and accurately. They initially validated this with a Rust container and Cloudflare Queue, then moved it to a Rust Worker to process it using WebAssembly (Wasm).

In generating the diagram, it was important not to miss the relationships between functions and steps. For example, if a function calls another function and a step is executed inside it, the parent function—even though it doesn't directly call the step—must still be included in the graph. Conversely, functions unrelated to any step are removed from the final output.

The patterns that needed to be supported were also diverse.

• Loops such as for...of, while, map, forEach
• Branches such as if / else if / else, switch / case, and ternary operators
• Control flow such as nullish coalescing, try/catch/finally, Promise.all
• Various call forms including inside/outside functions, multiple modules, renaming, and nested structures

Ultimately, the goal was to provide a concise visualization that lets developers see what runs in parallel, where things get blocked, and which steps are actually connected at a glance, without needing to know the complex internal implementation. Cloudflare currently offers this diagram feature in beta and plans to keep improving it for more accurate representation.