diff --git a/frontend/src/components/network/DiagramHeader.tsx b/frontend/src/components/network/DiagramHeader.tsx
index ab3d83f8..f4f3b397 100644
--- a/frontend/src/components/network/DiagramHeader.tsx
+++ b/frontend/src/components/network/DiagramHeader.tsx
@@ -1,6 +1,6 @@
import { useState, useCallback, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
-import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2 } from 'lucide-react'
+import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2, Upload } from 'lucide-react'
import { cn } from '@/lib/utils'
export type InteractionMode = 'select' | 'pan'
@@ -19,6 +19,7 @@ interface DiagramHeaderProps {
onExportPdf: () => void
onExportJson: () => void
onExportDrawio: () => void
+ onImportDrawio: () => void
onUndo: () => void
onRedo: () => void
canUndo: boolean
@@ -41,6 +42,7 @@ export function DiagramHeader({
onExportPdf,
onExportJson,
onExportDrawio,
+ onImportDrawio,
onUndo,
onRedo,
canUndo,
@@ -199,6 +201,14 @@ export function DiagramHeader({
{isSaving ? 'Saving...' : 'Save'}
+
+
)}
+
)
}
diff --git a/frontend/src/pages/NetworkDiagrams/index.tsx b/frontend/src/pages/NetworkDiagrams/index.tsx
index c62483f6..4ef87e27 100644
--- a/frontend/src/pages/NetworkDiagrams/index.tsx
+++ b/frontend/src/pages/NetworkDiagrams/index.tsx
@@ -40,6 +40,7 @@ export default function NetworkDiagramsPage() {
const [menuOpenId, setMenuOpenId] = useState(null)
const [confirmArchiveId, setConfirmArchiveId] = useState(null)
const clientDropdownRef = useRef(null)
+ const drawioListImportRef = useRef(null)
useEffect(() => {
if (!clientDropdownOpen) return
@@ -129,6 +130,35 @@ export default function NetworkDiagramsPage() {
input.click()
}, [navigate])
+ const handleListDrawioImport = useCallback(async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0]
+ if (!file) return
+ e.target.value = ''
+ try {
+ const { parseDrawioXml } = await import('@/lib/drawio-import')
+ const text = await file.text()
+ const { nodes: importedNodes, edges: importedEdges, warnings } = parseDrawioXml(text)
+ const result = await networkDiagramsApi.importJson({
+ schemaVersion: 1,
+ name: file.name.replace(/\.drawio$/i, '') || 'Imported Diagram',
+ client_name: null,
+ description: null,
+ nodes: importedNodes,
+ edges: importedEdges,
+ })
+ const allWarnings = [...warnings, ...result.warnings]
+ if (allWarnings.length > 0) {
+ toast.warning(`Imported with ${allWarnings.length} warning(s)`)
+ } else {
+ toast.success('Imported successfully')
+ }
+ navigate(`/network-diagrams/${result.diagram.id}`)
+ } catch (err) {
+ const msg = err instanceof Error ? err.message : 'Unknown error'
+ toast.error(`Import failed: ${msg}`)
+ }
+ }, [navigate])
+
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}
@@ -148,6 +178,20 @@ export default function NetworkDiagramsPage() {
Import
+
+