skill CX Codex

excalidraw · agents365-ai — Claude Code skill: diagrams as .excalidraw

Q: How do I install excalidraw in Claude?

Run `npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code`. The skill lands at `~/.claude/skills/excalidraw-skill/SKILL.md`.

Q: What does the excalidraw skill do?

It writes `.excalidraw` files containing diagrams and charts, then exports them to PNG or SVG. PNG comes only from the local CLI; SVG works through either path.

Q: What do I need for it to work?

SVG export needs just `curl`. PNG export needs `excalidraw-brute-export-cli` and Firefox via `npx playwright install firefox`, plus a one-time `main.js` patch on macOS.

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code
npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a claude-code

Open on GitHub

What excalidraw 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.

What it helps with

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 for the agent

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

How to install excalidraw

1Skills CLI (Vercel)

npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code

npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a claude-code

2Manually: put the files in place

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

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

1Skills CLI (Vercel)

npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a codex

2Manually: put the files in place

.agents/skills/excalidraw-skill/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a cursor

2Manually: put the files in place

.cursor/skills/excalidraw-skill/SKILL.md

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

1GitHub CLI

gh skill install Agents365-ai/365-skills excalidraw-skill

2Manually: put the files in place

.github/skills/excalidraw-skill/SKILL.md

1Skills CLI (Vercel)

npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a gemini-cli

2Platform CLI

gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/excalidraw/skills/excalidraw-skill

Manually: put the files in place

.devin/skills/excalidraw-skill/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add Agents365-ai/365-skills --skill excalidraw-skill -a opencode

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?

Run npx skills add Agents365-ai/365-skills --skill excalidraw -a claude-code. The skill lands at ~/.claude/skills/excalidraw-skill/SKILL.md.

What does the excalidraw skill do?

It writes .excalidraw files containing diagrams and charts, then exports them to PNG or SVG. PNG comes only from the local CLI; SVG works through either path.

What do I need for it to work?

SVG export needs just curl. PNG export needs excalidraw-brute-export-cli and Firefox via npx playwright install firefox, plus a one-time main.js patch on macOS.

Similar skills

Everything for Writing and docs →

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-skill yctimlin This skill gives an agent a live Excalidraw canvas for diagrams, file exchange, and scene edits. Use it for Mermaid conversion, snapshots, and element-level changes. CX Codex +1 510installs hand-drawn-diagrams nexu-io Generates hand-drawn Excalidraw diagrams from plain text prompts. It outputs animated SVGs, PNG exports, and hosted links for editing. CX Codex +1 2,800installs excalidraw-diagram coleam00 Generates .excalidraw JSON diagram files for technical architectures and workflows. Helps turn system specs or logic into diagrams with real data examples. CX Codex +1 8,500installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. 31,639installs drawio official github Builds native .drawio diagram files and exports them to PNG, SVG, or PDF with embedded XML. 314installs

From the same set12

plantuml-skill A coding-agent skill that writes .puml files and exports them to PNG or SVG. Useful when you need a diagram from code or from a text description. CX Codex +1 4,100installs tldraw-skill Generates .tldr diagram files and exports them to PNG or SVG via a local CLI. Useful for visualizing multi-component systems and data flows. CX Codex +1 3,700installs semanticscholar-skill Searches academic papers, authors, and citation graphs using the Semantic Scholar API. Helps agents explore scientific literature, gather references, and get recommendations. CX Codex +1 3,400installs asta Searches the Semantic Scholar academic graph via AI2's Asta MCP server. Finds citations, author publications, and 500-word snippets. CX Codex +1 3,100installs journal-abbrev Looks up journal name abbreviations and expands them back, using ISO 4 and MEDLINE. Handy when you prepare a reference list or clean up BibTeX. CX Codex +1 3,000installs pi-prompting Internal prompt guidance for Pi task runners using DeepSeek models. It helps structure coding, debugging, and repository review through strict XML contracts. CX Codex +1 2,900installs target-prioritization The skill builds a per-gene dossier from UniProt, OpenTargets, PubMed, HPA and ChEMBL, then re-ranks your candidate genes by a composite score. CX Codex +1 2,900installs bangumi-frames Extracts anime video frames from Bilibili or local files, separates scenery, and clusters characters using anime person detection and CCIP embeddings. CX Codex +1 2,300installs