Flow
@cloudflare/kumo

Flow

一组用于构建带节点和连接器的有向流程图的组件。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with parallel branching */
export function FlowParallelDemo() {
  return (
    <Flow>
      <Flow.Node>Start</Flow.Node>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>Branch A1</Flow.Node>
          <Flow.Node>Branch A2</Flow.Node>
        </Flow.List>
        <Flow.Node>Branch B</Flow.Node>
        <Flow.Node>Branch C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>End</Flow.Node>
    </Flow>
  );
}

安装

批量导入

import { Flow } from "@cloudflare/kumo";

按需导入

import { Flow } from "@cloudflare/kumo/components/flow";

用法

Flow 组件协同工作，可创建有向流程图。使用 Flow 作为容器， Flow.Node 表示各个 步骤，使用 Flow.Parallel 创建 分支路径。

import { Flow } from "@cloudflare/kumo";

export default function Example() {
  return (
    <Flow>
      <Flow.Node>Step 1</Flow.Node>
      <Flow.Node>Step 2</Flow.Node>
      <Flow.Node>Step 3</Flow.Node>
    </Flow>
  );
}

示例

顺序流程

节点按顺序连接的简单线性流程。

import { Flow } from "@cloudflare/kumo";

/** Basic flow diagram with sequential nodes */
export function FlowBasicDemo() {
  return (
    <Flow>
      <Flow.Node>Step 1</Flow.Node>
      <Flow.Node>Step 2</Flow.Node>
      <Flow.Node>Step 3</Flow.Node>
    </Flow>
  );
}

并行分支

使用 Flow.Parallel 创建并行运行的分支路径。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with parallel branching */
export function FlowParallelDemo() {
  return (
    <Flow>
      <Flow.Node>Start</Flow.Node>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>Branch A1</Flow.Node>
          <Flow.Node>Branch A2</Flow.Node>
        </Flow.List>
        <Flow.Node>Branch B</Flow.Node>
        <Flow.Node>Branch C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>End</Flow.Node>
    </Flow>
  );
}

垂直方向

设置 orientation="vertical" 可将节点按从上到下排列，取代默认的从左到右。连接器、并行分支和 align 都会适配垂直方向。

import { Flow } from "@cloudflare/kumo";

/** Vertical flow diagram with sequential nodes */
export function FlowVerticalDemo() {
  return (
    <Flow orientation="vertical">
      <Flow.Node>Step 1</Flow.Node>
      <Flow.Node>Step 2</Flow.Node>
      <Flow.Node>Step 3</Flow.Node>
    </Flow>
  );
}

并行分支在垂直流程中的工作方式相同。在此方向下，align 控制节点的水平对齐。

import { Flow } from "@cloudflare/kumo";

/** Vertical flow diagram with parallel branching */
export function FlowVerticalParallelDemo() {
  return (
    <Flow orientation="vertical" align="center">
      <Flow.Node>Start</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>Branch A</Flow.Node>
        <Flow.Node>Branch B</Flow.Node>
        <Flow.Node>Branch C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>End</Flow.Node>
    </Flow>
  );
}

自定义节点样式

使用 render 属性完全自定义节点外观。render 属性接受一个 React 元素，用来替代默认样式的节点。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with custom node styling using render prop */
export function FlowCustomContentDemo() {
  return (
    <Flow>
      <Flow.Node
        render={<li className="size-4 rounded-full bg-kumo-hairline" />}
      />
      <Flow.Node
        render={
          <li className="rounded-lg bg-kumo-contrast px-3 py-2 font-medium text-kumo-inverse">
            my-worker
          </li>
        }
      />
    </Flow>
  );
}

居中对齐

使用 align 属性垂直居中节点。当节点高度不同时非常有用。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with vertically centered nodes */
export function FlowCenteredDemo() {
  return (
    <Flow align="center">
      <Flow.Node
        render={<li className="size-4 rounded-full bg-kumo-hairline" />}
      />
      <Flow.Node>my-worker</Flow.Node>
      <Flow.Node
        render={
          <li className="rounded-md bg-kumo-base px-3 py-6 shadow ring ring-kumo-hairline">
            Taller node
          </li>
        }
      />
    </Flow>
  );
}

复杂流程

组合顺序节点和并行节点，构建复杂的流程。

import { Flow } from "@cloudflare/kumo";

/** Complex flow diagram example */
export function FlowComplexDemo() {
  return (
    <Flow>
      <Flow.Parallel>
        <Flow.Node>HTTP Trigger</Flow.Node>
        <Flow.Node>Cron Trigger</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>Process Request</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>Log Analytics</Flow.Node>
        <Flow.Node>Update Cache</Flow.Node>
        <Flow.Node>Send Notification</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>Complete</Flow.Node>
    </Flow>
  );
}

自定义锚点

默认情况下，连接器连接到每个节点的中心。使用 Flow.Anchor 及其 render 属性可以指定自定义连接点。type 属性 控制锚点是作为 "start" 点（连接器离开处）还是 "end" 点（连接器到达处）。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with custom anchor points */
export function FlowAnchorDemo() {
  return (
    <Flow>
      <Flow.Node>Load balancer</Flow.Node>
      <Flow.Node
        render={
          <li className="rounded-lg bg-kumo-overlay shadow-none ring ring-kumo-hairline">
            <Flow.Anchor
              type="end"
              render={
                <div className="flex h-10 items-center px-2.5 text-kumo-subtle">
                  my-worker
                </div>
              }
            />
            <Flow.Anchor
              type="start"
              render={
                <div className="m-1.5 mt-0 rounded bg-kumo-base px-2 py-1.5 shadow ring ring-kumo-hairline">
                  Bindings
                  <span className="ml-3 w-5 text-kumo-subtle">2</span>
                </div>
              }
            />
          </li>
        }
      />
      <Flow.Parallel>
        <Flow.Node>DATABASE</Flow.Node>
        <Flow.Node>OTHER_SERVICE</Flow.Node>
      </Flow.Parallel>
    </Flow>
  );
}

