# Excalidraw

Use when user requests diagrams, flowcharts, architecture charts, or visualizations.

- Repository: https://github.com/dtsola/xiaoyaosearch (1026 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-10-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add dtsola/xiaoyaosearch --skill excalidraw -g -a claude-code -y`
Codex: `npx skills add dtsola/xiaoyaosearch --skill excalidraw -g -a codex -y`
Cursor: `npx skills add dtsola/xiaoyaosearch --skill excalidraw -g -a cursor -y`
Gemini CLI: `npx skills add dtsola/xiaoyaosearch --skill excalidraw -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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-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"
```

**Windows/Linux:** No patch needed.

## Workflow

1. **Check deps**, use Kroki (curl) for SVG; use local CLI for PNG
2. **Plan**, identify diagram type, pick a visual pattern, choose color palette
3. **Generate**, write `.excalidraw` JSON file (section-by-section for large diagrams)
4. **Export**, run Kroki or CLI command
5. **Report**, tell user the output file path

## Design Principles

### Default style

The rest: https://github.com/dtsola/xiaoyaosearch/blob/HEAD/.claude/skills/excalidraw-skill/SKILL.md