skills.rest
lifeodyssey
lifeodysseyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

excalidraw-skill

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

1|Updated Mar 12, 2026
Search Tags:#automation#mcp#excalidraw#canvas#screenshot#diagram#describe_scene
One-click install
npx skills add https://github.com/lifeodyssey/opencode-team-config --skill excalidraw-skill-lifeodyssey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-skill
Source: https://github.com/lifeodyssey/opencode-team-config/tree/main/skills/excalidraw-skill
Command: npx skills add https://github.com/lifeodyssey/opencode-team-config --skill excalidraw-skill-lifeodyssey

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Programmatic diagram creation and editing on a live Excalidraw canvas via MCP tools enables agents to visualize, plan, and refine diagrams without manual drawing, improving speed and consistency.

Core Features & Use Cases

  • Live canvas synchronization with describe_scene and get_canvas_screenshot for iterative refinement.
  • Export/import of .excalidraw files and PNG/SVG images, plus canvas snapshots and Mermaid-to-Excalidraw conversion.
  • Element-level CRUD, alignment, distribution, grouping, duplication, and locking to maintain precise diagram layouts.
  • Supports MCP tools for automated diagram tasks and REST API fallback for broader interoperability.

Quick Start

Start the Excalidraw canvas server and connect your agent to draw a diagram, then iteratively refine it using describe_scene and capture screenshots.

Frequently Asked Questions about excalidraw-skill

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

FAQPage Schema
How do I automate diagram creation on a live Excalidraw canvas?▼

You can automate diagram creation on a live Excalidraw canvas by using MCP tools or REST APIs to perform element-level CRUD operations, automatically syncing and generating diagrams without manual drawing.

Can I convert Mermaid diagrams to Excalidraw?▼

Yes, you can convert Mermaid diagrams to Excalidraw format. The skill includes a conversion feature that transforms Mermaid syntax into editable Excalidraw canvas elements.

How does an agent iteratively refine a diagram on a live canvas?▼

An agent iteratively refines a live canvas diagram by using the describe_scene and get_canvas_screenshot functions to understand the current layout and programmatically apply alignment, grouping, and updates.

Do I need a running server to use MCP tools for Excalidraw automation?▼

Yes, programmatic Excalidraw automation requires a running canvas server. You need to set the EXPRESS_SERVER_URL environment variable, which defaults to http://localhost:3000, to connect your agent.

What export formats are supported for Excalidraw diagrams?▼

Excalidraw diagrams support export and import of native .excalidraw files, as well as PNG and SVG image formats, allowing you to save and share canvas snapshots programmatically.

Can I manage element alignment and grouping in Excalidraw programmatically?▼

Yes, you can manage element alignment, distribution, grouping, duplication, and locking programmatically through MCP tools or REST APIs to maintain precise diagram layouts on the canvas.

Related Skills

Explore More Design & Creative Skills→
InternScienceInternScience
28

molclaw-scp-server

Configure and manage the MCP server for MolClaw tool communication.

Official
Intermediate
y0nchay0ncha
1

excalidraw-diagrams

Generate editable Excalidraw diagram files with programmatic layout and styling.

Community
Intermediate
diegocanepadiegocanepa

mermaid-diagrams

Generate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.

Community
Basic
cloudbackenddevcloudbackenddev
1

excalidraw-skill

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

Community
Advanced