Initial plan

Previously, user modifications made directly in draw.io (moving nodes,
editing text, etc.) were not captured by React state until an explicit
export was triggered.

This adds the autosave feature from react-drawio:
- Enable autosave={true} on DrawIoEmbed component
- Add onAutoSave callback to update chartXML on every change
- Keep React state in sync with draw.io editor state

app/[lang]/page.tsx

@@ -16,8 +16,13 @@ const drawioBaseUrl =
     process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
 
 export default function Home() {
-    const { drawioRef, handleDiagramExport, onDrawioLoad, resetDrawioReady } =
+    const {
-        useDiagram()
+        drawioRef,
+        handleDiagramExport,
+        handleAutoSave,
+        onDrawioLoad,
+        resetDrawioReady,
+    } = useDiagram()
     const router = useRouter()
     const pathname = usePathname()
     // Extract current language from pathname (e.g., "/zh/about" → "zh")
@@ -164,6 +169,8 @@ export default function Home() {
                                         ref={drawioRef}
                                         onExport={handleDiagramExport}
                                         onLoad={handleDrawioLoad}
+                                        onAutoSave={handleAutoSave}
+                                        autosave={true}
                                         baseUrl={drawioBaseUrl}
                                         urlParameters={{
                                             ui: drawioUi,

contexts/diagram-context.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react"
 import { createContext, useContext, useEffect, useRef, useState } from "react"
-import type { DrawIoEmbedRef } from "react-drawio"
+import type { DrawIoEmbedRef, EventAutoSave } from "react-drawio"
 import { toast } from "sonner"
 import type { ExportFormat } from "@/components/save-dialog"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -23,6 +23,7 @@ interface DiagramContextType {
     resolverRef: React.Ref<((value: string) => void) | null>
     drawioRef: React.Ref<DrawIoEmbedRef | null>
     handleDiagramExport: (data: any) => void
+    handleAutoSave: (data: EventAutoSave) => void
     clearDiagram: () => void
     saveDiagramToFile: (
         filename: string,
@@ -226,6 +227,13 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
+    // Handle autosave events from draw.io - keeps chartXML in sync with user modifications
+    const handleAutoSave = (data: EventAutoSave) => {
+        if (data.xml) {
+            setChartXML(data.xml)
+        }
+    }
+
     const clearDiagram = () => {
         const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
         // Skip validation for trusted internal template (loadDiagram also sets chartXML)
@@ -350,6 +358,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 resolverRef,
                 drawioRef,
                 handleDiagramExport,
+                handleAutoSave,
                 clearDiagram,
                 saveDiagramToFile,
                 getThumbnailSvg,