Cloudflare Workflows 可视化编排

什么是 AwaitStep

AwaitStep 是一个自托管的可视化编排器，专门给 Cloudflare Workflows 用。你在画布上拖节点、连线，它会生成真实、可部署的 TypeScript Workflow 代码，而不是只画一张示意图。

项目用 Apache 2.0 开源，文档在 docs.awaitstep.dev。作者 Wishee（Vaishnav，Cloudflare Workflows 相关）把拖拽式构建器做成了开源工具，支持 KV、D1、R2、HTTP、条件分支等常见能力。

和 Cloudflare 控制台里「从代码反推流程图」的可视化不同：AwaitStep 是反过来的——先在画布上设计流程，再产出可运行的 Workflows 代码并部署。

支持哪些节点

画布上常见节点类型包括：

Step：普通步骤，对应 step.do
Parallel：并行执行多条分支
Branch：按条件走不同路径
Loop：循环
Sleep：等待一段时间
Wait for Event：等待外部事件（对应 waitForEvent）
HTTP：发 HTTP 请求
Try-Catch：错误处理
Sub-Workflow：嵌套子工作流

组合这些节点，就能覆盖多数 Durable Workflow 场景：轮询、人机确认、重试、以及和 KV / D1 / R2 的读写。

本地快速开始

仓库自托管即可跑起来。大致步骤：clone 官方仓库 awaitstep/awaitstep，进入项目目录。

准备 .env，放入足够长的随机密钥（见官方文档生成方式）。

示例命令：

bash

openssl rand -hex 32

把输出写进 .env（变量名以 README / docs.awaitstep.dev 为准）。

然后：

bash

pnpm install
pnpm build
pnpm dev

本地起来后，打开画布：拖节点、连线、配置每个步骤的参数（例如 HTTP URL、等待事件名、休眠时长）。

从画布到代码再到部署

典型工作流是：

设计：在 AwaitStep 画布上搭好 Step / Parallel / Branch / Wait for Event 等节点。
生成：导出真实的 Cloudflare Workflows TypeScript（WorkflowEntrypoint 风格），不是伪代码。
部署：把生成的 Worker / Workflow 按 Cloudflare 常规方式发布（wrangler 等），绑定所需的 KV、D1、R2。

这样产品同学或后端同学可以先把流程画清楚，再交给生成代码落地，减少手写状态机和「漏写 wait」的低级错误。

一段最小 TypeScript 示例

生成结果大致会是这种结构（示意，具体以 AwaitStep 导出为准）：

typescript

import {
  WorkflowEntrypoint,
  WorkflowEvent,
  WorkflowStep,
} from "cloudflare:workers";

type Env = {
  // 绑定 KV / D1 / R2 等
};

export class OrderFlow extends WorkflowEntrypoint<Env, { orderId: string }> {
  async run(event: WorkflowEvent<{ orderId: string }>, step: WorkflowStep) {
    const order = await step.do("load-order", async () => {
      // 读 D1 / KV，校验订单
      return { id: event.payload.orderId, status: "pending" };
    });

    const payment = await step.waitForEvent<{ paid: boolean }>("payment-confirmed", {
      type: "payment.confirmed",
      timeout: "1 day",
    });

    await step.do("fulfill", async () => {
      if (!payment.payload.paid) {
        throw new Error("payment not confirmed");
      }
      // 发货、写 R2、通知下游
      return { orderId: order.id, shipped: true };
    });
  }
}

要点：step.do 做可重试的工作单元，waitForEvent 挂起等待外部信号。AwaitStep 把这些原语映射成可视化节点，导出后仍是标准 Cloudflare Workflows API。

和 Dashboard 可视化差在哪

	Cloudflare Dashboard	AwaitStep
方向	已有代码 → 看图	画图 → 生成代码
产出	理解现有流程	可部署的 TypeScript
部署	代码已在账户里	需自行发布生成物
许可	产品功能	Apache 2.0 自托管

如果你已经习惯在仓库里用 wrangler 管 Workflow，AwaitStep 适合当「设计器 + 代码生成器」；如果只是想调试线上某条 Workflow，Dashboard 的反可视化仍然够用。

小结

AwaitStep 把 Cloudflare Workflows 从手写入口类变成「画布拖拽到真实 TypeScript」。节点覆盖 Step、并行、分支、循环、休眠、等事件、HTTP、异常处理和子工作流；本地装好依赖后起开发服务，配好密钥即可试用。