excalidraw
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli.
npx skills add dtsola/xiaoyaosearch --skill excalidraw-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Excalidraw Diagrams ## Overview Generate `.excalidraw` JSON files and export to PNG/SVG. **Two export options:** - **Kroki API** (`curl`) — zero install, SVG output only - **excalidraw-brute-export-cli** — local Firefox-based, PNG + SVG **Supported formats:** PNG (local CLI only), SVG (both options). PDF is NOT supported. ## When to Use **Explicit triggers:** user says "画图", "diagram", "visualize", "flowchart", "draw", "架构图", "流程图" **Proactive triggers:** - Explaining a system with 3+ interacting components - Describing a multi-step process or decision tree - Comparing architectures or approaches side by side **Skip when:** a simple list or table suffices, or user is in a quick Q&A flow ## Prerequisites ### Option A: Kroki API (recommended — zero install, SVG only) ```bash # Just needs curl (pre-installed on macOS/Linux/Windows Git Bash) curl --version ``` No additional setup. SVG rendered via `https://kroki.io`. ### Option B: Local CLI (required for PNG) The CLI uses **Firefox** (not Chromium). Check and install: ```bash npm install -g excalidraw-brute-export-cli npx playwright install firefox ``` **macOS patch (one-time, required):** ```bash CLI_MAIN=$(npm root -g)/excalidraw-b
- Overview
- When to Use
- Prerequisites
- Option A: Kroki API (recommended — zero install, SVG only)
- Option B: Local CLI (required for PNG)
- Workflow
- Design Principles
- Default style
- Font size hierarchy
- Color palette
- Arrow semantics
- Excalidraw JSON Structure
- File skeleton
- Element types
Just needs curl (pre-installed on macOS/Linux/Windows Git Bash)
curl --version
npm install -g excalidraw-brute-export-cli
npx playwright install firefox
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"
SVG via Kroki API
curl -s -X POST https://kroki.io/excalidraw/svg \
Via local Kroki Docker (offline)
curl -s -X POST http://localhost:8000/excalidraw/svg \What does the excalidraw skill do?
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli.
How do I install it?
Run `npx skills add dtsola/xiaoyaosearch --skill excalidraw-skill --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From dtsola/xiaoyaosearch, a repository with 1,013 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.