Excalidraw MCP

Name: Excalidraw MCP
Author: pinkpixel-dev

by pinkpixel-dev

Create and manipulate diagrams through AI — flowcharts, wireframes, and architecture sketches

design Node.js Beginner Self-hostable No API key

⭐ 200 stars 📅 Updated: 1mo ago

View on GitHub View package

Description

MCP server that enables AI assistants to create and edit Excalidraw diagrams programmatically. Generate flowcharts, architecture diagrams, wireframes, and hand-drawn-style sketches through natural language descriptions. Add, modify, and arrange elements on the canvas, connect shapes with arrows, and export results as PNG, SVG, or native Excalidraw format. Perfect for developers who want to quickly visualize ideas, document system architectures, or create UI wireframes without switching to a separate drawing tool — just describe what you need and the AI builds the diagram for you.

✅ Best for

Developers who want to quickly create diagrams and wireframes from AI assistants without leaving their editor

⏭️ Skip if

You need precise pixel-level design control or complex interactive prototypes

💡 Use cases

Generating architecture diagrams and system flowcharts from descriptions
Creating UI wireframes and mockups through natural language
Building sequence diagrams and process flows for documentation
Exporting diagrams as PNG or SVG for presentations and docs

👍 Pros

✓ No API key required — works locally with zero configuration
✓ Produces Excalidraw's distinctive hand-drawn style diagrams
✓ Multiple export formats (PNG, SVG, Excalidraw native)
✓ Simple npx install for immediate use

👎 Cons

✗ Complex diagrams may need manual refinement in Excalidraw editor
✗ Limited to 2D diagram types — no 3D or advanced charting
✗ Output quality depends on how precisely you describe the diagram

🔧 Exposed tools (5 tools)

Tool	Category	Description
create_diagram	creation	Create a new Excalidraw diagram from a description
create_flowchart	creation	Generate a flowchart from a structured description of steps and connections
add_element	editing	Add shapes, text, arrows, or other elements to the canvas
modify_element	editing	Update properties of existing elements (position, size, color, text)
export_image	export	Export the diagram as PNG, SVG, or Excalidraw format

⚡ Installation

Prerequisites:

• Node.js v18+

Check Claude Code documentation to configure this MCP server.

💡 Tips & tricks

Be specific about layout direction (top-to-bottom, left-to-right) when creating flowcharts. Use create_flowchart for common diagram patterns and create_diagram for free-form layouts.

🔄 Alternatives

drawio-mcp

MCP server — editorial content pending

Similar functionality

DaVinci Resolve MCP

Control DaVinci Resolve video editor through AI — timeline, color grading, and rendering