diff --git a/ordo-editor/packages/vue/src/components/flow/OrdoFlowEditor.vue b/ordo-editor/packages/vue/src/components/flow/OrdoFlowEditor.vue
index 35bd9ddd..215aee28 100644
--- a/ordo-editor/packages/vue/src/components/flow/OrdoFlowEditor.vue
+++ b/ordo-editor/packages/vue/src/components/flow/OrdoFlowEditor.vue
@@ -11,7 +11,14 @@ import { MiniMap } from '@vue-flow/minimap';
 import type { RuleSet, Step } from '@ordo-engine/editor-core';
 import { Step as StepFactory, generateId } from '@ordo-engine/editor-core';
 
-import { DecisionNode, ActionNode, TerminalNode, GroupNode, type StepTraceInfo } from './nodes';
+import {
+  DecisionNode,
+  ActionNode,
+  TerminalNode,
+  SubRuleNode,
+  GroupNode,
+  type StepTraceInfo,
+} from './nodes';
 import { OrdoEdge } from './edges';
 import OrdoFlowToolbar from './OrdoFlowToolbar.vue';
 import OrdoFlowPropertyPanel from './OrdoFlowPropertyPanel.vue';
@@ -32,7 +39,7 @@ import {
 } from './utils/layout';
 import { useI18n, LOCALE_KEY, type Lang } from '../../locale';
 import type { FieldSuggestion } from '../base/OrdoExpressionInput.vue';
-type NodeCreationType = 'decision' | 'action' | 'terminal';
+type NodeCreationType = 'decision' | 'action' | 'terminal' | 'sub_rule';
 
 /** Execution trace data for overlay */
 export interface ExecutionTraceData {
@@ -78,6 +85,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   'update:modelValue': [value: RuleSet];
   change: [value: RuleSet];
+  'open-sub-rule': [name: string];
 }>();
 
 const FLOW_EDGE_STYLE_KEY = '_flowEdgeStyle';
@@ -135,6 +143,7 @@ const nodeTypes: Record<string, any> = {
   decision: markRaw(DecisionNode),
   action: markRaw(ActionNode),
   terminal: markRaw(TerminalNode),
+  sub_rule: markRaw(SubRuleNode),
   group: markRaw(GroupNode),
 };
 
@@ -208,6 +217,8 @@ const nodeDragPreviewLabel = computed(() => {
       return t('step.action');
     case 'terminal':
       return t('step.terminal');
+    case 'sub_rule':
+      return t('step.subRule');
   }
 });
 
@@ -221,6 +232,8 @@ const nodeDragPreviewTypeLabel = computed(() => {
       return t('step.typeAction');
     case 'terminal':
       return t('step.typeTerminal');
+    case 'sub_rule':
+      return t('step.typeSubRule');
   }
 });
 
@@ -285,7 +298,8 @@ function syncToRuleset() {
     edges.value,
     buildFlowConfig(),
     props.modelValue.startStepId,
-    currentGroupNodes
+    currentGroupNodes,
+    props.modelValue.subRules
   );
   emit('update:modelValue', newRuleset);
   emit('change', newRuleset);
@@ -610,6 +624,13 @@ function onPaneClick() {
   hideContextMenu();
 }
 
+function onNodeDblClick(event: any) {
+  const step = event.node?.data?.step;
+  if (step?.type === 'sub_rule' && step.refName) {
+    emit('open-sub-rule', step.refName);
+  }
+}
+
 // Handle right-click on pane
 function onPaneContextMenu(event: MouseEvent) {
   if (isCanvasReadOnly.value) return;
@@ -701,7 +722,25 @@ onConnect((params) => {
     targetHandle: params.targetHandle || undefined,
     renderStyle: edgeStyle.value,
   });
-  edges.value.push(newEdge);
+
+  // For action/sub_rule nodes, an output handle can only have one outgoing exec edge.
+  // Replace any existing outgoing exec edge from the same source+handle to avoid
+  // findLinearExecutionEdge picking up the stale edge and silently discarding the new one.
+  const isLinearExecEdge =
+    !newEdge.data?.branchId && !newEdge.data?.isDefault && newEdge.data?.edgeType === 'exec';
+  const filtered = isLinearExecEdge
+    ? edges.value.filter(
+        (e) =>
+          !(
+            e.source === newEdge.source &&
+            e.data?.edgeType === 'exec' &&
+            !e.data?.branchId &&
+            !e.data?.isDefault
+          )
+      )
+    : edges.value;
+
+  edges.value = [...filtered, newEdge];
   syncToRuleset();
 });
 
