mcp_excalidraw

🥈Silver

Automate diagram creation and collaboration with Excalidraw. Operations teams use this skill to generate, edit, and share diagrams directly from their workflows. Connects to Excalidraw instances and integrates with document management systems.

1,773720Updated 2w ago

Intermediate30min to implementautomation

Saves ~20 min per use

Quick InstallView Source

git clone https://github.com/yctimlin/mcp_excalidraw.git

Works with:

Claude

Overview

About This Skill

https://github.com/yctimlin/mcp_excalidraw

How to Use

[{"step":"Define the diagram scope. Specify the topic, key elements, and style guidelines (e.g., color scheme, layout) in your prompt. For example, 'Generate a flowchart for our incident response process with color-coded severity levels and decision diamonds for escalation paths.'","tip":"Use bullet points in your prompt to clarify complex requirements, such as 'Include swimlanes for teams (DevOps, Security, Support) and label each step with estimated time.'"},{"step":"Provide context or data to include. Share specific details like processes, systems, or metrics. For instance, 'Add a section for our monitoring tools (Prometheus, Grafana) and include a KPI box with MTTR (Mean Time to Resolution) data.'","tip":"If updating an existing diagram, reference the Excalidraw JSON or share the link to the original diagram for context."},{"step":"Specify output requirements. Decide whether you need a PNG export, a shareable link, or both. For example, 'Export as PNG with 1920x1080 resolution and provide a link with edit permissions for the ops team.'","tip":"Use tools like Excalidraw’s API or browser extensions to automate exports if you’re generating diagrams at scale."},{"step":"Review and iterate. Check the generated diagram for accuracy and clarity. If edits are needed, provide specific feedback like 'Move the 'Database Backup' step to the left of 'Incident Triage' and change the arrow color to red.'","tip":"For collaborative workflows, use Excalidraw’s version history to track changes or revert to previous versions."},{"step":"Integrate with your workflow. Use the diagram in your document management system (e.g., Notion, Confluence) or share it with stakeholders. For example, 'Embed the PNG in our incident response playbook and link to the Excalidraw file for future edits.'","tip":"Automate the process by setting up a CI/CD pipeline to generate diagrams from code comments or configuration files (e.g., using Excalidraw’s CLI tools)."}]

Use Cases

Automate the creation of flowcharts and diagrams based on user input.

Integrate AI agents to dynamically update diagrams during meetings.

Enable collaborative brainstorming sessions where multiple agents contribute to a single canvas.

Use the MCP server to sync diagram changes across different platforms in real-time.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/yctimlin/mcp_excalidraw

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a diagram in Excalidraw for [TOPIC/PROCESS]. Include [KEY_ELEMENTS] and use [STYLE_GUIDELINES] (e.g., color scheme, layout). Export the diagram as a PNG and provide a shareable link. If editing an existing diagram, update [SPECIFIC_ELEMENTS] based on [NEW_DATA].

Example Output

Here’s the Excalidraw diagram for the **customer onboarding workflow** for our SaaS product, *NexusFlow*. The diagram includes:

1. **Stages**: Signup → Email Verification → Payment → Account Setup → First Login → Tutorial Completion.
2. **Key Elements**: Decision nodes (e.g., "Payment Failed?"), external integrations (e.g., Stripe, Slack), and timelines (e.g., "24-hour grace period for verification").
3. **Style**: Clean, modern look with a blue-to-teal gradient background, rounded corners for containers, and bold labels for stages. Arrows are labeled with actions (e.g., "Send welcome email").

**Visual Details**:
- The diagram is organized in a left-to-right flow, with the signup stage on the far left and tutorial completion on the far right.
- Each stage is color-coded: blue for user actions, green for system processes, and orange for decision points.
- The diagram includes a legend in the bottom-right corner explaining the color scheme and symbols.

**Excalidraw Link**: [https://excalidraw.com/#json=1234567890abcdef](https://excalidraw.com/#json=1234567890abcdef)

**PNG Export**: Attached as `nexusflow_onboarding.png`.

**Collaboration Notes**: The diagram is set to "Anyone with the link can view" for easy sharing with the product team. If you’d like to edit it, I can update the payment integration section based on the new Stripe API changes we discussed yesterday.