How does the skill prevent messy or overlapping diagrams?

It follows specific layout anti-patterns and spacing guidelines, utilizing smart arrow routing and free-standing text elements to ensure professional readability.

Does this require a local server?

Yes, it requires a running Excalidraw canvas server (defaulting to localhost:3000) to host the real-time drawing environment and handle API requests.

How does Claude see the diagram it creates?

The skill includes a get_canvas_screenshot tool that allows Claude to visually inspect the current canvas and make iterative layout adjustments based on visual feedback.

Are the diagrams exportable to standard formats?

Absolutely. You can export scenes as .excalidraw files, PNG images, or SVG vectors for use in external documentation and presentations.

Can I convert existing Mermaid diagrams?

Yes, the skill provides a specific tool to import Mermaid syntax and convert it into native, editable Excalidraw elements automatically.

Excalidraw Diagramming Skill

Name: Excalidraw Diagramming Skill
Author: micsapp

bymicsapp

0•

设计工具

Enables AI agents to programmatically create, edit, and export high-quality Excalidraw diagrams with real-time canvas synchronization.

The Excalidraw Skill provides a comprehensive toolkit for Claude to generate and refine visual diagrams directly on a live canvas. It supports complex architectural layouts, Mermaid-to-Excalidraw conversion, and element-level manipulation such as alignment, grouping, and smart arrow binding. By combining programmatic control with visual feedback via automated screenshots, it allows for iterative design improvements, making it an essential tool for documenting system architectures, flowcharts, and UI wireframes directly within the AI development workflow.

主要功能

01Intelligent arrow routing with support for curved and elbowed connectors

02Advanced layout tools including distribution, alignment, and element grouping

03Real-time canvas synchronization with support for screenshots and scene descriptions

040 GitHub stars

05Automatic conversion from Mermaid syntax to editable Excalidraw diagrams

06Programmatic CRUD operations for all Excalidraw element types

使用场景

01Documenting database schemas by converting Mermaid ER diagrams into visual assets

02Generating cloud architecture diagrams from infrastructure-as-code descriptions

03Visualizing complex logic flows and system sequences during design discussions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills excalidraw-skill

For use in Claude.ai and ChatGPT

主要功能

01Intelligent arrow routing with support for curved and elbowed connectors

02Advanced layout tools including distribution, alignment, and element grouping

03Real-time canvas synchronization with support for screenshots and scene descriptions

040 GitHub stars

05Automatic conversion from Mermaid syntax to editable Excalidraw diagrams

06Programmatic CRUD operations for all Excalidraw element types

使用场景

01Documenting database schemas by converting Mermaid ER diagrams into visual assets

02Generating cloud architecture diagrams from infrastructure-as-code descriptions

03Visualizing complex logic flows and system sequences during design discussions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills excalidraw-skill

For use in Claude.ai and ChatGPT