Excalidraw MCP
Create hand-drawn style diagrams in Excalidraw with viewport camera control and fullscreen editing.
Verdict
Common use cases
- Sketch user flows during product planning
- Visualize system architecture in technical specs
- Generate wireframes for design reviews
- Create flowcharts for process documentation
- Illustrate concepts in client proposals
Integration
- Vendor
- Excalidraw MCP
- Category
- developer-tools
- Auth
- NONE
- Composio slug
excalidraw_mcp
Tools
Setup
Setup guide
- 11. Open your Switchy workspace and navigate to Settings > Integrations. 2. Find Excalidraw MCP in the developer tools section and click Connect. 3. No authentication required — the integration activates immediately. 4. Open any Project where you want diagram support. 5. Type a message that @mentions Excalidraw and describes the diagram you need, like '@Excalidraw draw a three-tier architecture with load balancer, app servers, and database'. 6. The AI will generate the diagram and return it as an image or file attachment. 7. To confirm it works, ask for a simple flowchart with three steps and verify the output appears in your chat thread.
What teammates see: by default, memories from Excalidraw MCP are scoped to the Project (PROJECT visibility) - you can mark any memory PRIVATE or share it ORG-wide.
Works well with
Top models
Compatibility data appears once enough Projects have used this MCP together with a given model.
How Switchy teams use it
Starter prompts
User Onboarding Flow
@Excalidraw create a user onboarding flow with five steps: landing page, signup form, email verification, profile setup, and dashboard. Use arrows to show progression and include decision points for existing users.
Microservices Architecture
@Excalidraw draw a microservices architecture with an API gateway, three backend services (auth, payments, notifications), a message queue, and two databases. Show HTTP and async connections between components.
Meeting Room Layout
@Excalidraw design a meeting room layout for 12 people with a conference table, projector screen on the north wall, and a breakout area with sofas in the corner.
Decision Tree Diagram
@Excalidraw create a decision tree for customer support: start with 'issue type', branch into billing, technical, or account questions, then show resolution paths for each with yes/no nodes.
Mobile App Wireframe
@Excalidraw sketch a mobile app home screen wireframe with a top navigation bar, search field, three featured cards in a grid, and a bottom tab bar with five icons.
Example outputs
Illustrative - representative of the model's voice and quality, not literal recordings.
@Excalidraw create a system architecture diagram showing a React frontend, Node.js API, PostgreSQL database, and Redis cache with arrows indicating data flow
Created a new Excalidraw diagram with four labeled boxes arranged horizontally: 'React Frontend' on the left, 'Node.js API' in the center-left, 'PostgreSQL' in the center-right, and 'Redis Cache' on the right. Directional arrows connect the frontend to the API (bidirectional), the API to PostgreSQL (bidirectional), and the API to Redis (bidirectional). Each component is color-coded and positioned with standard spacing. The diagram is saved and a shareable link is provided.
This example shows the MCP's ability to translate architectural descriptions into visual diagrams. The AI interprets component relationships and generates appropriate shapes, labels, and connectors. Useful for quick wireframing during design discussions, though you'll likely want to refine positioning and styling manually afterward.
@Excalidraw add a flowchart to the current diagram showing our user authentication flow: login form → validate credentials → check 2FA → generate JWT → redirect to dashboard, with a failure path back to login
Added a flowchart to the existing diagram below the architecture components. The flow includes six rounded rectangles for each step, connected by arrows. A decision diamond labeled 'Valid credentials?' branches to either the 2FA check or a red arrow looping back to 'Login Form'. Another diamond at '2FA passed?' follows the same pattern. Success paths are green, failure paths are red. All elements use consistent spacing and alignment.
Demonstrates the MCP's ability to modify existing diagrams and represent conditional logic visually. The AI understands flowchart conventions (diamonds for decisions, color coding for outcomes). Be aware that complex nested conditions may require manual adjustment to avoid overlapping elements or unclear branching.
@Excalidraw review the database schema diagram I shared and suggest improvements for clarity, then generate an updated version with better grouping and labels
Analyzed the provided schema diagram and identified three improvement opportunities: (1) related tables are scattered across the canvas, (2) foreign key relationships lack clear visual hierarchy, (3) some table names are truncated. Generated an updated diagram that groups tables by domain (User Management, Orders, Inventory) using subtle background rectangles, repositions foreign key arrows to minimize crossings, and expands all labels for readability. Primary keys are now highlighted in bold.
This example highlights the MCP's ability to analyze existing diagrams and apply design principles. The AI can identify visual clutter and suggest structural improvements. However, the quality of suggestions depends on how well the original diagram's intent is communicated — ambiguous layouts may result in unexpected reorganization.
Use-case deep-dives
When whiteboarding beats slides for distributed design reviews
A 6-person engineering team runs weekly architecture reviews across three time zones. The Excalidraw MCP lets the AI draft system diagrams directly in the shared canvas while the team discusses trade-offs in Slack or Zoom. One engineer describes the proposed service split, the AI sketches the boxes and arrows in real time, and the group edits live. This works when the diagram is the artifact—not a slide deck summarizing decisions made elsewhere. If your reviews produce more than three diagrams per session, manual drawing still wins on speed. If you need version-controlled diagrams that live in Git, export to SVG and commit. Use this MCP when the diagram is the conversation, not the deliverable.
Generating code-flow diagrams for internal wikis
A 3-person startup onboards its first junior engineer and realizes the codebase has zero visual documentation. The Excalidraw MCP generates flow diagrams from natural-language descriptions of how requests move through the API. The founder describes the auth flow in a Switchy thread, the AI produces an Excalidraw JSON, and the team embeds it in Notion. This scenario works when you need 5-10 diagrams to cover core paths and the team won't maintain them by hand. If your flows change weekly, the diagrams go stale fast. If you need interactive docs with clickable nodes, a dedicated tool like Mermaid or Lucidchart is better. Use this MCP when you need decent diagrams now and can refresh them quarterly.
When support teams need to sketch user flows on the fly
A 4-person support team handles tickets where users describe confusing UI flows. The Excalidraw MCP lets the AI turn a ticket description into a quick wireframe showing what the user saw versus what they expected. The support rep pastes the user's message into Switchy, the AI generates a before-and-after sketch, and the rep attaches it to the ticket for the product team. This works when the sketch clarifies the issue faster than a paragraph. If your tickets already include screenshots, the MCP adds little. If you need pixel-perfect mockups, Figma is the right tool. Use this MCP when a rough visual closes the communication gap and you handle fewer than 20 visual tickets per week.
Frequently asked
What does the Excalidraw MCP do in Switchy?
It lets your AI agents create and manipulate Excalidraw diagrams directly in conversations. Your team can ask an agent to sketch system architectures, flowcharts, or wireframes, and the MCP generates the diagram files. This is faster than describing what you want in Slack and waiting for someone to draw it manually.
Do I need to authenticate or connect an Excalidraw account?
No. This MCP requires no authentication because it generates Excalidraw files locally without calling external APIs. You don't need an Excalidraw account or any credentials. The agent creates the diagram data structure, and you open it in Excalidraw's web app or desktop client afterward.
Can it edit existing Excalidraw diagrams or only create new ones?
That depends on the specific tools the MCP exposes, which aren't documented yet. Most diagram-generation MCPs start with creation only. If you need to update an existing diagram, you'd typically export the current file, describe your changes to the agent, and have it generate a revised version.
Why use this instead of just drawing in Excalidraw myself?
Speed and iteration. If you're prototyping five architecture options or need a quick flowchart during a meeting, asking an agent is faster than dragging boxes around. You still refine the output in Excalidraw afterward, but the MCP handles the tedious first draft. It's not a replacement for detailed design work.
Does using this MCP count against my Switchy plan limits?
Yes. Every message that invokes the Excalidraw MCP consumes tokens from your plan's usage quota, just like any other AI interaction. The MCP itself has no separate billing, but complex diagrams require more tokens to generate. Monitor your usage in the Switchy dashboard if your team creates diagrams frequently.