Flow 流程图
@lark-ui/core

Flow 流程图

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

import { Flow } from "@lark-ui/core";

/** 带并行分支的流程图 */
export function FlowParallelDemo() {
  return (
    <Flow>
      <Flow.Node>开始</Flow.Node>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>分支 A1</Flow.Node>
          <Flow.Node>分支 A2</Flow.Node>
        </Flow.List>
        <Flow.Node>分支 B</Flow.Node>
        <Flow.Node>分支 C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>结束</Flow.Node>
    </Flow>
  );
}

安装

统一导出

import { Flow } from "@lark-ui/core";

按需导出

import { Flow } from "@lark-ui/core/components/flow";

用法

流程图（Flow）组件组合使用可以创建有向流程图。使用 Flow 作为容器，用 Flow.Node 表示单个步骤，用 Flow.Parallel 创建分支路径。

import { Flow } from "@lark-ui/core";

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 "@lark-ui/core";

/** 带顺序节点的基础流程图（Flow） */
export function FlowBasicDemo() {
  return (
    <Flow>
      <Flow.Node>步骤 1</Flow.Node>
      <Flow.Node>步骤 2</Flow.Node>
      <Flow.Node>步骤 3</Flow.Node>
    </Flow>
  );
}

并行分支

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

import { Flow } from "@lark-ui/core";

/** 带并行分支的流程图 */
export function FlowParallelDemo() {
  return (
    <Flow>
      <Flow.Node>开始</Flow.Node>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>分支 A1</Flow.Node>
          <Flow.Node>分支 A2</Flow.Node>
        </Flow.List>
        <Flow.Node>分支 B</Flow.Node>
        <Flow.Node>分支 C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>结束</Flow.Node>
    </Flow>
  );
}

垂直方向

设置 orientation="vertical" 可让节点自上而下排列，而不是默认的从左到右。连接线、并行分支和 align 都会适配垂直方向。

import { Flow } from "@lark-ui/core";

/** 带顺序节点的纵向流程图 */
export function FlowVerticalDemo() {
  return (
    <Flow orientation="vertical">
      <Flow.Node>步骤 1</Flow.Node>
      <Flow.Node>步骤 2</Flow.Node>
      <Flow.Node>步骤 3</Flow.Node>
    </Flow>
  );
}

在垂直流程中，并行分支的用法完全相同。此时 align 控制节点的水平对齐方式。

import { Flow } from "@lark-ui/core";

/** 带并行分支的纵向流程图 */
export function FlowVerticalParallelDemo() {
  return (
    <Flow orientation="vertical" align="center">
      <Flow.Node>开始</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>分支 A</Flow.Node>
        <Flow.Node>分支 B</Flow.Node>
        <Flow.Node>分支 C</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>结束</Flow.Node>
    </Flow>
  );
}

自定义节点样式

使用 render 属性可完全自定义节点外观。该属性接受一个 React 元素，将替代默认样式的节点进行渲染。

import { Flow } from "@lark-ui/core";

/** 使用 render 属性自定义节点样式的流程图 */
export function FlowCustomContentDemo() {
  return (
    <Flow>
      <Flow.Node
        render={<li className="size-4 rounded-full bg-lark-hairline" />}
      />
      <Flow.Node
        render={
          <li className="rounded-lg bg-lark-contrast px-3 py-2 font-medium text-lark-inverse">
            my-worker
          </li>
        }
      />
    </Flow>
  );
}

居中对齐

使用 align 属性让节点垂直居中。当各节点高度不一致时，这非常有用。

import { Flow } from "@lark-ui/core";

/** 节点垂直居中的流程图 */
export function FlowCenteredDemo() {
  return (
    <Flow align="center">
      <Flow.Node
        render={<li className="size-4 rounded-full bg-lark-hairline" />}
      />
      <Flow.Node>my-worker</Flow.Node>
      <Flow.Node
        render={
          <li className="rounded-md bg-lark-base px-3 py-6 shadow ring ring-lark-hairline">
            更高的节点
          </li>
        }
      />
    </Flow>
  );
}

复杂流程

