excalidraw skill

Claude Code skill for generating Excalidraw diagrams and exporting to PNG/SVG via Kroki API or locally.

中文文档

Why use this skill

• Natural language to diagram — describe what you want in plain English or Chinese, get a professional diagram back. No dragging boxes, no manual layout.
• Zero learning curve — you don’t need to learn Excalidraw’s JSON format, Mermaid syntax, or any DSL. Just talk.
• Zero install option — the Kroki API path needs nothing but curl. No npm packages, no Docker, no browser automation.
• Proactive diagrams — the skill triggers automatically when Claude detects a complex system explanation would benefit from a visual. You don’t even have to ask.
• Professional design system — semantic color palette (60-30-10 rule), font size hierarchy, arrow semantics (solid/dashed/dotted), and diagram-type-specific layout patterns built in.
• 5 diagram patterns — Flowchart, Architecture, Sequence, Mind Map, and Swimlane, each with dedicated layout rules and spacing conventions.
• Anti-pattern guard rails — documents common pitfalls (zone text overlap, spaghetti arrows, label collisions) so Claude avoids them before they happen.
• Smart sizing — auto-calculates element width from label text (max(160, charCount * 9)) with CJK-aware estimation, preventing text truncation.
• Precise spacing system — pixel-exact spacing rules for labeled vs unlabeled arrows, column/row gaps, and zone padding — no more overlapping elements.
• 3 arrow routing modes — straight, L-shaped elbow, and curved waypoint routing for clean diagram connections.
• Editable output — the .excalidraw file can be opened in excalidraw.com for manual tweaks, with full interactive arrow binding preserved.
• Works offline — the local CLI option (Firefox-based) runs entirely on your machine with no network dependency.

How it compares

Key advantages:

• Lowest friction — curl is all you need. Other skills require npm + Playwright before you can see any output.
• Self-contained — everything in one SKILL.md. No reference files to manage.
• Bilingual — first-class Chinese support for prompts and documentation.
• Proactive — auto-triggers when explaining complex systems, no explicit “draw me a diagram” needed.
• Best of both — combines coleam00’s design philosophy with rnjn’s technical completeness (binding, grouping, arrow routing).

Why a skill, not an MCP server?

Excalidraw’s JSON format is just an array of elements with x/y/width/height — Claude can write it natively. A skill teaches Claude how to draw; an MCP server gives Claude a tool to draw. When the LLM can do the job itself, teaching is better than tooling.

MCP is valuable when Claude needs capabilities it can’t do alone — database access, browser automation, authenticated APIs. Diagram generation is design + JSON writing, which is exactly what LLMs excel at.

What it does

• Generates .excalidraw JSON files from natural language descriptions
• Exports SVG via Kroki API — zero install, just curl
• Exports PNG/SVG locally using excalidraw-brute-export-cli (Firefox-based)
• Triggers automatically when diagrams would help explain complex systems
• Applies semantic colors, font hierarchy, and arrow styles automatically
• Auto-calculates element width from label text with CJK-aware sizing
• Builds large diagrams section-by-section to avoid token limits
• Produces fully interactive files with bidirectional arrow binding

Features

Semantic color palette

8 color categories mapped to meaning — Primary (blue), Success (green), Warning (yellow), Error (red), External (purple), Process (sky), Trigger (orange), Neutral (slate). Follows the 60-30-10 rule: 60% whitespace, 30% primary accent, 10% highlight.

Diagram patterns

Precise spacing system

Arrow routing

3 modes: straight (default), L-shaped elbow (points with right angles), and curved waypoint (roundness: { type: 2 }).

Arrow semantics

Smart element sizing

Auto-calculates width from label text: max(160, charCount * 9) for Latin, max(160, charCount * 18) for CJK. Prevents text truncation in generated diagrams.

Font hierarchy

Title (28px) → Header (24px) → Label (20px) → Description (16px) → Note (14px)

Anti-pattern guard rails

Built-in documentation of common pitfalls — zone text centering traps, cross-zone arrow spaghetti, label collision on short arrows, and container opacity rules — so Claude avoids mistakes before they happen.

Dependencies

curl is pre-installed on macOS, Linux, and Windows (Git Bash / WSL).

Install

Option A: Kroki API (recommended — zero install, SVG only)

# curl is already available — just verify:
curl --version

No additional setup. SVG rendered via https://kroki.io.

Option B: Local CLI (required for PNG)

npm install -g excalidraw-brute-export-cli
npx playwright install firefox

Platform notes

macOS patch (one-time, required for local CLI)

The CLI uses Control+O / Control+Shift+E but macOS requires Meta (Cmd):

CLI_MAIN=$(npm root -g)/excalidraw-brute-export-cli/src/main.js
sed -i '' 's/keyboard.press("Control+O")/keyboard.press("Meta+O")/' "$CLI_MAIN"
sed -i '' 's/keyboard.press("Control+Shift+E")/keyboard.press("Meta+Shift+E")/' "$CLI_MAIN"

Usage

Just describe what you want:

Create a microservices e-commerce architecture with API Gateway, auth/user/order/product/payment services,
Kafka message queue, notification service, and separate databases for each service

Claude will generate the .excalidraw file and export it to PNG automatically.

Example

Prompt:

Create a microservices e-commerce architecture with Mobile/Web/Admin clients, API Gateway, Auth/User/Order/Product/Payment services, Kafka message queue, Notification service, and User DB / Order DB / Product DB / Redis Cache / Stripe API

Output:

Files

• SKILL.md — skill instructions loaded by Claude Code
• README.md — this file (English)
• README_CN.md — Chinese documentation
• assets/ — example diagrams

License

MIT

Support

If this skill helps you, consider supporting the author:

Author

Agents365-ai

• Bilibili: https://space.bilibili.com/441831884
• GitHub: https://github.com/Agents365-ai