excalidraw-diagrams

Create Excalidraw diagrams via HTTP API and verify output with Playwright screenshots.

1|Updated Nov 11, 2012
One-click install
npx skills add https://github.com/fairchild/dotfiles --skill excalidraw-diagrams-fairchild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagrams
Source: https://github.com/fairchild/dotfiles/tree/main/agents/shared/first-party-skills/excalidraw-diagrams
Command: npx skills add https://github.com/fairchild/dotfiles --skill excalidraw-diagrams-fairchild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve? Creating diagrams programmatically and confirming they rendered correctly usually requires manual canvas work and visual checking. This Skill lets you build Excalidraw diagrams through a local canvas server API and verify the result with automated screenshots. ## Core Features & Use Cases - Programmatic Diagram Creation: Create rectangles, ellipses, diamonds, text, arrows, and lines via the canvas server's REST API with a consistent color palette. - Mermaid Conversion: Convert Mermaid diagram definitions into Excalidraw elements through the /api/elements/from-mermaid endpoint. - Visual Verification: Capture headless-browser screenshots of the canvas with Playwright to confirm the diagram rendered as intended. - Use Case: Ask for a flowchart of a deployment pipeline; the Skill posts the elements to the local canvas server, screenshots the result, and shows you the rendered diagram for confirmation. ## Quick Start Use the excalidraw-diagrams skill to draw a vertical flowchart with start, process, and end nodes on the local canvas and show me a screenshot of the result.

Frequently Asked Questions about excalidraw-diagrams

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

FAQPage Schema
How do I create an Excalidraw diagram programmatically?▼

Send a POST request to the canvas server's /api/elements/batch endpoint with a JSON array of elements specifying type, position, size, and colors. Supported types include rectangle, ellipse, diamond, text, arrow, and line.

How to convert Mermaid diagrams to Excalidraw?▼

POST the Mermaid definition to /api/elements/from-mermaid with a JSON body containing the mermaidDiagram string. The browser canvas must be open for the conversion rendering to work.

What are the prerequisites for running the Excalidraw canvas server?▼

Start the server with npm run canvas from the mcp_excalidraw checkout, configurable via the MCP_EXCALIDRAW_PATH environment variable. Verify it is running by calling the /health endpoint at localhost:3000.

How do I verify an Excalidraw diagram rendered correctly?▼

Run the included screenshot script with uv run scripts/screenshot.py, which uses headless Playwright to capture the canvas. Then read the saved PNG to visually confirm the diagram output.

Why is my Excalidraw canvas empty after creating elements?▼

The canvas server may not be running or the elements were posted to the wrong endpoint. Check /health first, confirm the batch POST returned success, and take a fresh screenshot after the page finishes loading.