@@ -857,6 +896,18 @@ function createStep(type: NodeCreationType, id: string): Step {
         name: t('step.terminal'),
         code: 'RESULT',
       });
+    case 'sub_rule':
+      const firstSubRuleName = Object.keys(props.modelValue.subRules ?? {})[0] ?? '';
+      return StepFactory.subRule({
+        id,
+        name: t('step.subRule'),
+        refName: firstSubRuleName,
+        assetRef: {
+          scope: 'project',
+          name: firstSubRuleName,
+        },
+        nextStepId: '',
+      });
   }
 }
 
@@ -896,7 +947,7 @@ function addNode(type: NodeCreationType) {
 }
 
 function isNodeCreationType(value: string): value is NodeCreationType {
-  return value === 'decision' || value === 'action' || value === 'terminal';
+  return value === 'decision' || value === 'action' || value === 'terminal' || value === 'sub_rule';
 }
 
 function clearNodeDragPreview() {
@@ -1114,6 +1165,14 @@ function duplicateSelectedNode() {
         name: `${originalStep.name} (copy)`,
       });
       break;
+    case 'sub_rule':
+      newStep = StepFactory.subRule({
+        ...originalStep,
+        id: newId,
+        name: `${originalStep.name} (copy)`,
+        nextStepId: '',
+      });
+      break;
     default:
       hideContextMenu();
       return;
@@ -1232,7 +1291,14 @@ function setAsStart(nodeId: string) {
     },
   }));
 
-  const newRuleset = flowToRuleset(nodes.value, edges.value, buildFlowConfig(), nodeId);
+  const newRuleset = flowToRuleset(
+    nodes.value,
+    edges.value,
+    buildFlowConfig(),
+    nodeId,
+    undefined,
+    props.modelValue.subRules
+  );
   emit('update:modelValue', newRuleset);
   emit('change', newRuleset);
 }
