| name | excalidraw-mcp-connector |
| description | MCP connector for Excalidraw virtual whiteboard – enables AI-powered diagram generation, sketch creation, and collaborative drawing through Claude |
| license | MIT |
| tags | ["creative","whiteboard","mcp","excalidraw","diagrams"] |
| difficulty | beginner |
| time_to_master | 4-8 weeks |
| version | 1.0.0 |
Excalidraw MCP Connector
Overview
This skill enables Claude to interact with Excalidraw through the Model Context Protocol (MCP). It provides a bridge between Claude's AI capabilities and Excalidraw's JSON File Format, allowing natural language control of Excalidraw operations, intelligent automation, and AI-powered assistance for Excalidraw workflows.
When to Use This Skill
- Architecture diagram generation from descriptions
- Flowchart and sequence diagram creation
- Wireframe and mockup generation
- Collaborative whiteboard session management
- Export to PNG/SVG with custom styling
Architecture
┌─────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ Claude │────▶│ MCP Server │────▶│ Excalidraw │
│ (Client) │◀────│ (TypeScript) │◀────│ (JSON File Form)│
└─────────────┘ └─────────────────┘ └──────────────────┘
Core Concepts
MCP Server Setup
The connector implements an MCP server that exposes Excalidraw operations as tools Claude can invoke. The server translates natural language intentions into JSON File Format calls.
Key Endpoints/Interfaces
excalidraw-json elements, appState, files, collaborators
Implementation
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const server = new McpServer({
name: "excalidraw-mcp-connector",
version: "1.0.0",
});
server.tool(
"list_resources",
"List and query Excalidraw resources with optional filters",
{
query: z.string().optional().describe("Search query or filter"),
limit: z.number().optional().describe("Max results to return"),
},
async ({ query, limit }) => {
const response = await fetch(`${BASE_URL}excalidraw-json elements`, {
headers: { "Authorization": `Bearer ${API_KEY}` },
});
const data = await response.json();
{
: [{ : , : .(data, , ) }],
};
}
);
server.(
,
,
{
: z.().(),
: z.({}).().().(),
},
({ name, config }) => {
response = (, {
: ,
: {
: ,
: ,
},
: .({ name, ...config }),
});
data = response.();
{
: [{ : , : }],
};
}
);
server.(
,
,
{
: z.().(),
: z.().().(),
},
({ , timeframe }) => {
response = (, {
: { : },
});
data = response.();
{
: [{ : , : .(data, , ) }],
};
}
);
transport = ();
server.(transport);
Claude Desktop Configuration
{
"mcpServers": {
"excalidraw-mcp-connector": {
"command": "node",
"args": ["path/to/excalidraw-mcp-connector/index.js"],
"env": {
"EXCALIDRAW_API_KEY": "your-api-key",
"EXCALIDRAW_BASE_URL": "https://your-instance-url"
}
}
}
}
Best Practices
- Authentication: Store API keys securely using environment variables; never hardcode credentials
- Rate Limiting: Implement request throttling to respect Excalidraw API rate limits
- Error Handling: Provide clear, actionable error messages for common failure scenarios
- Pagination: Handle paginated responses for large datasets efficiently
- Caching: Cache frequently accessed read-only data to reduce API calls
- Security: Validate all inputs before passing to the Excalidraw API; sanitize outputs
- Logging: Log all API interactions for debugging and audit purposes
Example Prompts
"Generate a system architecture diagram showing microservices, message queues, and databases"
Security Considerations
- All API credentials must be stored as environment variables
- Implement input validation and sanitization for all tool parameters
- Use HTTPS for all API communications
- Follow the principle of least privilege for API token permissions
- Audit log all write operations for compliance tracking
Resources
Changelog
| Version | Date | Changes |
|---|
| 1.0.0 | 2026-04-01 | Initial MCP connector skill |
Part of SkillGalaxy - 10,000+ comprehensive skills for AI-assisted development.
