# excalidraw

This skill draws flowcharts, architecture charts and other diagrams into .excalidraw files, then exports them to PNG or SVG. Handy when a picture beats a paragraph.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 installs · ★ 92
- Author: Agents365-ai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Agents365-ai/365-skills/tree/HEAD/plugins/excalidraw/skills/excalidraw-skill/SKILL.md
- Updated: 2026-10-16
- HTML: https://affpapa.org/en/nevibecode/skills/agents365-ai-excalidraw

## What it does

The skill fires when you ask for a diagram, and it also offers one on its own when an explanation covers three or more interacting components, a multi-step process or a side-by-side comparison of architectures. Output is a `.excalidraw` JSON file you can open in the Excalidraw editor. PDF is not supported.

Export runs two ways. Kroki needs nothing but `curl` and returns SVG. PNG requires the local CLI: `npm install -g excalidraw-brute-export-cli` plus `npx playwright install firefox`. That path drives Firefox, not Chromium, and on macOS you patch `main.js` once before the first run — skip it and the CLI keyboard shortcuts do nothing.

The skill ships a style guide: eight semantic fill colors, font sizes from 14 to 28 px, and three arrow styles for primary flow, responses and weak dependencies. It advises restraint with boxes. Free-floating text and lines carry the structure; filled rectangles are reserved for genuine components. Need a real AWS, Azure or UML icon? Community libraries are built from the same vector primitives, so their items survive both export paths.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code
```
```bash
npx skills add Agents365-ai/365-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 Agents365-ai/365-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 Agents365-ai/365-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 Agents365-ai/365-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 Agents365-ai/365-skills --skill excalidraw-skill -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/excalidraw/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 Agents365-ai/365-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/Agents365-ai/365-skills/tree/HEAD/plugins/excalidraw/skills/excalidraw-skill/SKILL.md

## When to use it
- turn a written process description into a flowchart
- show a multi-component service architecture
- compare two design approaches in one image
- export a diagram to SVG for documentation
- get a PNG diagram without drawing it by hand

## Example prompts
- Draw the architecture of this service in excalidraw
- Make a flowchart of the order pipeline and export it as SVG
- Diagram how these three components talk to each other

## Similar
- [excalidraw-skill](https://affpapa.org/en/nevibecode/skills/yctimlin-excalidraw-skill.md) — skill · 510 installs
- [hand-drawn-diagrams](https://affpapa.org/en/nevibecode/skills/hand-drawn-diagrams.md) — skill · 2800 installs
- [excalidraw-diagram](https://affpapa.org/en/nevibecode/skills/excalidraw-diagram.md) — skill · 8500 installs
- [excalidraw-diagram-generator](https://affpapa.org/en/nevibecode/skills/excalidraw-diagram-generator.md) — skill · 31639 installs
- [drawio](https://affpapa.org/en/nevibecode/skills/drawio.md) — skill · 314 installs

## Other versions with the same name
- [excalidraw · nousresearch](https://affpapa.org/en/nevibecode/skills/hermes-agent-excalidraw.md) — 412 installs

From the same set: [agents365-ai/365-skills](https://affpapa.org/en/nevibecode/by/agents365-ai/365-skills.md) — 13 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