skills.rest
yctimlin
yctimlinCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw-skill

Control live Excalidraw canvases via MCP tools and REST APIs.

2.3k|245|Updated Mar 16, 2025
Search Tags:#mermaid#mcp#ai agent#excalidraw#diagramming#canvas
One-click install
npx skills add https://github.com/yctimlin/mcp_excalidraw --skill excalidraw-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-skill
Source: https://github.com/yctimlin/mcp_excalidraw/tree/main/skills/excalidraw-skill
Command: npx skills add https://github.com/yctimlin/mcp_excalidraw --skill excalidraw-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill empowers AI agents to 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

  • Live Canvas Control: Draw, modify, and manage diagram elements programmatically.
  • Iterative Refinement: Use visual feedback (screenshots) and scene descriptions for AI-driven adjustments.
  • Format Conversion: Convert Mermaid diagrams directly into Excalidraw visuals.
  • Use Case: An AI agent can take a textual description of a system architecture and generate a detailed, interactive Excalidraw diagram, allowing for real-time collaboration and modification.

Quick Start

Use the excalidraw-skill to draw a diagram with a load balancer, two web servers, and a database, connecting them appropriately.

Frequently Asked Questions about excalidraw-skill

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

FAQPage Schema
How do I use an AI agent to create Excalidraw diagrams programmatically?▼

AI agents can create Excalidraw diagrams programmatically by controlling a live canvas via MCP tools and REST APIs. This enables element-level manipulation to draw, modify, and manage diagram components directly from text descriptions.

Can I convert Mermaid syntax into Excalidraw visuals automatically?▼

Yes, Mermaid diagrams can be converted directly into Excalidraw visuals. The skill supports format conversion from Mermaid syntax, allowing AI agents to translate textual diagram definitions into interactive canvas elements.

How does AI visual feedback work for refining Excalidraw diagrams?▼

AI visual feedback for Excalidraw refinement works by using screenshots and scene descriptions. The AI agent analyzes this visual feedback to make iterative, element-level adjustments and refine the diagram layout.

What's the best way to manage Excalidraw canvas state for complex system architecture diagrams?▼

Managing complex Excalidraw canvas state involves using tools for layout, organization, and state management of diagrammatic elements. This allows AI agents to maintain structured scenes when generating detailed system architecture diagrams.

Do I need MCP tools to control an Excalidraw canvas with an AI agent?▼

MCP tools and REST APIs are required to enable AI agents to programmatically control and interact with a live Excalidraw canvas. These interfaces provide the element-level manipulation needed for diagram creation and editing.

Why use Excalidraw for AI-driven diagramming instead of static code generation?▼

AI-driven Excalidraw diagramming provides a live, interactive canvas for real-time collaboration and modification, bridging abstract concepts and concrete visuals. Unlike static code generation, it supports iterative refinement through visual feedback mechanisms.

Related Skills

Explore More Design & Creative Skills→
pypeadaypypeaday
2

drawio

Create and update architecture diagrams via a draw.io MCP server.

Community
Advanced
OrestesKOrestesK
2

excalidraw-skill

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

Community
Advanced
kv0906kv0906
134

mermaid-visualizer

Transform textual descriptions into Mermaid diagrams with syntax error prevention.

Community
Intermediate
Tommy-ywTommy-yw
539

excalidraw

Create hand-drawn style diagrams in Excalidraw JSON format.

Community
Basic