将顺序节点与并行节点组合，构建复杂的工作流。

import { Flow } from "@lark-ui/core";

/** 复杂流程图示例 */
export function FlowComplexDemo() {
  return (
    <Flow>
      <Flow.Parallel>
        <Flow.Node>HTTP 触发器</Flow.Node>
        <Flow.Node>定时触发器</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>处理请求</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>记录分析数据</Flow.Node>
        <Flow.Node>更新缓存</Flow.Node>
        <Flow.Node>发送通知</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>完成</Flow.Node>
    </Flow>
  );
}

自定义锚点

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

import { Flow } from "@lark-ui/core";

/** 带自定义锚点的流程图 */
export function FlowAnchorDemo() {
  return (
    <Flow>
      <Flow.Node>负载均衡器</Flow.Node>
      <Flow.Node
        render={
          <li className="rounded-lg bg-lark-overlay shadow-none ring ring-lark-hairline">
            <Flow.Anchor
              type="end"
              render={
                <div className="flex h-10 items-center px-2.5 text-lark-subtle">
                  my-worker
                </div>
              }
            />
            <Flow.Anchor
              type="start"
              render={
                <div className="m-1.5 mt-0 rounded bg-lark-base px-2 py-1.5 shadow ring ring-lark-hairline">
                  绑定
                  <span className="ml-3 w-5 text-lark-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 "@lark-ui/core";

/** 演示平移操作的大型流程图 */
export function FlowPanningDemo() {
  return (
    <Flow className="rounded-lg border border-lark-hairline">
      <Flow.Node>开始</Flow.Node>
      <Flow.Node>身份验证</Flow.Node>
      <Flow.Node>校验</Flow.Node>
      <Flow.Node>转换</Flow.Node>
      <Flow.Node>处理</Flow.Node>
      <Flow.Node>存储</Flow.Node>
      <Flow.Node>通知</Flow.Node>
      <Flow.Node>记录日志</Flow.Node>
      <Flow.Node>完成</Flow.Node>
      <Flow.Node>结束</Flow.Node>
    </Flow>
  );
}

禁用节点

在节点上使用 disabled 属性，以视觉方式表明其处于未激活状态。连接到禁用节点的连线会以降低的不透明度渲染。

import { Flow } from "@lark-ui/core";

/** 带禁用节点的流程图 */
export function FlowDisabledDemo() {
  return (
    <Flow>
      <Flow.Node>请求</Flow.Node>
      <Flow.Parallel>
        <Flow.Node>主处理器</Flow.Node>
        <Flow.Node disabled>备用处理器（已禁用）</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>响应</Flow.Node>
    </Flow>
  );
}

并行节点对齐

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

import { Flow } from "@lark-ui/core";

/** 并行节点右对齐的流程图 */
export function FlowParallelAlignEndDemo() {
  return (
    <Flow>
      <Flow.Node>开始</Flow.Node>
      <Flow.Parallel align="end">
        <Flow.Node>短</Flow.Node>
        <Flow.Node>中等长度</Flow.Node>
        <Flow.Node>超长节点名称</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>结束</Flow.Node>
    </Flow>
  );
}

其他示例

并行中的嵌套节点列表

在 Flow.Parallel 内部使用 Flow.List，可创建每个分支都包含一串相连节点的并行分支。

import { Flow } from "@lark-ui/core";

/** 并行分支中包含嵌套节点序列的流程图 */
export function FlowParallelNestedListDemo() {
  return (
    <Flow>
      <Flow.Parallel>
        <Flow.List>
          <Flow.Node>客户端用户</Flow.Node>
          <Flow.Node>工程团队访问</Flow.Node>
        </Flow.List>
        <Flow.List>
          <Flow.Parallel>
            <Flow.Node>所有已认证用户</Flow.Node>
            <Flow.Node>客户端用户</Flow.Node>
            <Flow.Node>站点用户</Flow.Node>
          </Flow.Parallel>
          <Flow.Node>承包商访问</Flow.Node>
        </Flow.List>
      </Flow.Parallel>
      <Flow.Node>目标</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 组件