diff --git a/web/app/components/base/features/hooks.ts b/web/app/components/base/features/hooks.ts
index 755337081f..933685b0d7 100644
--- a/web/app/components/base/features/hooks.ts
+++ b/web/app/components/base/features/hooks.ts
@@ -10,3 +10,7 @@ export function useFeatures<T>(selector: (state: FeatureStoreState) => T): T {
 
   return useStore(store, selector)
 }
+
+export function useFeaturesStore() {
+  return useContext(FeaturesContext)
+}
diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index 5dc79ff82d..b731487453 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -23,6 +23,8 @@ import type {
 import { NODES_INITIAL_DATA } from './constants'
 import { getLayoutByDagre } from './utils'
 import { useStore } from './store'
+import { syncWorkflowDraft } from '@/service/workflow'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
 
 export const useNodesInitialData = () => {
   const { t } = useTranslation()
@@ -38,6 +40,25 @@ export const useWorkflow = () => {
   const store = useStoreApi()
   const reactFlow = useReactFlow()
   const nodesInitialData = useNodesInitialData()
+  const featuresStore = useFeaturesStore()
+
+  const handleSyncWorkflowDraft = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+    } = store.getState()
+
+    syncWorkflowDraft({
+      url: `/apps/${''}/workflows/draft`,
+      params: {
+        graph: {
+          nodes: getNodes(),
+          edges,
+        },
+        features: {},
+      },
+    })
+  }, [store])
 
   const handleLayout = useCallback(async () => {
     const {