Excalidraw Skill
yctimlin/mcp_excalidraw
Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.
A skill your agent uses when asked to create or update Excalidraw diagrams.
Install Excalidraw Diagrams
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sammcj/agentic-coding excalidraw-diagrams --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .claude/skills && cp -r skills-src/Skills/excalidraw-diagrams .claude/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .claude/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagramsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sammcj/agentic-coding excalidraw-diagrams --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .agents/skills && cp -r skills-src/Skills/excalidraw-diagrams .agents/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .agents/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sammcj/agentic-coding excalidraw-diagrams --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/Skills/excalidraw-diagrams .cursor/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .cursor/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sammcj/agentic-coding.git --path Skills/excalidraw-diagrams--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sammcj/agentic-coding excalidraw-diagrams --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/Skills/excalidraw-diagrams .gemini/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .gemini/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sammcj/agentic-coding excalidraw-diagramsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .github/skills && cp -r skills-src/Skills/excalidraw-diagrams .github/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .github/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sammcj/agentic-coding excalidraw-diagrams --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sammcj/agentic-coding.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/Skills/excalidraw-diagrams .opencode/skills/excalidraw-diagrams && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "excalidraw-diagrams" agent skill from https://github.com/sammcj/agentic-coding/tree/main/Skills/excalidraw-diagrams into .opencode/skills/excalidraw-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagrams", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
excalidraw-diagrams- GitHub stars
- 162
- Token cost
- ~1.7k tokens
- SKILL.md length
- 829 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 64
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
A skill your agent uses when asked to create or update Excalidraw diagrams.
- Works in 2 steps: Shape: "boundElements": [{"id":… → Text: "containerId": "shape-id",…
- Asked to create
- SKILL.md covers Choose your workflow, Critical: text does not…, Python script:… and Arrow anchoring, plus 1 more section
- Runs Python scripts from its folder; calls python3
What it does
Excalidraw Diagrams is an agent skill from sammcj/agentic-coding. Use when asked to create or update Excalidraw diagrams. Provides guidance on Excalidraw best practices.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `_note.md` and `scripts/generate_excalidraw.py`).
It sits in Development, covering Diagrams. It works with Excalidraw, Python and Model Context Protocol. The repository describes itself as: Agentic Coding Rules, Templates etc... The licence is Apache-2.0.
When your agent uses it
- Asked to create
- Update Excalidraw diagrams
Example prompts
- “/excalidraw-diagrams”
Requirements
- Python 3
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- Shape: "boundElements": [{"id": "text-id", "type": "text"}]
- Text: "containerId": "shape-id", "textAlign": "center", "verticalAlign": "middle"
What it can do on your machine
Read from SKILL.md and the folder at commit 2f25ced. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
excalidraw-mcp-app.vercel.appgithub.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Excalidraw Diagrams loads about 1.7k tokens when it runs. Until then it costs about 31 tokens; SKILL.md has 829 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from sammcj/agentic-coding at commit 2f25ced, republished under its Apache-2.0 licence (© sammcj). 829 words, ~1,708 tokens.
Download SKILL.mdSave it as
.claude/skills/excalidraw-diagrams/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- excalidraw-diagrams
- description
- Use when asked to create or update Excalidraw diagrams. Provides guidance on Excalidraw best practices.
- disable-model-invocation
- true
- argument-hint
- Thing you want to do
Creating Excalidraw Diagrams
When creating Excalidraw diagrams, ensure you:
- Generate the layout with correct spacing
- Make consistent and logical use of colours, fonts, and shapes
- Text is correctly added within shapes, not as separate text elements (unless desired)
- Arrows and lines are correctly anchored / connected to shapes (not floating) so that when objects are moved any connections remain intact
- You save the Excalidraw diagram content to a file and link the file path
- Call
read_mebefore your firstcreate_viewcall each session - it provides the colour palette, camera sizes, layout rules, and element format reference. - If the user has asked you to create Excalidraw diagrams but you do not have the Excalidraw MCP enabled, you should ask them to add it for you, they can configured it by using the HTTP MCP URL of: https://excalidraw-mcp-app.vercel.app/mcp and they can view the MCP documentation here: https://github.com/excalidraw/excalidraw-mcp
Choose your workflow
Pick one based on what the user needs. Do not default to doing both.
Inline preview only (create_view)
Use when the diagram is for the conversation only - the user wants to see it in the chat and does not need a file.
- Use
create_viewwithlabelon shapes (works fine here) - Use
cameraUpdateto animate and guide attention - No file output needed
File output only (Python script)
Use when the user needs a .excalidraw file to open, share, edit, or keep. Skip create_view entirely.
- Generate the file with
scripts/generate_excalidraw.py(see below) - Provide the file path to the user
- Files can be opened by dragging into excalidraw.com, the Excalidraw desktop app, or VS Code with the Excalidraw extension
Both (inline preview + file)
Use when the user wants to see the diagram in the chat AND keep a file. Note: these are built independently with different element formats. There is no data bridge between them - you define the diagram structure once conceptually but render it twice.
create_viewwithlabelfor the inline preview- Python script with
labeled_rectfor the.excalidrawfile
Critical: text does not survive export
The label property on shapes is a create_view convenience only. It does NOT work in:
export_to_excalidrawuploads (shapes render, text is invisible).excalidrawfiles written fromcreate_viewcheckpoint data
Do NOT use export_to_excalidraw for shareable diagrams. It seems to have a bug that can silently drop all text.
Native Excalidraw represents text inside shapes as two linked elements:
- Shape:
"boundElements": [{"id": "text-id", "type": "text"}] - Text:
"containerId": "shape-id","textAlign": "center","verticalAlign": "middle"
The text element requires fields the label shorthand omits: fontFamily (1), width, height, originalText, lineHeight (1.25), autoResize (true).
All elements in .excalidraw files also need: angle, seed, version, versionNonce, isDeleted, groupIds, frameId, updated, link, locked.
Hand-writing this JSON is error-prone. Use the Python script instead.
Show full SKILL.md (379 more words)Show less
Python script: scripts/generate_excalidraw.py
Generates native .excalidraw files with all required fields. Can be used inline in a bash heredoc or imported as a library.
Key functions:
| Function | Returns | Purpose |
|---|---|---|
labeled_rect(id, x, y, w, h, bg, stroke, label, ...) | [rect, text] | Shape with centred bound text (handles all binding and field generation) |
rect(id, x, y, w, h, bg, stroke, ...) | element | Rectangle without text |
txt(id, x, y, w, h, text, size, ...) | element | Standalone or bound text |
bound_arrow(id, elements, start_id, start_point, end_id, end_point, ...) | element | Arrow anchored to two shapes (mutates shapes' boundElements) |
arrow(id, x, y, w, h, points, ...) | element | Unbound/floating arrow (use bound_arrow instead when connecting shapes) |
ellipse(...) / diamond(...) | element | Other shape types |
write_scene(elements, path) | writes file | Wraps in scene structure and saves |
Example:
python3 << 'PYEOF'
import sys, random
sys.path.insert(0, "/Users/samm/.claude/skills/excalidraw-diagrams/scripts")
from generate_excalidraw import *
random.seed(42)
elements = []
elements.append(txt("t1", 200, 10, 300, 30, "My Diagram", 24))
elements.extend(labeled_rect("a", 50, 60, 200, 70, "#a5d8ff", "#4a9eed", "Step One"))
elements.extend(labeled_rect("b", 350, 60, 200, 70, "#b2f2bb", "#22c55e", "Step Two"))
elements.append(bound_arrow("a1", elements, "a", [1, 0.5], "b", [0, 0.5]))
write_scene(elements, "/path/to/output.excalidraw")
PYEOFFor shapes without the labeled_rect convenience, pair rect(..., bound_text="tid") with txt(..., container="rid", align="center", valign="middle").
Arrow anchoring
By default, arrows float free - moving a shape leaves the arrow behind. Use bound_arrow instead of arrow to anchor arrows to shapes. It handles the bidirectional binding automatically (arrow references shapes, shapes list the arrow in boundElements).
fixedPoint values for connection points on shapes: top=[0.5, 0], right=[1, 0.5], bottom=[0.5, 1], left=[0, 0.5]. Any [fx, fy] value works where 0,0 is the shape's top-left corner and 1,1 is bottom-right.
Important:
- Shapes must already exist in
elementsbefore callingbound_arrow, since it looks them up and mutates theirboundElements. - Minimum 60px between connected shapes. Excalidraw recalculates bound arrow geometry at render time. When shapes are too close together (under ~60px gap), arrows overlap and pass through boxes instead of connecting at edges. The script warns if this threshold is violated. Plan layouts with adequate spacing.
- Avoid large background rectangles that overlap connectable shapes. Excalidraw's binding resolution can misfire when a bound arrow's endpoint falls inside a background rect that overlaps the intended target shape. If you need section backgrounds, add them after all bound arrows, or use standalone text labels and colour-coded boxes instead.
For the inline create_view workflow, use startBinding/endBinding with fixedPoint directly on arrow elements.
Privacy
Note that if the diagram contains potentially sensitive information (e.g. detailed network diagrams, identifiable information etc...) and the user asks you to upload the diagram to excalidraw.com - you should first warn them that this will make the diagram publicly accessible and ask if they want to proceed.
© sammcj, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (scripts) in Skills/excalidraw-diagrams of sammcj/agentic-coding.
- SKILL.md
- _note.md
- scripts/generate_excalidraw.py
Open the folder on GitHubat commit 2f25ced
Compare with similar skills
Excalidraw Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Excalidraw Diagrams this skillsammcj/agentic-coding | 162 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Excalidraw Skillyctimlin/mcp_excalidraw | 2.5k | — | ~4.6k | Automated safety check: Pass | MIT | |
| Archscribelazypay/Archscribe | 359 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Drawio Diagram BuilderWill-hxw/drawio-diagram-builder | 413 | — | ~5.9k | Automated safety check: Pass | MIT | |
| Excalidraw ArchitectBV-Venky/excalidraw-architect-mcp | 158 | — | ~2k | Automated safety check: Pass | MIT | |
| Excalidraw Canvas Toolkitlingzhi227/agent-research-skills | 390 | — | ~3.8k | Automated safety check: Pass | None |
Similar skills
Archscribe
lazypay/Archscribe
Create premium hand-drawn architecture, workflow, and swimlane diagrams in a dark neon or light paper style, with editable Excalidraw sources, PNG/SVG previews, animated GIF/MP4 output, and…
Drawio Diagram Builder
Will-hxw/drawio-diagram-builder
Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams.
Excalidraw Architect
BV-Venky/excalidraw-architect-mcp
Choose and compose the right Excalidraw diagram - architecture, flowchart, sequence, state, ER, swimlane, process, timeline, quadrant, pyramid, venn, loop, gantt, bar, line, scatter, and more -…
Excalidraw Canvas Toolkit
lingzhi227/agent-research-skills
Draws and refines Excalidraw diagrams on a live canvas through MCP tools or a REST API, with screenshots, file import and export, snapshots and Mermaid conversion.
Excalidraw Diagram Design
BV-Venky/excalidraw-architect-mcp
Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams.
More from sammcj/agentic-coding
All 64 skills in this repoYue2 Music
sammcj/agentic-coding
A skill your agent uses when generating songs with YuE2, covering a recording via SheetSage2 audio-to-ABC, editing a score or lyrics with melody preservation, or building a reproducible listening…
Bento Slides
sammcj/agentic-coding
A skill your agent uses when creating or editing Bento (.bento.html) slide decks, including any request for a single-file HTML slide deck.
Idrive Backup
sammcj/agentic-coding
A skill your agent uses whenever the user wants you to manage, discuss or diagnose iDrive Backup configuration on macOS
Piper Tts Training
sammcj/agentic-coding
Train custom TTS voices for Piper (ONNX format) using fine-tuning or from-scratch approaches.
PPTX To Md
sammcj/agentic-coding
Convert a PPTX slide deck into per-slide markdown that preserves both the verbatim text and the meaning of embedded screenshots, diagrams and charts in their original layout positions.
Skill Creator Primer
sammcj/agentic-coding
You MUST load this skill before the skill-creator skill AND before making ANY change to, or conducting a review of ANY Agent Skill.
Related
Works with
Categories
Questions about Excalidraw Diagrams
What does Excalidraw Diagrams do?
A skill your agent uses when asked to create or update Excalidraw diagrams. Excalidraw Diagrams is an agent skill from sammcj/agentic-coding. Use when asked to create or update Excalidraw diagrams.
When should I use Excalidraw Diagrams?
Excalidraw Diagrams fits situations like: asked to create; update Excalidraw diagrams.
How do I install Excalidraw Diagrams in Claude Code?
Run `npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a claude-code`. Or copy the skill folder (Skills/excalidraw-diagrams in sammcj/agentic-coding) into .claude/skills/excalidraw-diagrams in your project. Claude Code loads it when a task matches its description.
How do I install Excalidraw Diagrams in Codex?
Run `npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a codex`. Or copy the skill folder (Skills/excalidraw-diagrams in sammcj/agentic-coding) into .agents/skills/excalidraw-diagrams in your project. Codex loads it when a task matches its description.
Can I use Excalidraw Diagrams in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sammcj/agentic-coding --skill excalidraw-diagrams -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/excalidraw-diagrams, .gemini/skills/excalidraw-diagrams, .github/skills/excalidraw-diagrams and .opencode/skills/excalidraw-diagrams in your project.
What does Excalidraw Diagrams need to run?
Going by SKILL.md and its folder, Excalidraw Diagrams needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Excalidraw Diagrams access the network?
SKILL.md names 2 domains. As links in the text: excalidraw-mcp-app.vercel.app and github.com. This is read from the text; nothing was executed.
Is Excalidraw Diagrams safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Excalidraw Diagrams use?
Excalidraw Diagrams is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Excalidraw Diagrams use?
About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Excalidraw Diagrams?
Skills that share tags, products or a category with Excalidraw Diagrams: Excalidraw Skill (yctimlin/mcp_excalidraw, 2.5k stars), Archscribe (lazypay/Archscribe, 359 stars), Drawio Diagram Builder (Will-hxw/drawio-diagram-builder, 413 stars) and Excalidraw Architect (BV-Venky/excalidraw-architect-mcp, 158 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Excalidraw Diagrams?
sammcj (a GitHub user) maintains it in sammcj/agentic-coding, which has 162 GitHub stars. The repository holds 64 skills in this directory. The repository was last updated on October 9, 2026.
Source: sammcj/agentic-coding on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.