skills.rest
cloudbackenddev
cloudbackenddevCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw-skill

Create and manipulate diagram elements on a live Excalidraw canvas via MCP.

1|Updated Mar 8, 2026
Search Tags:#mermaid#mcp#excalidraw#diagramming#visualization#ai art
One-click install
npx skills add https://github.com/cloudbackenddev/mcp_excalidraw --skill excalidraw-skill-cloudbackenddev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-skill
Source: https://github.com/cloudbackenddev/mcp_excalidraw/tree/main/skills/excalidraw-skill
Command: npx skills add https://github.com/cloudbackenddev/mcp_excalidraw --skill excalidraw-skill-cloudbackenddev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables AI agents to programmatically create, edit, and refine visual diagrams on a live Excalidraw canvas, bridging the gap between abstract concepts and concrete visual representations.

Core Features & Use Cases

  • Programmatic Diagramming: Create and manipulate diagram elements (shapes, text, arrows) using AI-driven instructions.
  • Iterative Refinement: Agents can "see" their work via screenshots and descriptions, allowing for precise adjustments and complex diagram construction.
  • Format Conversion: Convert diagrams from formats like Mermaid into Excalidraw.
  • Use Case: An AI agent can generate a detailed architecture diagram from a textual description, iteratively refining it based on visual feedback until it perfectly matches the requirements.

Quick Start

Use the excalidraw-skill to draw a rectangle with the text "Hello, Excalidraw!" at coordinates (100, 100).

Frequently Asked Questions about excalidraw-skill

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

FAQPage Schema
How do I use AI to create and manipulate Excalidraw diagrams programmatically?▼

To create Excalidraw diagrams programmatically, you can use an AI agent to perform element-level CRUD operations on shapes, text, and arrows via a Model Context Protocol (MCP) interface connected to a live canvas.

Can I convert Mermaid syntax into a live Excalidraw canvas?▼

Yes, you can convert Mermaid syntax into a live Excalidraw canvas. The conversion translates Mermaid diagram definitions into native Excalidraw elements for direct visual manipulation and iterative refinement.

How does an AI agent refine visual diagrams on a live canvas?▼

An AI agent refines visual diagrams on a live canvas by taking screenshots and reading scene descriptions to understand the current layout. This visual feedback allows the agent to make precise adjustments to elements.

Do I need a running Excalidraw server to use AI-powered diagramming features?▼

Yes, you need a running Excalidraw canvas server accessible via an EXPRESS_SERVER_URL. This live server connection is required for the AI agent to interact with and manipulate the canvas elements in real-time.

What is the best way to build complex architecture diagrams from text descriptions?▼

The best way to build complex architecture diagrams from text is using an AI agent that iteratively generates and refines shapes. The agent uses visual feedback from screenshots to adjust the layout until it matches your requirements.

Are there limitations when using MCP for element-level diagram adjustments?▼

Using MCP for diagram adjustments requires a continuously running live canvas server instance to function. Without this active connection, the AI agent cannot perform element-level CRUD operations or capture scene awareness.

Related Skills

Explore More Design & Creative Skills→
lifeodysseylifeodyssey
1

excalidraw-skill

Create and edit Excalidraw diagrams on a live canvas via MCP tools.

Community
Advanced
OrestesKOrestesK
2

excalidraw-skill

Create and validate editable Excalidraw diagrams from Mermaid flowcharts and references.

Community
Advanced
stromy-orgstromy-org

format-mermaid

Convert Markdown text into Mermaid syntax diagrams.

Official
Intermediate
coolguy1771coolguy1771

architecture-diagrams

Generate system architecture diagrams using Mermaid and PlantUML code.

Community
Intermediate