Cloudflare把3万行代码变成流程图，开发者：早该这么干了

去年Cloudflare Workflows上线时，没人想到可视化会成刚需。直到AI开始批量写代码——你让Claude生成一个数据处理管道，它可能给你甩出200行带嵌套Promise的TypeScript。能跑吗？能跑。能看懂吗？看完想辞职。

今年3月，Cloudflare给每个部署的Workflow强制加上了可视化图表。不是可选插件，不是付费功能，是基础设施。他们的工程师在博客里说了一句挺扎心的话：「Coding agents are writing code that you may or may not be reading.」翻译成人话：AI写的代码你读不读都行，但结构长什么样必须一眼能看清。

为什么代码变图表这么难

市面上那些拖拽式工作流工具，图和逻辑是同一个东西。你拖一个方块，后台存的就是JSON配置，渲染图表相当于直接打印数据结构。但Cloudflare Workflows是纯代码——Promise、Promise.all、循环、条件判断、嵌套函数，全都有。

这就好比你让一个人边跑步边画路线图。代码是边跑边决定的，图表却要提前画出来。动态执行和静态可视化，天生矛盾。

Cloudflare的解法是用抽象语法树（Abstract Syntax Trees，AST）做静态分析。AST是把代码结构化成树形数据的标准工具，编译器天天用。但他们要的不是语法正确性，是执行语义——哪些步骤并行，哪些阻塞，哪里会分支。

具体做法是：在部署阶段解析代码AST，追踪Promise和await的关系，推导出执行图。这个图不依赖实际运行，纯靠代码结构算出来。

动态执行模型的隐藏复杂度

Cloudflare Workflows的执行模型跟传统工作流引擎不一样。传统引擎是顺序触发：Step A走完→Step B开始→Step B走完→Step C开始，像流水线。

Workflows是动态执行。引擎本身是一个「监督者」Durable Object，负责协调；实际代码跑在Workers Runtime里。遇到step.do()时，Runtime把控制权交还引擎，引擎执行完持久化结果，再触发Runtime继续跑。

关键细节：步骤默认并行。除非你显式await，否则引擎会把所有未等待的步骤同时丢出去执行。这设计让代码写起来像普通异步JavaScript，不用套额外语法糖。

但副作用是——引擎自己都不知道完整执行顺序。它只知道当前这一步该干嘛，下一步要等Runtime跑完才知道。画图表？得靠静态分析提前「猜」出来。

AST分析要处理的边缘情况一箩筐：Promise.all里的步骤是并行，但如果有嵌套await呢？循环里的步骤怎么表示？类方法里的step.do算独立节点还是子流程？Cloudflare没公开全部技术细节，但从实现反推，他们大概率做了保守策略——宁可漏标并行关系，也不能画错执行顺序。

为什么是现在

可视化功能去年就该有，但Cloudflare选择今年3月强制上线。时间线卡得很准：GitHub Copilot已经普及，Claude 3.5能写完整微服务，开发者正在经历从「写代码」到「审代码」的角色迁移。

一个内部数据点：Cloudflare提到「every workflow deployed」都有图表，暗示覆盖量级在数万到数十万之间。考虑到Workflows是去年才GA的产品，这个渗透率说明可视化被做成了默认行为，而非可选配置。

产品决策背后有个判断：在AI生成代码的时代，人类的核心价值从「生产正确性」转向「结构可解释性」。代码能不能跑，CI/CD能验证；但代码为什么这样组织，只有人能判断——前提是得看得懂。

Cloudflare的工程师举了个具体场景：human-in-the-loop审批系统。这种工作流通常有分支逻辑——审批通过走A路径，拒绝走B路径，超时走C路径。AI生成的版本可能用三元嵌套Promise实现，运行正确，但读代码像解谜。图表的价值是把嵌套扁平化，让分支结构成为第一公民。

技术选型的取舍

AST方案不是唯一解。另一种思路是运行时追踪——实际执行一遍，记录步骤顺序，再生成图表。这种更准，但成本也高：得有真实输入触发，得处理副作用，冷启动 Workflow 只为画图不划算。

Cloudflare选了静态分析，本质是用准确性换可用性。部署时秒出图，不需要跑代码，但可能漏掉动态分支（比如条件依赖外部API返回）。从产品设计看，这是个合理 trade-off：开发者要的是「大概结构」快速校验，不是100%精确的时序图。

一个值得注意的细节：他们特别强调追踪「Promise和await关系」。这说明AST分析深度到了表达式级别，不只是找step.do调用点。JavaScript的异步模型是出了名的难静态分析，Promise链、async/await语法糖、隐式转换，全是坑。Cloudflare能做成通用方案，大概率内部做了不少JS方言的限制或约定。

最后放一句他们博客里的原话，挺有产品嗅觉：「the shape of what gets built still matters」。AI能生成能跑的代码，但生成的东西长什么样，人还得把关。

你的Workflow图表长什么样？有没有遇到过AI生成的代码结构过于「创意」、看图都救不回来的情况？