diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 082ce98086..b7ffbdfbcd 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -7,6 +7,7 @@ import {
 } from '../store'
 import {
   useIsChatMode,
+  useNodesSyncDraft,
   useWorkflowRun,
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
@@ -23,12 +24,14 @@ const RunMode = memo(() => {
   const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
   const { handleStopRun } = useWorkflowRun()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const runningStatus = useStore(s => s.runningStatus)
   const showInputsPanel = useStore(s => s.showInputsPanel)
   const isRunning = runningStatus === WorkflowRunningStatus.Running
 
   const handleClick = () => {
     workflowStore.setState({ showInputsPanel: true })
+    handleSyncWorkflowDraft(true)
   }
 
   return (
@@ -76,9 +79,11 @@ RunMode.displayName = 'RunMode'
 const PreviewMode = memo(() => {
   const { t } = useTranslation()
   const { handleRunSetting } = useWorkflowRun()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const runningStatus = useStore(s => s.runningStatus)
 
   const handleClick = () => {
+    handleSyncWorkflowDraft(true)
     handleRunSetting()
   }
 
diff --git a/web/app/components/workflow/hooks/use-node-data-update.ts b/web/app/components/workflow/hooks/use-node-data-update.ts
index d46fbb4c47..abb0ed099d 100644
--- a/web/app/components/workflow/hooks/use-node-data-update.ts
+++ b/web/app/components/workflow/hooks/use-node-data-update.ts
@@ -34,7 +34,7 @@ export const useNodeDataUpdate = () => {
       return
 
     handleNodeDataUpdate(payload)
-    handleSyncWorkflowDraft(true)
+    handleSyncWorkflowDraft()
   }, [handleSyncWorkflowDraft, handleNodeDataUpdate, workflowStore])
 
   return {
diff --git a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
index d0f051fd5d..32d3f2169d 100644
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -1,11 +1,13 @@
 import { useCallback } from 'react'
 import produce from 'immer'
-import { useDebounceFn } from 'ahooks'
 import {
   useReactFlow,
   useStoreApi,
 } from 'reactflow'
-import { useWorkflowStore } from '../store'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../store'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -15,8 +17,9 @@ export const useNodesSyncDraft = () => {
   const workflowStore = useWorkflowStore()
   const reactFlow = useReactFlow()
   const featuresStore = useFeaturesStore()
+  const debouncedSyncWorkflowDraft = useStore(s => s.debouncedSyncWorkflowDraft)
 
-  const shouldDebouncedSyncWorkflowDraft = useCallback(() => {
+  const doSyncWorkflowDraft = useCallback(() => {
     const {
       getNodes,
       edges,
@@ -67,12 +70,7 @@ export const useNodesSyncDraft = () => {
     }
   }, [store, reactFlow, featuresStore, workflowStore])
 
-  const { run: debouncedSyncWorkflowDraft } = useDebounceFn(shouldDebouncedSyncWorkflowDraft, {
-    wait: 2000,
-    trailing: true,
-  })
-
-  const handleSyncWorkflowDraft = useCallback((shouldDelay?: boolean) => {
+  const handleSyncWorkflowDraft = useCallback((sync?: boolean) => {
     const {
       runningStatus,
       isRestoring,
@@ -81,11 +79,11 @@ export const useNodesSyncDraft = () => {
     if (runningStatus || isRestoring)
       return
 
-    if (shouldDelay)
-      debouncedSyncWorkflowDraft()
+    if (sync)
+      doSyncWorkflowDraft()
     else
-      shouldDebouncedSyncWorkflowDraft()
-  }, [debouncedSyncWorkflowDraft, shouldDebouncedSyncWorkflowDraft, workflowStore])
+      debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
+  }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, workflowStore])
 
   return {
     handleSyncWorkflowDraft,
diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts
index 89a4f44f2d..5cae915f50 100644
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@@ -3,6 +3,7 @@ import {
   create,
   useStore as useZustandStore,
 } from 'zustand'
+import { debounce } from 'lodash-es'
 import type { Viewport } from 'reactflow'
 import type {
   HelpLineHorizontalPosition,
@@ -71,6 +72,7 @@ type Action = {
   setNodesDefaultConfigs: (nodesDefaultConfigs: Record<string, any>) => void
   setNodeAnimation: (nodeAnimation: boolean) => void
   setIsRestoring: (isRestoring: boolean) => void
+  debouncedSyncWorkflowDraft: (fn: () => void) => void
 }
 
 export const createWorkflowStore = () => {
@@ -117,6 +119,9 @@ export const createWorkflowStore = () => {
     setNodeAnimation: nodeAnimation => set(() => ({ nodeAnimation })),
     isRestoring: false,
     setIsRestoring: isRestoring => set(() => ({ isRestoring })),
+    debouncedSyncWorkflowDraft: debounce((syncWorkflowDraft) => {
+      syncWorkflowDraft()
+    }, 5000),
   }))
 }