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 属性可完全自定义节点外观。该属性接受一个 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 组件