skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

excalidraw-mcp-server

Build MCP servers that stream interactive Excalidraw diagrams into AI chat interfaces.

7|2|Updated May 16, 2026
Search Tags:#typescript#streaming#model context protocol#excalidraw#visualization#MCP server#diagram generation
One-click install
npx skills add https://github.com/reason-machines/mcp-skills --skill excalidraw-mcp-server-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-mcp-server
Source: https://github.com/reason-machines/mcp-skills/tree/main/skills/excalidraw-mcp-server
Command: npx skills add https://github.com/reason-machines/mcp-skills --skill excalidraw-mcp-server-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/sdk, react, react-dom, @excalidraw/excalidraw.

What problem does it solve? AI chat interfaces normally return plain text, making it hard to present visual architecture diagrams, flowcharts, or whiteboard-style sketches. This Skill teaches agents how to build MCP servers that return interactive Excalidraw diagrams using the MCP Apps extension. ## Core Features & Use Cases - Interactive Diagram Rendering: Return HTML resources that render Excalidraw canvases directly in Claude Desktop, ChatGPT, VS Code, and Goose. - Streaming Updates: Progressively build diagrams by sending multiple tool responses that share the same resource URI, with viewport control over scroll position and zoom. - Flexible Deployment: Run as a Vercel serverless function, a Docker container, or a local Node.js process over stdio. - Use Case: Build an MCP tool that takes a list of system components and generates a hand-drawn architecture diagram with rectangles, labels, and bound arrows that users can open fullscreen and edit. ## Quick Start Ask the agent to create an Excalidraw diagram in your MCP server showing a simple client-server-database architecture.

Frequently Asked Questions about excalidraw-mcp-server

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Excalidraw diagram in an MCP server?▼

Define a tool that accepts Excalidraw elements, wrap them in a scene object with type, version, elements, and appState, then return an HTML resource embedding the Excalidraw React component. The MCP Apps extension renders this HTML directly in the chat interface.

How to stream progressive diagram updates over MCP?▼

Send multiple tool responses that all use the same resource URI, such as excalidraw://stream-1. Each response contains the full updated element list, and clients replace the previous diagram with the new HTML content.

Can I deploy an Excalidraw MCP server on Vercel?▼

Yes, create an api/mcp.ts serverless function using the MCP SDK with SSEServerTransport and deploy with vercel --prod. Add CORS headers in vercel.json so clients can connect to the endpoint.

Why are my Excalidraw elements not rendering?▼

Blank diagrams usually mean required element properties are missing. Every element needs id, type, x, y, width, height, seed, version, versionNonce, isDeleted, and groupIds to render correctly.

Why don't arrows connect to shapes in Excalidraw?▼

Arrow bindings fail when startBinding or endBinding reference nonexistent element IDs. Each binding must specify a valid elementId, a focus value between -1 and 1, and a gap distance from the shape edge.

Does Excalidraw MCP work with Claude Desktop?▼

Yes, configure it in claude_desktop_config.json either as a remote URL pointing to the hosted server or as a local node command running the built dist/index.js with the --stdio flag.

Related Skills

Explore More Software Engineering Skills→
davila7davila7
30.5k

mermaid-diagram-specialist

Generates Mermaid diagrams including flowcharts, sequence diagrams, ERDs, and C4 architecture visualizations.

Community
Intermediate
y0nchay0ncha
1

excalidraw-diagrams

Generate editable Excalidraw diagram files with programmatic layout and styling.

Community
Intermediate
fanguyunfanguyun

architecture-diagram

Generate HTML+SVG files for technical architecture diagrams.

Community
Intermediate
k0d3x8itsk0d3x8its
3

diagram

Generate SVG, PNG, or PDF diagrams from text descriptions using Mermaid and PlantUML.

Community
Intermediate