import { Excalidraw } from "@excalidraw/excalidraw"; import { useState, useCallback } from "react"; export function AgentBoard() { const [api, setApi] = useState<any>(null); const handleChange = useCallback( (els, state) => { // debounce 500ms → persistir debounce(() => saveScene(els, state), 500) }, [] ); return ( <div style={{ height: "100vh" }}> <Excalidraw ref={(a) => setApi(a)} onChange={handleChange} initialData={initialScene} UIOptions={{ canvasActions: { export: { saveFileToDisk: true } }}} /> </div> ); }

const services: ServiceNode[] = [ { name: "Claude API", type: "llm", x: 320, y: 50 }, { name: "Orchestrator", type: "api", x: 320, y: 180 }, { name: "Tool: CRM", type: "database", x: 80, y: 310 }, { name: "Tool: Web", type: "api", x: 320, y: 310 }, { name: "Tool: Content",type: "queue", x: 560, y: 310 }, { name: "Redis Cache", type: "cache", x: 80, y: 440 }, { name: "Huly CRM", type: "database", x: 320, y: 440 }, ]; generateArchitectureDiagram( services, connections );

const blob = await exportToBlob({ elements, appState: { exportWithDarkMode: false }, getDimensions: () => ({ width: 1920, height: 1080, scale: 2 // retina }), }); // SVG para docs const svg = await exportToSvg({ elements });