# excalidraw-skill

A skill that connects an agent to a live Excalidraw canvas so it can draw, adjust and export diagrams.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 installs · ★ 433
- Author: lingzhi227
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/lingzhi227/agent-research-skills/tree/HEAD/skills/excalidraw-skill/SKILL.md
- Updated: 2026-02-27
- HTML: https://affpapa.org/en/nevibecode/skills/excalidraw-skill

## What it does

The skill hands the agent a set of canvas operations: add elements in batches, move and resize them, align, group, duplicate, lock. It can look at the result through a scene description or a screenshot, which makes iterative redrawing practical instead of guessing.

On start it checks what is available: MCP tools first, then the health endpoint at `http://localhost:3000`. If neither responds, the skill walks through setting up the canvas server by hand. Diagrams can be imported from Mermaid, and files come in `.excalidraw`, PNG and SVG. Named snapshots let you roll the canvas back.

A canvas server has to be running, addressed through `EXPRESS_SERVER_URL`, which defaults to `http://localhost:3000`. Image export and screenshots need an open browser, and a few tools — screenshots, viewport control, the diagram guide, export to an Excalidraw URL — are MCP-only. In pure REST mode those calls have no equivalent.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add lingzhi227/agent-research-skills --skill excalidraw-skill -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/excalidraw-skill/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/excalidraw-skill/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add lingzhi227/agent-research-skills --skill excalidraw-skill -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/excalidraw-skill/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add lingzhi227/agent-research-skills --skill excalidraw-skill -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/excalidraw-skill/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install lingzhi227/agent-research-skills excalidraw-skill
```

2. **Manually: put the files in place**
- File: `.github/skills/excalidraw-skill/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add lingzhi227/agent-research-skills --skill excalidraw-skill -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/lingzhi227/agent-research-skills --path skills/excalidraw-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/excalidraw-skill/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add lingzhi227/agent-research-skills --skill excalidraw-skill -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/lingzhi227/agent-research-skills/tree/HEAD/skills/excalidraw-skill/SKILL.md

## When to use it
- draw a service diagram on a live canvas
- fix a layout from a screenshot instead of blind edits
- turn a Mermaid chart into editable Excalidraw elements
- export a diagram as PNG or SVG
- save a named snapshot and restore it later

## Example prompts
- Draw a three-service diagram with a database on the canvas, then send me a screenshot
- Convert the Mermaid file `flow.mmd` into Excalidraw elements
- Save the canvas as a snapshot called `before-refactor`

## Similar
- [setup-matt-pocock-skills](https://affpapa.org/en/nevibecode/skills/setup-matt-pocock-skills.md) — skill · 1052851 installs
- [ask-matt](https://affpapa.org/en/nevibecode/skills/ask-matt.md) — skill · 766587 installs
- [to-tickets](https://affpapa.org/en/nevibecode/skills/to-tickets.md) — skill · 711230 installs
- [writing-plans](https://affpapa.org/en/nevibecode/skills/writing-plans.md) — skill · 282859 installs
- [caveman-review](https://affpapa.org/en/nevibecode/skills/caveman-review.md) — skill · 411800 installs
- [caveman-compress](https://affpapa.org/en/nevibecode/skills/caveman-compress.md) — skill · 411500 installs

## Other versions with the same name
- [excalidraw-skill · yctimlin](https://affpapa.org/en/nevibecode/skills/yctimlin-excalidraw-skill.md) — 510 installs

From the same set: [lingzhi227/agent-research-skills](https://affpapa.org/en/nevibecode/by/lingzhi227/agent-research-skills.md) — 31 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md