@@ -1415,6 +1481,7 @@ onMounted(() => {
         :multi-selection-key-code="['Meta', 'Control']"
         class="flow-canvas"
         @node-click="onNodeClick"
+        @node-double-click="onNodeDblClick"
         @pane-click="onPaneClick"
         @selection-change="onSelectionChange"
         @node-context-menu="onNodeContextMenu"
@@ -1581,6 +1648,7 @@ onMounted(() => {
       v-if="selectedStepNode && !isCanvasReadOnly"
       :node="selectedStepNode"
       :available-steps="modelValue.steps"
+      :available-sub-rules="modelValue.subRules ?? {}"
       :suggestions="suggestions"
       :disabled="disabled"
       @update="updateNode"
@@ -1694,6 +1762,10 @@ onMounted(() => {
   border-color: var(--ordo-node-terminal, #388a34);
 }
 
+.node-drag-preview.type-sub_rule {
+  border-color: var(--ordo-node-sub-rule, #5b708a);
+}
+
 .node-drag-preview-header {
   display: flex;
   align-items: center;
@@ -1732,6 +1804,10 @@ onMounted(() => {
   color: var(--ordo-node-terminal, #388a34);
 }
 
+.node-drag-preview.type-sub_rule .node-drag-preview-icon {
+  color: var(--ordo-node-sub-rule, #5b708a);
+}
+
 /* Vue Flow overrides */
 :deep(.vue-flow__minimap) {
   background: var(--ordo-bg-panel);
diff --git a/ordo-editor/packages/vue/src/components/flow/nodes/ActionNode.vue b/ordo-editor/packages/vue/src/components/flow/nodes/ActionNode.vue
index ac1c738f..a2e14481 100644
--- a/ordo-editor/packages/vue/src/components/flow/nodes/ActionNode.vue
+++ b/ordo-editor/packages/vue/src/components/flow/nodes/ActionNode.vue
@@ -347,9 +347,10 @@ function formatValue(assignment: VariableAssignment): string {
 /* Input pin positioning (in header) */
 .node-header .pin-input {
   position: absolute;
-  left: -5px;
+  left: -10px;
   top: 50%;
   transform: translateY(-50%);
+  padding: 5px;
 }
 
 /* Output pin positioning (in rows) */
diff --git a/ordo-editor/packages/vue/src/components/flow/nodes/DecisionNode.vue b/ordo-editor/packages/vue/src/components/flow/nodes/DecisionNode.vue
index 62a0fb11..c7d00054 100644
--- a/ordo-editor/packages/vue/src/components/flow/nodes/DecisionNode.vue
+++ b/ordo-editor/packages/vue/src/components/flow/nodes/DecisionNode.vue
@@ -329,9 +329,10 @@ function getBranchTooltip(branch: { condition?: unknown }): string {
 /* Input pin positioning (in header) */
 .node-header .pin-input {
   position: absolute;
-  left: -5px;
+  left: -10px;
   top: 50%;
   transform: translateY(-50%);
+  padding: 5px;
 }
 
 /* Output pin positioning (in rows) */
diff --git a/ordo-editor/packages/vue/src/components/flow/nodes/SubRuleNode.vue b/ordo-editor/packages/vue/src/components/flow/nodes/SubRuleNode.vue
new file mode 100644
index 00000000..8cc91282
--- /dev/null
+++ b/ordo-editor/packages/vue/src/components/flow/nodes/SubRuleNode.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+/**
+ * SubRule Node - Flow editor sub-rule invocation node
+ */
+import { computed } from 'vue';
+import { Handle, Position } from '@vue-flow/core';
+import type { SubRuleStep } from '@ordo-engine/editor-core';
+import OrdoIcon from '../../icons/OrdoIcon.vue';
+import { PIN_COLORS } from '../types';
+import { useI18n } from '../../../locale';
+import type { StepTraceInfo } from './ExecutionAnnotation.vue';
+import ExecutionAnnotation from './ExecutionAnnotation.vue';
+
+export interface Props {
+  data: {
+    step: SubRuleStep;
+    isStart: boolean;
+    label: string;
+    executionAnnotation?: StepTraceInfo | null;
+  };
+  selected?: boolean;
+}
+
+const props = defineProps<Props>();
+const { t } = useI18n();
+
+const displayTitle = computed(() => props.data.label || props.data.step.name || t('step.subRule'));
+const bindingCount = computed(() => props.data.step.bindings?.length ?? 0);
+const outputCount = computed(() => props.data.step.outputs?.length ?? 0);
+</script>
+
+<template>
+  <div class="flow-node sub-rule-node" :class="{ selected, 'is-start': data.isStart }">
+    <ExecutionAnnotation
+      v-if="data.executionAnnotation"
+      :trace="data.executionAnnotation"
+      position="top"
+    />
+
+    <div class="node-header">
+      <Handle type="target" :position="Position.Left" class="pin pin-exec pin-input" id="input">
+        <svg class="pin-shape" width="10" height="10" viewBox="0 0 10 10">
+          <polygon points="0,0 10,5 0,10" :fill="PIN_COLORS.execInput" class="pin-fill" />
+        </svg>
+      </Handle>
+
+      <span class="node-badge start" v-if="data.isStart">{{ t('step.start') }}</span>
+      <OrdoIcon name="sub_rule" :size="14" class="node-icon" />
+      <span class="node-title">{{ displayTitle }}</span>
+      <span class="node-type-badge">{{ t('step.typeSubRule') }}</span>
+    </div>
+
+    <div class="node-section ref-section">
+      <span class="ref-label">{{ t('step.refName') }}</span>
+      <span class="ref-value">{{ data.step.refName || t('common.none') }}</span>
+    </div>
+
+    <div class="node-section io-section">
+      <span class="io-chip">{{ bindingCount }} {{ t('step.bindings') }}</span>
+      <span class="io-chip">{{ outputCount }} {{ t('step.outputs') }}</span>
+    </div>
+
+    <div class="node-section exec-section">
+      <div class="exec-row">
+        <span class="exec-label">{{ t('step.next') }}</span>
+        <Handle
+          type="source"
+          :position="Position.Right"
+          class="pin pin-exec pin-output pin-default"
+          id="output"
+        >
+          <svg class="pin-shape" width="10" height="10" viewBox="0 0 10 10">
+            <polygon points="0,0 10,5 0,10" :fill="PIN_COLORS.execDefault" class="pin-fill" />
+          </svg>
+        </Handle>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-node {
+  background: var(--ordo-bg-item, #1e1e1e);
+  border: 1px solid var(--ordo-border-color, #3c3c3c);
+  border-radius: 4px;
+  min-width: 190px;
+  max-width: 280px;
+  font-family: var(--ordo-font-sans);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition:
+    box-shadow 0.15s,
+    border-color 0.15s;
+  position: relative;
+}
+
+.flow-node:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  border-color: var(--ordo-text-tertiary, #6c6c6c);
+}
+
+.flow-node.selected,
+.flow-node.is-start {
+  border-color: var(--ordo-node-sub-rule, #5b708a);
+}
+
+.flow-node.selected {
+  box-shadow: 0 0 0 2px rgba(91, 112, 138, 0.3);
+}
+
+.sub-rule-node {
+  border-top: 3px solid var(--ordo-node-sub-rule, #5b708a);
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 8px 20px;
+  background: rgba(91, 112, 138, 0.12);
+  border-bottom: 1px solid var(--ordo-border-light, #2d2d2d);
+  position: relative;
+}
+
+.node-badge.start {
+  font-size: 8px;
+  font-weight: 700;
+  color: #fff;
+  background: var(--ordo-node-sub-rule, #5b708a);
+  padding: 2px 4px;
+  border-radius: 2px;
+  text-transform: uppercase;
+}
+
+.node-icon {
+  color: var(--ordo-node-sub-rule, #5b708a);
+  flex-shrink: 0;
+}
+
+.node-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ordo-text-primary, #e0e0e0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.node-type-badge,
+.io-chip {
+  font-size: 9px;
+  color: var(--ordo-text-tertiary, #888);
+  background: var(--ordo-bg-panel, #252525);
+  padding: 2px 5px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.node-section {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--ordo-border-light, #2d2d2d);
+}
+
+.ref-section,
+.io-section,
+.exec-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ref-label,
+.exec-label {
+  font-size: 10px;
+  color: var(--ordo-text-tertiary, #888);
+  text-transform: uppercase;
+}
+
+.ref-value {
+  font-family: var(--ordo-font-mono);
+  font-size: 11px;
+  color: var(--ordo-text-primary, #e0e0e0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.io-section {
+  justify-content: space-between;
+}
+
+.exec-section {
+  border-bottom: none;
+}
+
+.exec-row {
+  justify-content: space-between;
+  position: relative;
+}
+
+.pin {
+  width: 14px;
+  height: 14px;
+  border: none;
+  background: transparent;
+}
+
+.pin-input {
+  left: -12px;
+  padding: 5px;
+}
+
+.pin-output {
+  right: -19px;
+}
+</style>
diff --git a/ordo-editor/packages/vue/src/components/flow/nodes/TerminalNode.vue b/ordo-editor/packages/vue/src/components/flow/nodes/TerminalNode.vue
index bbdcbccb..834e5c87 100644
--- a/ordo-editor/packages/vue/src/components/flow/nodes/TerminalNode.vue
+++ b/ordo-editor/packages/vue/src/components/flow/nodes/TerminalNode.vue
@@ -285,9 +285,10 @@ function formatOutputValue(output: OutputField): string {
 /* Input pin positioning (in header) */
 .node-header .pin-input {
   position: absolute;
-  left: -5px;
+  left: -10px;
   top: 50%;
   transform: translateY(-50%);
+  padding: 5px;
 }
 
 /* Data pins in output rows */