diff --git a/ui/src/workflow-canvas/icons/loop-body-node-icon.vue b/ui/src/workflow-canvas/icons/loop-body-node-icon.vue
new file mode 100644
index 00000000000..b73cf6b4daa
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/loop-body-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/icons/loop-break-node-icon.vue b/ui/src/workflow-canvas/icons/loop-break-node-icon.vue
new file mode 100644
index 00000000000..b73cf6b4daa
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/loop-break-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/icons/loop-continue-node-icon.vue b/ui/src/workflow-canvas/icons/loop-continue-node-icon.vue
new file mode 100644
index 00000000000..b73cf6b4daa
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/loop-continue-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/icons/loop-node-icon.vue b/ui/src/workflow-canvas/icons/loop-node-icon.vue
new file mode 100644
index 00000000000..b73cf6b4daa
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/loop-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/icons/loop-start-node-icon.vue b/ui/src/workflow-canvas/icons/loop-start-node-icon.vue
new file mode 100644
index 00000000000..b73cf6b4daa
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/loop-start-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index bc28f34501f..1652efdd818 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash'
 import LogicFlow, { type GraphModel } from '@logicflow/core'
 import { SelectionSelect } from '@logicflow/extension'
 import AppEdge from '@/workflow-canvas/core/edge/index'
+import LoopEdge from '@/workflow-canvas/core/edge/loop-edge'
 import { initDefaultShortcut } from '@/workflow-canvas/core/shortcut'
 import { disconnectAll, getTeleport } from '@/workflow-canvas/core/teleport'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
@@ -66,7 +67,7 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   initDefaultShortcut(lf.value, lf.value.graphModel)
   // 节点按需读取页面传入的已保存配置，保持与保存响应一致。
   lf.value.graphModel.getDefaultModelSettings = () => props.defaultModelSettings
-  lf.value.batchRegister([...Object.values(nodeModules).map(({ default: node }) => node), AppEdge])
+  lf.value.batchRegister([...Object.values(nodeModules).map(({ default: node }) => node), AppEdge, LoopEdge])
   lf.value.setDefaultEdgeType('app-edge')
   lf.value.render(data ? data : {})
 
