Excalidraw Architecture Notes

Repository shape (upstream)

• Monorepo, yarn workspaces
• packages/excalidraw — the reusable React component published as @excalidraw/excalidraw
• excalidraw-app/ — the hosted Excalidraw+ web app (Firebase, service worker, analytics — NOT reused by Falcon Flowmira)
• packages/utils, packages/math, packages/common — internal helpers

Component boundaries reused by Falcon Flowmira

1. <Excalidraw /> component (imports @excalidraw/excalidraw/index.css)
2. exportToSvg(...), exportToBlob(...) — export helpers
3. serializeAsJSON(...), restore(...) — scene serialization

Everything else is out of scope. The Falcon integration point is src/components/flowmira/excalidraw-board.tsx, which:

• Lazy-loads the component via React.lazy behind <ClientOnly> (Excalidraw touches window/document at import time).
• Bridges the imperative Excalidraw API (excalidrawAPI callback) to the Falcon autosave, checkpoint, and export flows.
• Debounces scene writes into public.diagrams.document (Supabase) with plan gating enforced server-side.

Persistence model

• Whiteboards persist to public.diagrams with kind = 'excalidraw'.
• Image binaries greater than 200 KB are lifted out of the scene JSON and stored in private Supabase storage; only a signed URL reference is embedded.
• Named checkpoints use the existing public.snapshot_diagram_version RPC.
• Trash and restore reuse the diagrams is_archived flag and trash_items table.

Rendering model

• Client only. No SSR entry imports the Excalidraw module.
• Suspense skeleton renders during dynamic import.
• Theme is passed via the theme prop and mirrored to Falcon's dual theme system (Onyx / Apple × Tesla).