$ show excalidraw/excalidraw-mcp
This repository implements an MCP (Model Context Protocol) server that renders Excalidraw diagrams with hand-drawn style animations. It provides two primary tools: `read_me` (returns a cheat sheet with element format and color palettes) and `create_view` (renders diagrams from Excalidraw JSON elements with streaming draw-on animations). The architecture is a Node.js server supporting both Streamable HTTP and stdio transports, with a React-based widget that uses Excalidraw's `exportToSvg` for SVG rendering (not the full canvas component). Key features include: progressive element streaming with morphdom DOM diffing, smooth viewport camera animation, interactive fullscreen editing with checkpoint/restore persistence (file, memory, or Redis backends), pencil stroke audio feedback, and one-click export to excalidraw.com. The server is deployable on Vercel via serverless functions. The codebase demonstrates strong engineering practices with clean abstractions, well-documented design decisions, and a focus on performance (no blink on final render, efficient SVG diffing).
The LLM identified 3 files worth highlighting for reuse:
Implements a checkpoint store interface with three backends: FileCheckpointStore (local filesystem with pruning), MemoryCheckpointStore (in-memory Map with eviction), and RedisCheckpointStore (Upstash Redis with TTL). Includes input validation (checkpoint ID sanitization, size limits) and a factory function `createVercelStore()` that selects the appropriate backend based on environment variables. This is a clean, self-contained abstraction that could be extracted and reused in any project requiring persistent state with multiple storage options.
Manages user edits in fullscreen mode with debounced persistence to localStorage and server-side checkpoints. Computes a compact diff (added, removed, moved elements) and sends it to the model context for feedback. Uses a debounce timer (2s) to batch updates and avoids infinite re-render loops by not calling setState. Demonstrates a robust pattern for synchronizing user edits between a widget and a server in a streaming context.
Provides a pencil stroke audio engine that plays randomized variations of a pencil-on-paper sample when elements appear during streaming. Each stroke varies in pitch, gain, duration, and sample offset so no two elements sound identical. Includes initialization with base64-decoded audio buffers, per-element-type gain normalization, and cleanup of audio nodes. This is a self-contained module that could be reused in any drawing or creative application requiring audio feedback.