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