Does this require a local server to run?

Yes, it requires a running instance of the Excalidraw canvas server at localhost:3000 to process API requests and render visual elements.

What shapes can I create with this skill?

It supports a wide range of standard elements including rectangles, ellipses, diamonds, arrows, lines, and text with customizable properties.

Can I convert existing Mermaid diagrams?

Yes, the skill includes a specific API endpoint that converts Mermaid syntax into editable Excalidraw elements automatically.

Can I customize the visual style of the diagrams?

The skill includes a standardized color palette (Blue, Green, Red, Yellow, Purple, Gray) for professional-looking strokes and backgrounds.

How does Claude verify the diagrams it creates?

The skill uses Playwright to take a headless screenshot of the local Excalidraw canvas, allowing the AI to 'read' the image and verify the output is correct.

Excalidraw Diagrams

Name: Excalidraw Diagrams
Author: fairchild

byfairchild

•

デザインツール

Generates professional diagrams and visual architecture representations using an integrated Excalidraw canvas server.

This skill enables Claude to programmatically generate, edit, and verify visual artifacts directly within an Excalidraw environment. By leveraging a local canvas server and HTTP API, it allows for the creation of complex flowcharts, system designs, and UI mockups through code rather than manual drawing. It uniquely supports converting Mermaid syntax into editable Excalidraw elements and utilizes automated screenshots for visual verification, ensuring that the resulting diagrams accurately reflect technical specifications and design requirements.

主な機能

01Real-time Mermaid diagram to Excalidraw conversion

02Batch API support for rendering complex multi-element diagrams

03Standardized professional color palettes for consistent styling

04Automated visual verification via Playwright screenshots

05Programmatic element creation for rectangles, ellipses, diamonds, and text

061 GitHub stars

ユースケース

01Visualizing complex software architecture and system design patterns

02Rapidly prototyping UI wireframes and visual technical documentation

03Generating flowcharts for business logic, user journeys, or CI/CD pipelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fairchild/dotclaude excalidraw-diagrams

For use in Claude.ai and ChatGPT

Download Skill