Andrew NguyenAndrew Nguyen

A production-ready whiteboard solution that enhances the standard Excalidraw experience with robust cloud storage via Google Drive, real-time collaboration, and an AI Copilot that generates diagrams from natural language.

Overview

This project bridges the gap between ephemeral local-first whiteboards and persistent cloud storage. By leveraging the Google Drive API and Liveblocks, it transforms Excalidraw into a fully managed, real-time collaborative document editor. A Gemini-powered AI Copilot layer adds the ability to generate professional diagrams from plain text descriptions, previewed and refined interactively before insertion.

Key Features

✨ AI Copilot — Text to Diagram

• Chat-based Interface: A modal dialog with a conversational chat panel on the left and a live Excalidraw preview on the right. Users describe a diagram in plain language; the AI responds with Mermaid code and renders it instantly.
• Iterative Refinement: Follow-up messages modify the existing diagram. The AI receives the current Mermaid code as context and returns an updated version — enabling multi-turn diagramming conversations.
• Mermaid as Intermediate Format: The AI (Gemini) generates Mermaid code, which is converted to Excalidraw elements via @excalidraw/mermaid-to-excalidraw and normalized to prevent runtime crashes.
• Live Excalidraw Preview: The generated diagram is embedded directly in view mode inside the modal, giving a pixel-perfect preview of what will be inserted.
• "View as Mermaid" Toggle: Users can switch between the rendered diagram and the raw Mermaid code for inspection or copying.
• Smart Canvas Insertion: Elements are automatically positioned below existing canvas content (with bounding-box offset calculation) to avoid overlaps.
• Frame Targeting: Typing # in the prompt shows available Excalidraw frames as suggestions, allowing the AI to size diagrams to fit a specific frame.
• Daily Rate Limiting: Usage is capped at 3 AI generations per day (tracked in localStorage), displayed as a counter below the chat input.

☁️ Deep Google Drive Integration

• File System Browser: Custom-built UI to navigate, create, and organize Excalidraw files directly within Google Drive folders.
• Smart Auto-Save: Optimized debounced auto-saving (5s delay) that detects content changes via sceneVersion comparison to minimize API usage.
• Real-time Synchronization: Seamless loading and saving of .excalidraw files with conflict resolution strategies.

🤝 Real-time Collaboration

• Live Multiplayer: Integrated Liveblocks for real-time collaboration with multiple cursors, presence indicators, and synchronized elements.
• Secure Sharing & Expiration: Time-expiring encrypted share links giving temporary access without Drive folder permissions.
• "Save a Copy" Workflow: External collaborators can snapshot the current canvas into their own Google Drive account.

🔒 Enterprise-Grade Security

• Server-Side Token Management: OAuth Access Tokens kept entirely server-side to prevent XSS token leakage.
• Proxy Library Mechanism: Secure proxy for third-party libraries with strict upstream domain validation against SSRF attacks.

🎨 Enhanced User Experience

• Mobile-Optimized Layout: Collapsible sidebar, touch-friendly toolbars, and dynamic state management for small screens.
• Compact Version History: Redesigned version history panel with a single-row layout for quick navigation through drawing revisions.
• Custom Notes Panel: Integrated Markdown editor panel alongside the canvas for annotating drawings with rich-text notes.
• Library Management: Upload, parse, and persist custom .excalidrawlib libraries across sessions.

Technical Challenges & Solutions

🤖 Mermaid → Excalidraw Normalization

Converting Mermaid diagrams to stable Excalidraw elements required two normalization passes: convertToExcalidrawElements to fill missing properties, and a custom linear-element normalizer ensuring arrow points[0] is always [0,0] — preventing the "Linear element is not normalized" runtime crash.

🚀 Build Optimization & SSR

Resolved complex hydration mismatches integrating client-side heavy libraries (Excalidraw, Mermaid.js) with Next.js App Router's server-first architecture using next/dynamic with ssr: false.

⚡ Performance Tuning

Intelligent caching for library files and minimized Drive API calls through aggressive debouncing and sceneVersion comparisons.

Technologies Used

Frontend: Next.js 14 (App Router), React, TailwindCSS

AI: Google Gemini API (gemini-2.5-flash-lite), Mermaid.js, @excalidraw/mermaid-to-excalidraw

Core Lib: @excalidraw/excalidraw

Backend: Next.js API Routes, Googleapis (Drive v3), Liveblocks

Auth: NextAuth.js (Google Provider)

Security: Server-Side JWT handling, SSRF Protection