diff --git a/ui/src/workflow-canvas/node-menu/index.vue b/ui/src/workflow-canvas/node-menu/index.vue
index b91ac07e9fc..49d0531502d 100644
--- a/ui/src/workflow-canvas/node-menu/index.vue
+++ b/ui/src/workflow-canvas/node-menu/index.vue
@@ -35,7 +35,7 @@ function handleDragStart(node: NodeMenuItem, event: PointerEvent) {
     <el-tabs v-model="activeTab" class="small p-4 pb-0">
       <el-tab-pane label="基础组件" name="basic" />
       <el-tab-pane label="工具" name="tool" />
-      <el-tab-pane label="智能体" name="application" v-if="workflowMode === 'application'" />
+      <el-tab-pane label="智能体" name="application" v-if="workflowMode === 'application' || workflowMode === 'application-loop'" />
     </el-tabs>
 
     <KeepAlive>
diff --git a/ui/src/workflow-canvas/nodes/loop-body-node/LoopBodyContainer.vue b/ui/src/workflow-canvas/nodes/loop-body-node/LoopBodyContainer.vue
new file mode 100644
index 00000000000..c725ebf790f
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-body-node/LoopBodyContainer.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="workflow-loop-body relative overflow-visible p-4">
+    <div class="step-container" :class="{ isSelected: nodeSelected, error: nodeStatus !== 200 }">
+      <div class="flex-between">
+        <div class="flex min-w-0 items-center gap-2">
+          <component :is="iconComponent(`${model.type}-icon`)" class="mr-1" :size="24" :item="model.properties.node_data" />
+          <h4 class="truncate break-all" :title="String(model.properties.stepName ?? '')">{{ model.properties.stepName }}</h4>
+        </div>
+        <div class="flex items-center gap-1" @mousedown.stop @keydown.stop @click.stop>
+          <el-button text @click="layout">
+            <MkIcon name="icon_magnify_outlined" />
+          </el-button>
+          <el-button text @click="showNode = !showNode">
+            <MkIcon name="icon_down_outlined" />
+          </el-button>
+        </div>
+      </div>
+      <el-collapse-transition>
+        <div v-show="showNode" class="mt-2">
+          <div :style="`height:${canvasHeight}px`"><slot /></div>
+        </div>
+      </el-collapse-transition>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { set } from 'lodash'
+import type { BaseNodeModel } from '@logicflow/core'
+import { iconComponent } from '@/workflow-canvas/icons/utils'
+
+defineOptions({ name: 'WorkflowLoopBodyContainer' })
+const props = defineProps<{ nodeModel: BaseNodeModel }>()
+const model = computed(() => props.nodeModel)
+
+const nodeSelected = ref(model.value.isSelected)
+watch(() => model.value.isSelected, (value) => (nodeSelected.value = value))
+
+const nodeStatus = computed(() => (model.value.properties.status as number | undefined) ?? 200)
+
+const showNode = computed({
+  get: () => {
+    if (model.value.properties.showNode !== undefined) return model.value.properties.showNode
+    set(model.value.properties, 'showNode', true)
+    return true
+  },
+  set: (v) => set(model.value.properties, 'showNode', v),
+})
+
+const canvasHeight = ref(1000)
+
+function layout() {
+  model.value.loopLayout?.()
+}
+</script>
+<style lang="scss" scoped>
+.workflow-loop-body {
+  .step-container {
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 2px solid #fff;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgb(var(--el-text-color-primary-rgb) / 12%);
+    &:hover {
+      box-shadow: 0 6px 24px 0 rgb(var(--el-text-color-primary-rgb) / 8%);
+    }
+    &.isSelected {
+      border-color: var(--mk-primary);
+    }
+    &.error {
+      border-color: var(--mk-danger);
+      border-width: 1px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/workflow-canvas/nodes/loop-body-node/index.ts b/ui/src/workflow-canvas/nodes/loop-body-node/index.ts
new file mode 100644
index 00000000000..366273dc34e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-body-node/index.ts
@@ -0,0 +1,29 @@
+import LoopBodyNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+import type { Model } from '@logicflow/core'
+
+class LoopBodyModel extends WorkflowNodeModel {
+  setLoopBody?: () => void
+  loopLayout?: () => void
+
+  getDefaultAnchor(): Model.AnchorConfig[] {
+    return [{ x: this.x, y: this.y - this.height / 2 + 10, id: `${this.id}_children`, type: 'children', edgeAddable: false }]
+  }
+
+  refreshBranch() {
+    ;[...this.incoming.edges, ...this.outgoing.edges].forEach((edge) => (edge as { updatePathByAnchor?: () => void }).updatePathByAnchor?.())
+  }
+}
+
+class LoopBodyNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, LoopBodyNodeVue)
+  }
+}
+
+export default {
+  type: WorkflowNodeType.LoopBodyNode,
+  model: LoopBodyModel,
+  view: LoopBodyNodeView,
+}
diff --git a/ui/src/workflow-canvas/nodes/loop-body-node/index.vue b/ui/src/workflow-canvas/nodes/loop-body-node/index.vue
new file mode 100644
index 00000000000..c9c9adc7ef3
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-body-node/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <LoopBodyContainer :node-model="model">
+    <div
+      ref="containerRef"
+      class="h-full w-full"
+      @wheel.stop
+      @mousedown.stop
+      @click.stop
+      @dblclick.stop
+      @contextmenu.stop
+      @pointerdown.stop
+      @keydown.stop
+      @keyup.stop
+    />
+  </LoopBodyContainer>
+</template>
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import LogicFlow from '@logicflow/core'
+import { SelectionSelect } from '@logicflow/extension'
+import type { BaseNodeModel, GraphModel } from '@logicflow/core'
+import LoopBodyContainer from './LoopBodyContainer.vue'
+import Dagre from '@/workflow-canvas/plugins/dagre'
+import AppEdge from '@/workflow-canvas/core/edge/index'
+import LoopEdge from '@/workflow-canvas/core/edge/loop-edge'
+import { initDefaultShortcut } from '@/workflow-canvas/core/shortcut'
+import { disconnectByFlow } from '@/workflow-canvas/core/teleport'
+import { KnowledgeWorkFlowInstance, WorkFlowInstance } from '@/workflow-canvas/core/validate'
+import { WorkflowMode, type ShapeItem } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'WorkflowLoopBodyNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+
+const parentLoopWorkflowMode = inject<WorkflowMode>('loopWorkflowMode') || WorkflowMode.ApplicationLoop
+const apiType = (inject('apiType') as string) || 'workspace'
+const currentResource = inject<unknown>('currentResource')
+const selectModelList = inject<(params: { model_type: string }) => unknown>('getSelectModelList')
+const modelParamsForm = inject<(modelId: string) => unknown>('getModelParamsForm')
+
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
+const lf = shallowRef<LogicFlow | null>(null)
+
+const nodeModules = import.meta.glob<{ default: LogicFlow.RegisterConfig }>('../*/index.ts', { eager: true })
+
+function nestedStartDrag(shapeItem: ShapeItem, event?: PointerEvent) {
+  const lfInstance = lf.value
+  if (!lfInstance) return
+  if (shapeItem.type) {
+    lfInstance.dnd.startDrag({ type: shapeItem.type as string, properties: cloneDeep(shapeItem.properties ?? {}) })
+    if (event) {
+      const containerRect = lfInstance.container.getBoundingClientRect()
+      const isInsideCanvas =
+        event.clientX >= containerRect.left &&
+        event.clientX <= containerRect.right &&
+        event.clientY >= containerRect.top &&
+        event.clientY <= containerRect.bottom
+      if (isInsideCanvas) lfInstance.dnd.dragEnter(event)
+    }
+  }
+  shapeItem.callback?.(lfInstance)
+}
+
+const setLoopBody = () => {
+  const loopNode = model.graphModel.getNodeModelById(String(model.properties.loop_node_id))
+  if (loopNode) {
+    if (!loopNode.properties.node_data) set(loopNode.properties, 'node_data', { loop_type: 'ARRAY', array: [], number: 1 })
+    loopNode.properties.node_data.loop = { x: model.x, y: model.y }
+    loopNode.properties.node_data.loop_body = lf.value?.getGraphData()
+  }
+}
+
+const validate = () => {
+  const lfInstance = lf.value
+  if (!lfInstance) return Promise.resolve({})
+  const graphData = (lfInstance.getGraphData() ?? { nodes: [], edges: [] }) as unknown as ConstructorParameters<typeof WorkFlowInstance>[0]
+  const workflow =
+    parentLoopWorkflowMode === WorkflowMode.KnowledgeLoop
+      ? new KnowledgeWorkFlowInstance(graphData, parentLoopWorkflowMode)
+      : new WorkFlowInstance(graphData, parentLoopWorkflowMode)
+
+  return Promise.all(lfInstance.graphModel.nodes.map((element) => (element as { validate?: () => Promise<unknown> }).validate?.()))
+    .then(() => {
+      const loopNode = model.graphModel.getNodeModelById(String(model.properties.loop_node_id))
+      try {
+        workflow.is_loop_valid()
+        const nodeData = loopNode?.properties.node_data as { loop_type?: string } | undefined
+        if (nodeData?.loop_type === 'LOOP' && !workflow.exist_break_node()) {
+          return Promise.reject({ node: loopNode, errMessage: '循环节点需要包含Break节点' })
+        }
+        return Promise.resolve({})
+      } catch (error) {
+        return Promise.reject({ node: loopNode, errMessage: error })
+      }
+    })
+    .catch((error) => {
+      model.graphModel.selectNodeById(model.id)
+      model.graphModel.transformModel.focusOn(model.x, model.y, model.width, model.height)
+      throw error
+    })
+}
+
+const loopLayout = () => {
+  const extension = lf.value?.extension as { dagre?: { layout?: () => unknown } } | undefined
+  extension?.dagre?.layout?.()
+}
+
+const renderGraphData = (data?: LogicFlow.GraphConfigData) => {
+  const container = containerRef.value
+  if (!container) return
+
+  lf.value = new LogicFlow({
+    plugins: [Dagre, SelectionSelect],
+    textEdit: false,
+    adjustEdge: false,
+    adjustEdgeStartAndEnd: false,
+    background: { backgroundColor: '#f5f6f7' },
+    grid: { size: 20, type: 'dot', config: { color: '#DEE0E3', thickness: 1 } },
+    keyboard: { enabled: true },
+    isSilentMode: false,
+    container,
+  })
+  const lfInstance = lf.value
+  lfInstance.setTheme({ bezier: { stroke: '#afafaf', strokeWidth: 1 } })
+
+  // 嵌套画布位于主画布 foreignObject 内，会随主画布缩放/平移而放大。
+  // 覆写 HtmlPointToCanvasPoint，把主画布的 scale/translate 乘进去，使鼠标坐标、节点拖动距离、连线位置与真实位置一致。
+  const nestedTransform = lfInstance.graphModel.transformModel
+  const parentTransform = model.graphModel.transformModel
+  lfInstance.graphModel.transformModel.HtmlPointToCanvasPoint = (point: LogicFlow.PointTuple): LogicFlow.PointTuple => {
+    let scaleX = nestedTransform.SCALE_X
+    let scaleY = nestedTransform.SCALE_Y
+    let translateX = nestedTransform.TRANSLATE_X
+    let translateY = nestedTransform.TRANSLATE_Y
+    const [x, y] = point
+    scaleX *= parentTransform.SCALE_X
+    scaleY *= parentTransform.SCALE_Y
+    translateX *= parentTransform.SCALE_X
+    translateY *= parentTransform.SCALE_Y
+    return [(x - translateX) / scaleX, (y - translateY) / scaleY]
+  }
+
+  initDefaultShortcut(lfInstance, lfInstance.graphModel)
+  lfInstance.graphModel.get_provide = (node: LogicFlow.NodeData | null, graph: GraphModel | null) => ({
+    getModel: () => node,
+    getGraph: () => graph,
+    workflowMode: parentLoopWorkflowMode,
+    loopWorkflowMode: parentLoopWorkflowMode,
+    currentResource,
+    apiType,
+    getSelectModelList: selectModelList,
+    getModelParamsForm: modelParamsForm,
+    startDragNode: nestedStartDrag,
+  })
+  lfInstance.graphModel.refresh_loop_fields = (fields: Array<{ label: string; value: string }>) => {
+    const loopNode = model.graphModel.getNodeModelById(String(model.properties.loop_node_id))
+    if (loopNode) {
+      loopNode.properties.config.fields = fields
+      loopNode.clearNextNodeField?.(true)
+    }
+  }
+  lfInstance.graphModel.getUpNodeFieldList = (containSelf: boolean, useCache: boolean) => model.getUpNodeFieldList(containSelf, useCache)
+  lfInstance.graphModel.get_parent_nodes = () => model.graphModel.nodes
+
+  lfInstance.batchRegister([...Object.values(nodeModules).map(({ default: node }) => node), AppEdge, LoopEdge])
+  lfInstance.setDefaultEdgeType('app-edge')
+  lfInstance.graphModel.eventCenter.on('delete_edge', (edgeIds: string[]) => {
+    edgeIds.forEach((edgeId) => lfInstance.deleteEdge(edgeId))
+  })
+  lfInstance.graphModel.eventCenter.on('anchor:drop', (event) => {
+    const nodeModel = event.nodeModel as BaseNodeModel
+    ;(nodeModel as { clearNextNodeField?: (containSelf: boolean) => void }).clearNextNodeField?.(false)
+  })
+  lfInstance.render(data ?? {})
+}
+
+onMounted(() => {
+  renderGraphData(cloneDeep(model.properties.workflow as LogicFlow.GraphConfigData))
+  set(model, 'setLoopBody', setLoopBody)
+  set(model, 'set_loop_body', setLoopBody)
+  set(model, 'validate', validate)
+  set(model, 'loopLayout', loopLayout)
+})
+
+onUnmounted(() => {
+  disconnectByFlow(lf.value?.graphModel.flowId ?? '')
+  lf.value = null
+})
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-break-node/index.ts b/ui/src/workflow-canvas/nodes/loop-break-node/index.ts
new file mode 100644
index 00000000000..c42ad5eeea2
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-break-node/index.ts
@@ -0,0 +1,15 @@
+import LoopBreakNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class LoopBreakNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, LoopBreakNodeVue)
+  }
+}
+
+export default {
+  type: WorkflowNodeType.LoopBreakNode,
+  model: WorkflowNodeModel,
+  view: LoopBreakNodeView,
+}
diff --git a/ui/src/workflow-canvas/nodes/loop-break-node/index.vue b/ui/src/workflow-canvas/nodes/loop-break-node/index.vue
new file mode 100644
index 00000000000..32f08bd497d
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-break-node/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <NodeContainer :node-model="model">
+    <div class="text-sm text-N600">终止当前循环，跳出循环体</div>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { inject, onMounted } from 'vue'
+import { set } from 'lodash'
+import type { BaseNodeModel } from '@logicflow/core'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+
+defineOptions({ name: 'WorkflowLoopBreakNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+
+onMounted(() => {
+  if (!model.properties.node_data) {
+    set(model.properties, 'node_data', { condition: 'and', condition_list: [] })
+  }
+})
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts b/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts
new file mode 100644
index 00000000000..2846b3b8616
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-continue-node/index.ts
@@ -0,0 +1,15 @@
+import LoopContinueNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class LoopContinueNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, LoopContinueNodeVue)
+  }
+}
+
+export default {
+  type: WorkflowNodeType.LoopContinueNode,
+  model: WorkflowNodeModel,
+  view: LoopContinueNodeView,
+}
diff --git a/ui/src/workflow-canvas/nodes/loop-continue-node/index.vue b/ui/src/workflow-canvas/nodes/loop-continue-node/index.vue
new file mode 100644
index 00000000000..1fbeac62b57
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-continue-node/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <NodeContainer :node-model="model">
+    <div class="text-sm text-N600">结束当前迭代，进入下一次循环</div>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { inject, onMounted } from 'vue'
+import { set } from 'lodash'
+import type { BaseNodeModel } from '@logicflow/core'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+
+defineOptions({ name: 'WorkflowLoopContinueNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+
+onMounted(() => {
+  if (!model.properties.node_data) {
+    set(model.properties, 'node_data', { condition: 'and', condition_list: [] })
+  }
+})
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-node/index.ts b/ui/src/workflow-canvas/nodes/loop-node/index.ts
new file mode 100644
index 00000000000..5dcb664435b
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-node/index.ts
@@ -0,0 +1,28 @@
+import LoopNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+import type { Model } from '@logicflow/core'
+
+class LoopNodeModel extends WorkflowNodeModel {
+  getDefaultAnchor(): Model.AnchorConfig[] {
+    const anchors = super.getDefaultAnchor()
+    anchors.push({ x: this.x, y: this.y + this.height / 2 - 25, id: `${this.id}_children`, type: 'children', edgeAddable: false })
+    return anchors
+  }
+
+  refreshBranch() {
+    ;[...this.incoming.edges, ...this.outgoing.edges].forEach((edge) => (edge as { updatePathByAnchor?: () => void }).updatePathByAnchor?.())
+  }
+}
+
+class LoopNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, LoopNodeVue)
+  }
+}
+
+export default {
+  type: WorkflowNodeType.LoopNode,
+  model: LoopNodeModel,
+  view: LoopNodeView,
+}
diff --git a/ui/src/workflow-canvas/nodes/loop-node/index.vue b/ui/src/workflow-canvas/nodes/loop-node/index.vue
new file mode 100644
index 00000000000..27ae686161f
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-node/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+    <el-form ref="formRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
+      <el-form-item
+        label="循环类型"
+        prop="loop_type"
+        :rules="{ required: true, message: '请选择循环类型', trigger: 'change' }"
+      >
+        <el-select v-model="formData.loop_type" :teleported="false" class="w-full" size="small">
+          <el-option label="数组循环" value="ARRAY" />
+          <el-option label="次数循环" value="NUMBER" />
+          <el-option label="无限循环" value="LOOP" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.loop_type === 'ARRAY'" label="循环数组" prop="array">
+        <NodeCascader ref="nodeCascaderRef" v-model="formData.array" :node-model="model" class="w-full" placeholder="请选择循环数组变量" />
+      </el-form-item>
+      <el-form-item v-else-if="formData.loop_type === 'NUMBER'" label="循环次数" prop="number">
+        <el-input-number v-model="formData.number" :min="1" />
+      </el-form-item>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { computed, inject, onMounted, useTemplateRef, watch } from 'vue'
+import { cloneDeep, set, throttle } from 'lodash'
+import type { FormInstance } from 'element-plus'
+import type { BaseNodeModel } from '@logicflow/core'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import { loopBodyNode, loopStartNode } from '@/workflow-canvas/config/node-data'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'WorkflowLoopNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+
+type CanvasLoopBodyModel = BaseNodeModel & { setLoopBody?: () => void }
+
+interface LoopNodeData {
+  loop_type: 'ARRAY' | 'NUMBER' | 'LOOP'
+  array: string[]
+  number: number
+  loop?: { x: number; y: number }
+  loop_body?: { nodes: unknown[]; edges: unknown[] }
+}
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const nodeCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('nodeCascaderRef')
+
+const DEFAULT_FORM: LoopNodeData = { loop_type: 'ARRAY', array: [], number: 1 }
+
+const formData = computed<LoopNodeData>({
+  get: () => {
+    if (!model.properties.node_data) {
+      set(model.properties, 'node_data', cloneDeep(DEFAULT_FORM))
+    }
+    const data = model.properties.node_data as LoopNodeData
+    if (data.loop_type === undefined) set(data, 'loop_type', 'ARRAY')
+    if (!Array.isArray(data.array)) set(data, 'array', [])
+    if (data.number === undefined) set(data, 'number', 1)
+    return data
+  },
+  set: (value) => (model.properties.node_data = value),
+})
+
+const showNode = computed({
+  get: () => {
+    if (model.properties.showNode !== undefined) return model.properties.showNode
+    set(model.properties, 'showNode', true)
+    return true
+  },
+  set: (v) => set(model.properties, 'showNode', v),
+})
+
+watch(showNode, (value) => {
+  value ? throttle(mountLoopBodyNode, 1000)() : throttle(destroyLoopBodyNode, 1000)()
+})
+
+function validate() {
+  return Promise.all([nodeCascaderRef.value?.validate(), formRef.value?.validate()]).catch((error) =>
+    Promise.reject({ node: model, errMessage: error }),
+  )
+}
+
+function destroyLoopBodyNode() {
+  const outgoing = model.graphModel.getNodeOutgoingNode(model.id)
+  const loopBody = outgoing.find((item) => String(item.type) === WorkflowNodeType.LoopBodyNode) as CanvasLoopBodyModel | undefined
+  if (loopBody) {
+    loopBody.setLoopBody?.()
+    model.graphModel.deleteNode(loopBody.id)
+  }
+}
+
+function mountLoopBodyNode() {
+  const outgoing = model.graphModel.getNodeOutgoingNode(model.id)
+  if (outgoing.some((item) => String(item.type) === WorkflowNodeType.LoopBodyNode)) return
+
+  const nodeData = model.properties.node_data as LoopNodeData | undefined
+  let workflow = (model.properties.workflow as { nodes: unknown[]; edges: unknown[] } | undefined) ?? {
+    nodes: [loopStartNode],
+    edges: [],
+  }
+  let x = model.x
+  let y = model.y + 350
+  if (nodeData?.loop_body) workflow = nodeData.loop_body
+  if (nodeData?.loop) {
+    x = nodeData.loop.x
+    y = nodeData.loop.y
+  }
+
+  const bodyModel = model.graphModel.addNode({
+    type: WorkflowNodeType.LoopBodyNode,
+    properties: {
+      ...cloneDeep(loopBodyNode.properties),
+      height: loopBodyNode.height,
+      workflow: cloneDeep(workflow),
+      loop_node_id: model.id,
+    },
+    x,
+    y,
+  })
+  model.graphModel.addEdge({
+    type: 'loop-edge',
+    sourceNodeId: model.id,
+    sourceAnchorId: `${model.id}_children`,
+    targetNodeId: bodyModel.id,
+    targetAnchorId: `${bodyModel.id}_children`,
+    virtual: true,
+  } as unknown as Parameters<typeof model.graphModel.addEdge>[0])
+}
+
+onMounted(() => {
+  set(model, 'validate', validate)
+  if (showNode.value && !model.virtual) mountLoopBodyNode()
+})
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldDialog.vue b/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldDialog.vue
new file mode 100644
index 00000000000..f7c8b1295af
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldDialog.vue
@@ -0,0 +1,76 @@
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form label-position="top" ref="fieldFormRef" :rules="rules" :model="form" require-asterisk-position="right">
+      <el-form-item label="参数名" required prop="field" :rules="rules.field">
+        <el-input v-model="form.field" :maxlength="64" placeholder="请输入变量名（英文字母、数字、下划线）" show-word-limit />
+      </el-form-item>
+      <el-form-item label="参数标签" required prop="label" :rules="rules.label">
+        <el-input v-model="form.label" :maxlength="64" show-word-limit placeholder="请输入参数标签" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close">取消</el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)">{{ isEdit ? '保存' : '添加' }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance } from 'element-plus'
+
+defineOptions({ name: 'LoopFieldDialog' })
+const emit = defineEmits<{ refresh: [data: { field: string; label: string }, index?: number] }>()
+
+const fieldFormRef = ref<FormInstance>()
+const isEdit = ref(false)
+const currentIndex = ref<number>()
+const form = ref<{ field: string; label: string }>({ field: '', label: '' })
+
+const rules = reactive({
+  label: [{ required: true, message: '请输入参数标签', trigger: 'blur' }],
+  field: [
+    { required: true, message: '请输入变量名', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '变量名只能包含英文字母、数字、下划线', trigger: 'blur' },
+  ],
+})
+
+const dialogVisible = ref(false)
+
+function open(row?: { field: string; label: string }, index?: number) {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+    currentIndex.value = index
+  }
+  dialogVisible.value = true
+}
+
+function close() {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = undefined
+  form.value = { field: '', label: '' }
+}
+
+async function submit(formEl: FormInstance | undefined) {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value, currentIndex.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldTable.vue b/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldTable.vue
new file mode 100644
index 00000000000..fbd0b24c2a5
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/component/LoopFieldTable.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="flex-between mb-2">
+      <h6 class="mk-title-decoration">循环变量</h6>
+      <el-button text type="primary" @click="openAddDialog()">
+        <template #icon><MkIcon name="icon_add_outlined" /></template>
+        添加
+      </el-button>
+    </div>
+    <el-table v-if="loopInputFieldList.length > 0" :data="loopInputFieldList" row-key="field" border>
+      <el-table-column prop="field" label="变量名">
+        <template #default="{ row }">
+          <span :title="row.field" class="truncate">{{ row.field }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="label" label="标签">
+        <template #default="{ row }">
+          <span :title="row.label" class="truncate">{{ row.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="90">
+        <template #default="{ row, $index }">
+          <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+            <template #icon><MkIcon name="icon_edit_outlined" /></template>
+          </el-button>
+          <el-button type="primary" text @click="deleteField($index)">
+            <template #icon><MkIcon name="icon_delete" /></template>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <LoopFieldDialog ref="fieldDialogRef" @refresh="refreshFieldList" />
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import type { BaseNodeModel } from '@logicflow/core'
+import LoopFieldDialog from './LoopFieldDialog.vue'
+import { MsgError } from '@/utils/message'
+
+defineOptions({ name: 'LoopFieldTable' })
+const props = defineProps<{ nodeModel: BaseNodeModel }>()
+
+type WorkflowGraphModel = BaseNodeModel['graphModel'] & { refresh_loop_fields?: (fields: Array<{ label: string; value: string }>) => void }
+type LoopInputField = { field: string; label: string }
+
+const DEFAULT_FIELDS: LoopInputField[] = [
+  { field: 'index', label: '下标' },
+  { field: 'item', label: '循环元素' },
+]
+
+const fieldDialogRef = ref<InstanceType<typeof LoopFieldDialog>>()
+const loopInputFieldList = ref<LoopInputField[]>([])
+
+function openAddDialog(data?: LoopInputField, index?: number) {
+  fieldDialogRef.value?.open(data, index)
+}
+
+function deleteField(index: number) {
+  loopInputFieldList.value.splice(index, 1)
+  sync()
+}
+
+function refreshFieldList(data: LoopInputField, index?: number) {
+  if (loopInputFieldList.value.some((item, i) => index !== i && item.field === data.field)) {
+    MsgError(`循环变量已存在：${data.field}`)
+    return
+  }
+  if (index === undefined) {
+    loopInputFieldList.value.push(data)
+  } else {
+    loopInputFieldList.value.splice(index, 1, data)
+  }
+  sync()
+}
+
+function sync() {
+  set(props.nodeModel.properties, 'loop_input_field_list', cloneDeep(loopInputFieldList.value))
+  const graphModel = props.nodeModel.graphModel as WorkflowGraphModel
+  graphModel.refresh_loop_fields?.(loopInputFieldList.value.map((item) => ({ label: item.label, value: item.field })))
+  // 循环变量变化后清空循环体内下游节点的字段字典缓存，使其能读到最新的 loop 分组变量
+  ;(props.nodeModel as { clearNextNodeField?: (containSelf: boolean) => void }).clearNextNodeField?.(true)
+}
+
+onMounted(() => {
+  const properties = props.nodeModel.properties as { loop_input_field_list?: LoopInputField[] }
+  if (Array.isArray(properties.loop_input_field_list)) {
+    loopInputFieldList.value = cloneDeep(properties.loop_input_field_list)
+  } else {
+    loopInputFieldList.value = cloneDeep(DEFAULT_FIELDS)
+  }
+  sync()
+})
+</script>
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/index.ts b/ui/src/workflow-canvas/nodes/loop-start-node/index.ts
new file mode 100644
index 00000000000..0bdefed16d3
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/index.ts
@@ -0,0 +1,33 @@
+import LoopStartNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
+
+interface LoopStartNodeProperties {
+  config?: { fields?: Array<{ label: string; value: string }>; globalFields?: unknown[] }
+  loop_input_field_list?: Array<{ field?: string; label?: string; variable?: string }>
+  [key: string]: unknown
+}
+
+class LoopStartNodeModel extends WorkflowNodeModel {
+  override getNodeFieldList(): WorkflowNodeField[] {
+    const properties = this.properties as LoopStartNodeProperties
+    const inputFields =
+      properties.loop_input_field_list && properties.loop_input_field_list.length
+        ? properties.loop_input_field_list.map((item) => ({ field: item.field ?? item.variable ?? '', label: item.label ?? '' }))
+        : (properties.config?.fields ?? []).map((field) => ({ field: field.value, label: field.label }))
+    const loopFields = inputFields.map((item) => ({ label: item.label, value: item.field })).filter((field) => Boolean(field.value))
+    return [{ value: 'loop', label: '循环变量', type: 'loop', children: loopFields }, ...super.getNodeFieldList()]
+  }
+}
+
+class LoopStartNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, LoopStartNodeVue)
+  }
+}
+
+export default {
+  type: WorkflowNodeType.LoopStartNode,
+  model: LoopStartNodeModel,
+  view: LoopStartNodeView,
+}
diff --git a/ui/src/workflow-canvas/nodes/loop-start-node/index.vue b/ui/src/workflow-canvas/nodes/loop-start-node/index.vue
new file mode 100644
index 00000000000..0f3bf255068
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/loop-start-node/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+    <LoopFieldTable :node-model="model" />
+    <template v-if="loopInputFields.length">
+      <h6 class="mk-title-decoration mb-2 mt-4">循环变量</h6>
+      <div class="mk-gray-card space-y-4">
+        <template v-for="(item, index) in loopInputFields" :key="index">
+          <div class="group flex-between">
+            <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
+            <el-tooltip effect="dark" content="复制参数" placement="top">
+              <el-button class="group-hover-visible" link @click="copyText(`{{loop.${item.value}}}`)">
+                <MkIcon name="icon_copy_outlined" />
+              </el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </div>
+    </template>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { BaseNodeModel } from '@logicflow/core'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import LoopFieldTable from './component/LoopFieldTable.vue'
+import { copyText } from '@/utils/clipboard'
+
+defineOptions({ name: 'WorkflowLoopStartNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const model = getModel()
+
+interface LoopInputField {
+  field?: string
+  label?: string
+  variable?: string
+}
+
+const loopInputFields = computed(() => {
+  const list = (model.properties as { loop_input_field_list?: LoopInputField[] }).loop_input_field_list ?? []
+  return list
+    .map((item) => ({ label: item.label ?? item.field ?? '', value: item.field ?? item.variable ?? '' }))
+    .filter((field) => Boolean(field.value))
+})
+</script>