skill

excalidraw · davila7 — Claude Code skill: what it does, how to install

Q: How do I install excalidraw in Claude Code?

Run `npx skills add davila7/claude-code-templates --skill excalidraw -a claude-code`.

This skill routes Excalidraw file work to subagents so large JSON diagrams stay out of the main context. Use it for flowcharts and architecture visuals.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill creative-design/excalidraw

Open on GitHub

What excalidraw does

The skill activates for .excalidraw and .excalidraw.json files, plus requests to explain, create, or revise diagrams, flowcharts, and architecture views. It covers reading a diagram, adding elements, creating a new file, and comparing two diagrams.

A subagent handles the file through the Task tool. It pulls out labels and component relationships, then returns a compact written summary rather than raw element data. For edits and new diagrams, it locates existing elements, writes the required shapes or arrows, and reports the changes.

Excalidraw JSON carries a large amount of visual metadata; one file can run from 4k-22k tokens. Claude Code’s main agent must therefore delegate these operations instead of reading the file itself, or the diagram can consume the working context.

What it helps with

extract components and links from an .excalidraw.json file
create an architecture diagram from a written description
add a service to an existing Excalidraw diagram
compare two architecture diagrams
edit a diagram without loading its full JSON into the main context

Example prompts for the agent

Explain the architecture in system.excalidraw.json and return its components and connections.
Create a payment flow diagram in payment-flow.excalidraw.json from this description.
Add the Billing service to architecture.excalidraw.json and connect it to API Gateway.

How to install excalidraw

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/excalidraw

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill excalidraw -a claude-code

3Manually: put the files in place

~/.claude/skills/excalidraw/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/excalidraw/

Manually: put the files in place

.agents/skills/excalidraw/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/excalidraw/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates excalidraw

2Manually: put the files in place

.github/skills/excalidraw/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/excalidraw

Manually: put the files in place

.devin/skills/excalidraw/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about excalidraw

How do I install excalidraw in Claude Code?

Run npx skills add davila7/claude-code-templates --skill excalidraw -a claude-code.

What does the excalidraw skill do?

It sends Excalidraw reading, creation, editing, and comparison tasks to subagents. Claude Code receives a text summary of labels and relationships instead of the full JSON structure.

Why does excalidraw use a subagent?

Excalidraw files include extensive layout and styling metadata and may take 4k-22k tokens. Direct reads fill the main Claude Code context, so the skill keeps that work isolated.

excalidraw by other authors comes first.

excalidraw Hermes Agent Creates .excalidraw files for architecture diagrams, flowcharts, and sequence diagrams. Use it when you want an agent to turn a system or process into an editable diagram. CX Codex +1 412installs excalidraw Agents365-ai 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. CX Codex +1 4,600installs setup-matt-pocock-skills Matt Pocock This skill configures a repository for Matt Pocock's engineering skills by setting its issue tracker, triage labels, and domain docs layout. Run it before using the other skills. 1,052,851installs ask-matt Matt Pocock Routes you to the right Matt Pocock skill or flow for the task at hand. Use it when you need a starting point for a feature, prototype, incoming issue, or hard bug. 766,587installs to-tickets Matt Pocock Turns a plan, spec, or conversation into small end-to-end tickets with explicit blockers. Use it to agree on the work breakdown before tickets go to a tracker. 711,230installs writing-plans Jesse Vincent This skill turns requirements for a multi-step task into an implementation plan before code changes begin. It helps when another engineer needs exact files, interfaces, and checks. CX Codex 282,859installs caveman-review JuliusBrussee Turns code review comments into one line per finding: location, problem, fix. Useful when a diff or PR needs a fast pass without the filler. CX Codex +1 411,800installs caveman-compress JuliusBrussee Compresses CLAUDE.md, todo lists, and other prose files into a shorter format while retaining a readable backup. CX Codex +1 411,500installs

From the same set495

The whole set →

developer-growth-analysis Reads your recent Claude chat history, spots skill gaps in your work, and sends a growth report to your Slack DMs. 355installs log Writes a finished task's report into your tracker or notes: time spent, status, commits. Useful when the coding happens in Claude but the record lives in Linear or Obsidian. 351installs create-worktrees Pulls every open pull request through GitHub CLI and sets up a separate git worktree for each branch under ./tree/. Useful when you want several PRs checked out at once without switching branches in the main checkout. 351installs setup-ci-cd-pipeline Configures CI/CD pipelines for GitHub Actions, GitLab CI, Azure Pipelines, or Jenkins with automated testing, security gates, and deployment flows. 346installs develop-web-game This skill lays out a development and testing loop for HTML and JavaScript games. Use it while adding game features and checking each meaningful change in a browser. 342installs branch-cleanup A Claude slash command that finds merged and stale branches, checks them before deletion, and tidies up both local and remote refs. 342installs pentest-checklist A skill that walks you through pentest planning: objectives, scope, environment prep, tester selection and monitoring. Useful before a security assessment. 336installs nextjs-scaffold Sets up a structured Next.js application with App Router, security headers, ESLint, and image optimization. 334installs