Build an AST visualizer
Cloudflare published how it converts TypeScript workflows into visual diagrams using Abstract Syntax Trees — a hands‑on example for a portfolio project that requires parsing, traversal, transformation, and interactive frontend work. Implementing an AST visualizer hits parsing algorithms and systems thinking while producing a demonstrable, deployable demo. (blog.cloudflare.com)
Cloudflare published the technical walkthrough on March 27, 2026, credited to André Venceslau and Mia Malden and listed as a 6‑minute read. (blog.cloudflare.com) The post explains the visualizer builds a static parse of deployed TypeScript workflows and specifically tracks Promise/Promise.all and await relationships to infer which steps run in parallel versus which block execution. (blog.cloudflare.com) Cloudflare rolled the diagram feature into the dashboard in a Feb. 4, 2026 changelog entry, and the company’s developer docs state the visualizer is currently in beta for JavaScript and TypeScript Workers. (developers.cloudflare.com) Workflows’ runtime uses a “supervisor” Durable Object dubbed the engine that the runtime dispatches to; when the runtime encounters a step.do the engine executes the step, persists its result (or error) and re‑triggers the Worker. (blog.cloudflare.com) Because workflows can include loops, nested functions, classes and unawaited Promises, Cloudflare’s static analysis must reconstruct branching and concurrency and the visualizer exposes controls to collapse or expand loops and nested logic for high‑level or detailed views. (blog.cloudflare.com) Cloudflare published a Workflows starter template on GitHub and links the dashboard visualizer guide in the Workflows docs so developers can deploy an example workflow and inspect the generated diagram. (github.com)