平移大型图

当图超出容器大小时，Flow 会自动启用平移。拖拽可平移视口，也可以使用滚轮。悬停时出现滚动条，用于指示可滚动区域。

import { Flow } from "@cloudflare/kumo";

/** Large flow diagram demonstrating panning */
export function FlowPanningDemo() {
  return (
    <Flow className="rounded-lg border border-kumo-hairline">
      <Flow.Node>Start</Flow.Node>
      <Flow.Node>Authenticate</Flow.Node>
      <Flow.Node>Validate</Flow.Node>
      <Flow.Node>Transform</Flow.Node>
      <Flow.Node>Process</Flow.Node>
      <Flow.Node>Store</Flow.Node>
      <Flow.Node>Notify</Flow.Node>
      <Flow.Node>Log</Flow.Node>
      <Flow.Node>Complete</Flow.Node>
      <Flow.Node>End</Flow.Node>
    </Flow>
  );
}

禁用节点

在节点上使用 disabled 属性，可在视觉上标示其不可用。 连接到禁用节点的连接器会以降低的不透明度渲染。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with disabled nodes */
export function FlowDisabledDemo() {
  return (
    <Flow>
      <Flow.Node>Request</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>Primary Handler</Flow.Node>
        <Flow.Node disabled>Backup Handler (disabled)</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>Response</Flow.Node>
    </Flow>
  );
}

并行节点对齐

在 Flow.Parallel 上使用 align 属性， 控制不同宽度的节点如何对齐。使用 "start" （默认）左对齐，或使用 "end" 右对齐。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with right-aligned parallel nodes */
export function FlowParallelAlignEndDemo() {
  return (
    <Flow>
      <Flow.Node>Start</Flow.Node>
      <Flow.Parallel align="end">
        <Flow.Node>Short</Flow.Node>
        <Flow.Node>Medium Length</Flow.Node>
        <Flow.Node>Very Long Node Name</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>End</Flow.Node>
    </Flow>
  );
}

其他示例

并行中的嵌套节点列表

在 Flow.Parallel 内部使用 Flow.List， 可创建并行分支，其中每个分支都包含一段依次连接的节点序列。

import { Flow } from "@cloudflare/kumo";

/** Flow diagram with parallel branches containing nested node sequences */
export function FlowParallelNestedListDemo() {
  return (
    <Flow>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>Client Users</Flow.Node>
          <Flow.Node>Engineering Team Access</Flow.Node>
        </Flow.List>
        <Flow.List>
          <Flow.Parallel>
            <Flow.Node>All Authenticated Users</Flow.Node>
            <Flow.Node>Client Users</Flow.Node>
            <Flow.Node>Site Users</Flow.Node>
          </Flow.Parallel>
          <Flow.Node>Contractor Access</Flow.Node>
        </Flow.List>
      </Flow.Parallel>
      <Flow.Node>Destinations</Flow.Node>
    </Flow>
  );
}

组件

Flow

流程图的主容器。为大型图提供平移和滚动支持。

属性类型说明
orientation”horizontal” | “vertical”

流程的布局方向。"horizontal"（默认）将节点按从左到右排列，"vertical" 则按从上到下排列。

align”start” | “center”

节点的交叉轴对齐方式。水平方向下即垂直对齐；垂直方向下即水平对齐。"start"（默认）对齐到交叉轴起点，"center" 使节点居中。

classNamestring容器的额外 CSS 类
childrenReactNodeFlow.Node 和 Flow.Parallel 组件

Flow.Node

流程图中的单个节点。渲染为带自动连接点的样式化卡片。使用 render 属性自定义元素。

属性类型说明
renderReactElement

用于替代默认样式节点的自定义元素

disabledboolean

为 true 时，连接到该节点的连接器以降低的不透明度渲染

childrenReactNode显示在节点内的内容

Flow.Anchor

用于标记 Flow.Node 内连接器的自定义连接点的组件。通过 render 属性提供自定义元素，即可精确控制连接线的连接位置，而不是默认的节点中心。

属性类型说明
type”start” | “end”

该锚点作为 "start" 点（出向连接器）还是 "end" 点（入向连接器）。省略时同时充当两者。

renderReactElement在锚点处渲染的自定义元素
childrenReactNode在锚点处渲染的内容

Flow.Parallel

并行分支的容器。子 Flow.Node 组件以并行方式显示，并使用汇合连接器。

属性类型说明
align”start” | “end”

控制并行组内节点的水平对齐方式。"start"（默认）左对齐，"end" 右对齐。

childrenReactNode

要并行显示的 Flow.Node 或 Flow.List 组件

Flow.List

一段 Flow.Node 组件的容器，组件之间自动生成连接器。在 Flow.Parallel 内使用，可创建包含多个顺序步骤的分支。

属性类型说明
childrenReactNode要按顺序显示的 Flow.Node 组件