Technical Documentation
Excalidraw Integration Evaluation — Falcon Flowmira
Excalidraw Integration Evaluation — Falcon Flowmira
Companion PRD to the Master PRD v10. Records the review, decision, and MIT-compliant integration path taken to embed Excalidraw as the secondary whiteboard engine.
Decision Summary
- Verdict: Adopt Excalidraw for the free-form whiteboard mode (
kind='excalidraw'); keep the native React Flow engine for structured diagrams (kind='flow'). - Rationale: Excalidraw is the best-in-class open-source hand-drawn whiteboard; rewriting is wasteful. React Flow remains superior for BPMN/UML/network/agentic flows with typed connectors and layout algorithms.
- License: MIT — compatible with Falcon Flowmira's commercial distribution.
- Attribution: Recorded in
THIRD_PARTY_NOTICES.md; UI credit line rendered inside the whiteboard editor.
Integration Rules
- Lazy-mount only in browser (
ClientOnly+React.lazy), never during SSR. - Persist via Falcon-native
diagramstable withkind='excalidraw'; do not use Excalidraw's built-in server APIs. - Autosave every 1.5s with debounce; explicit checkpoints on user command.
- Library imports (
.excalidrawlib) route through the SVG sanitizer. - No Excalidraw branding hijack — the UI is Falcon Flowmira; Excalidraw is credited, not marketed.
- Exports use Excalidraw's official
exportToSvg/exportToBlobhelpers, then are stamped with Flowmira metadata. - Realtime collaboration on Excalidraw boards flows through the same
use-collab.tsprotocol so cursors/presence match diagrams. - Feature-gating identical to diagrams (Free = 3 boards, Pro / Pro Plus unlimited).
Non-Goals
- Do not fork Excalidraw. Track upstream and pin known-good versions.
- Do not embed Excalidraw+ hosted collaboration.
- Do not migrate structured diagrams into Excalidraw — they belong on the React Flow engine.
Security
- Import pipeline sanitises SVG (
src/lib/security/svg-sanitizer.ts) before any user content lands in the scene. - No external network calls made by Excalidraw runtime; asset loading is blocked at CSP level.
- Any user-provided text is passed through
redactSecretsbefore persistence indiagrams.document. - Realtime channel names are scoped to
diagram:<id>; RLS ondiagram_opsenforces owner + share role.
Metrics
- Load size impact: measured at build time; Excalidraw is code-split behind the whiteboard route.
- Time-to-interactive on first whiteboard open: target < 1500 ms on cold cache.