Is it possible to use this without an MCP server?

Yes, the skill features a REST API fallback mode that allows Claude to interact with the canvas via standard HTTP endpoints if the MCP server is unavailable.

What formats can I export my diagrams to?

You can export your work as native .excalidraw files, or as standard image formats including PNG and SVG.

Does this skill require a local server?

Yes, it requires a running canvas server (typically on localhost:3000) to synchronize elements and render the visual workspace.

Can I convert existing Mermaid diagrams to Excalidraw?

Yes, the skill includes a specific capability to convert Mermaid syntax directly into editable Excalidraw elements.

How does Claude verify the quality of the diagram?

Claude uses the 'get_canvas_screenshot' tool to visually inspect the layout, ensuring no text truncation or element overlap occurs.

Excalidraw Canvas Skill

Name: Excalidraw Canvas Skill
Author: HarieshVarshan

byHarieshVarshan

0•

设计工具

Programmatically creates, edits, and refines professional Excalidraw diagrams with real-time canvas synchronization and visual feedback.

The Excalidraw Skill transforms Claude into a visual architect by providing a robust toolkit for building and syncing Excalidraw canvases. It enables agents to layout complex system architectures, sequence diagrams, and flowcharts using either MCP tools or a REST API fallback. With advanced features like real-time screenshot verification, element-level CRUD operations, and automatic Mermaid-to-Excalidraw conversion, it ensures high-quality, readable diagrams that adhere to strict design guidelines for spacing, sizing, and routing.

主要功能

01Real-time canvas synchronization with visual screenshot verification

02Advanced arrow routing with waypoints and element binding

03Snapshot management and multi-format export (PNG, SVG, .excalidraw)

040 GitHub stars

05Programmatic element-level CRUD for shapes, arrows, and text

06Automatic Mermaid diagram to Excalidraw conversion

使用场景

01Generating and iteratively refining system architecture diagrams during design phases

02Automating the creation of flowcharts and sequence diagrams from code logic

03Converting static Mermaid documentation into editable, professional visual canvases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add harieshvarshan/vrshn-claude-marketplace excalidraw-skill

For use in Claude.ai and ChatGPT

Download Skill