Agent skill

Excalidraw

by RedWoodOG in RedWoodOG/Hermes-Desktop

Create hand-drawn style diagrams using Excalidraw JSON format.

MITAuto-check passedDevelopment

Install Excalidraw

skills CLI
$ npx skills add RedWoodOG/Hermes-Desktop --skill excalidraw -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install RedWoodOG/Hermes-Desktop excalidraw --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/RedWoodOG/Hermes-Desktop.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/creative/excalidraw .claude/skills/excalidraw && rm -rf skills-src

Use ~/.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/

Facts

Skill name
excalidraw
GitHub stars
177
Used in
5 other repos
Token cost
~1.8k tokens
SKILL.md length
558 words
Files
5 (incl. scripts, references)
Skills in repo
62
Repo updated
First seen
Licence
MIT

At a glance

Create hand-drawn style diagrams using Excalidraw JSON format.

  • Works in 4 steps: Load this skill (you already did) → Write the elements JSON -- an array of… → Save the file using write_file to create… → …
  • Tasks that involve Diagrams
  • SKILL.md covers Workflow and Element Format Reference
  • Runs Python scripts from its folder; calls python and pip

What it does

Excalidraw is an agent skill from RedWoodOG/Hermes-Desktop. Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts and reference files (for example `references/colors.md`, `references/dark-mode.md` and `references/examples.md`).

It sits in Development, covering Diagrams. It works with Excalidraw. The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/excalidraw”

Requirements

  • Python 3

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Load this skill (you already did)
  2. Write the elements JSON -- an array of Excalidraw element objects
  3. Save the file using write_file to create a .excalidraw file
  4. Optionally upload for a shareable link using scripts/upload.py via terminal

What it can do on your machine

Read from SKILL.md and the folder at commit be46b39. 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:

    • python
    • pip

    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.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 loads about 1.8k tokens when it runs, and up to ~6.4k if it reads all its reference files. Until then it costs about 63 tokens; SKILL.md has 558 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~63
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.4k

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 RedWoodOG/Hermes-Desktop at commit be46b39, republished under its MIT licence (© RedWoodOG). 558 words, ~1,808 tokens.

Download SKILL.mdSave it as .claude/skills/excalidraw/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
excalidraw
description
Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.
version
1.0.0
author
Hermes Agent
license
MIT

Excalidraw Diagram Skill

Create diagrams by writing standard Excalidraw element JSON and saving as .excalidraw files. These files can be drag-and-dropped onto excalidraw.com for viewing and editing. No accounts, no API keys, no rendering libraries -- just JSON.

Workflow

  1. Load this skill (you already did)
  2. Write the elements JSON -- an array of Excalidraw element objects
  3. Save the file using write_file to create a .excalidraw file
  4. Optionally upload for a shareable link using scripts/upload.py via terminal
Saving a Diagram

Wrap your elements array in the standard .excalidraw envelope and save with write_file:

json
{
  "type": "excalidraw",
  "version": 2,
  "source": "hermes-agent",
  "elements": [ ...your elements array here... ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Save to any path, e.g. ~/diagrams/my_diagram.excalidraw.

Run the upload script (located in this skill's scripts/ directory) via terminal:

bash
python skills/diagramming/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw

This uploads to excalidraw.com (no account needed) and prints a shareable URL. Requires the cryptography pip package (pip install cryptography).


Element Format Reference

Required Fields (all elements)

type, id (unique string), x, y, width, height

Defaults (skip these -- they're applied automatically)
  • strokeColor: "#1e1e1e"
  • backgroundColor: "transparent"
  • fillStyle: "solid"
  • strokeWidth: 2
  • roughness: 1 (hand-drawn look)
  • opacity: 100

Canvas background is white.

Element Types

Rectangle:

json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }
  • roundness: { "type": 3 } for rounded corners
  • backgroundColor: "#a5d8ff", fillStyle: "solid" for filled

Ellipse:

json
{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

Diamond:

json
{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

Labeled shape (container binding) -- create a text element bound to the shape:

WARNING: Do NOT use "label": { "text": "..." } on shapes. This is NOT a valid Excalidraw property and will be silently ignored, producing blank shapes. You MUST use the container binding approach below.

The shape needs boundElements listing the text, and the text needs containerId pointing back:

json
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
  "boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "width": 190, "height": 25,
  "text": "Hello", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "r1", "originalText": "Hello", "autoResize": true }
  • Works on rectangle, ellipse, diamond
  • Text is auto-centered by Excalidraw when containerId is set
  • The text x/y/width/height are approximate -- Excalidraw recalculates them on load
  • originalText should match text
  • Always include fontFamily: 1 (Virgil/hand-drawn font)

Labeled arrow -- same container binding approach:

json
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow",
  "boundElements": [{ "id": "t_a1", "type": "text" }] },
{ "type": "text", "id": "t_a1", "x": 370, "y": 130, "width": 60, "height": 20,
  "text": "connects", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "a1", "originalText": "connects", "autoResize": true }

Standalone text (titles and annotations only -- no container):

json
{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20,
  "fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Hello", "autoResize": true }
  • x is the LEFT edge. To center at position cx: x = cx - (text.length * fontSize * 0.5) / 2
  • Do NOT rely on textAlign or width for positioning

Arrow:

json
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow" }
  • points: [dx, dy] offsets from element x, y
  • endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
  • strokeStyle: "solid" (default) | "dashed" | "dotted"
Show full SKILL.md (215 more words)Show less
Arrow Bindings (connect arrows to shapes)
json
{
  "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}

fixedPoint coordinates: top=[0.5,0], bottom=[0.5,1], left=[0,0.5], right=[1,0.5]

Drawing Order (z-order)
  • Array order = z-order (first = back, last = front)
  • Emit progressively: background zones → shape → its bound text → its arrows → next shape
  • BAD: all rectangles, then all texts, then all arrows
  • GOOD: bg_zone → shape1 → text_for_shape1 → arrow1 → arrow_label_text → shape2 → text_for_shape2 → ...
  • Always place the bound text element immediately after its container shape
Sizing Guidelines

Font sizes:

  • Minimum fontSize: 16 for body text, labels, descriptions
  • Minimum fontSize: 20 for titles and headings
  • Minimum fontSize: 14 for secondary annotations only (sparingly)
  • NEVER use fontSize below 14

Element sizes:

  • Minimum shape size: 120x60 for labeled rectangles/ellipses
  • Leave 20-30px gaps between elements minimum
  • Prefer fewer, larger elements over many tiny ones
Color Palette

See references/colors.md for full color tables. Quick reference:

UseFill ColorHex
Primary / InputLight Blue#a5d8ff
Success / OutputLight Green#b2f2bb
Warning / ExternalLight Orange#ffd8a8
Processing / SpecialLight Purple#d0bfff
Error / CriticalLight Red#ffc9c9
Notes / DecisionsLight Yellow#fff3bf
Storage / DataLight Teal#c3fae8
Tips
  • Use the color palette consistently across the diagram
  • Text contrast is CRITICAL -- never use light gray on white backgrounds. Minimum text color on white: #757575
  • Do NOT use emoji in text -- they don't render in Excalidraw's font
  • For dark mode diagrams, see references/dark-mode.md
  • For larger examples, see references/examples.md

© RedWoodOG, MIT. 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 4 other files (scripts, references) in skills/creative/excalidraw of RedWoodOG/Hermes-Desktop.

  • SKILL.md
  • references/colors.md
  • references/dark-mode.md
  • references/examples.md
  • scripts/upload.py

Open the folder on GitHubat commit be46b39

Used in 5 other repositories

We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in RedWoodOG/Hermes-Desktop, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Excalidraw 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.

Excalidraw compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Excalidraw this skillRedWoodOG/Hermes-Desktop1775 repos~1.8kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design47k1 repos~7.5kAutomated safety check: PassMIT
Excalidraw Diagramcoleam00/excalidraw-diagram-skill5k2 repos~6.1kAutomated safety check: PassNone
Excalidraw Diagrambreferrari/obsidian-mind5k—~3.9kAutomated safety check: PassMIT
Excalidraw Skillyctimlin/mcp_excalidraw2.5k—~4.6kAutomated safety check: PassMIT
Lanshu Animated Architecture Diagramcclank/lanshu-animated-architecture-diagram994—~1.1kAutomated safety check: PassMIT

Similar skills

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    47k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed
  • Excalidraw Diagram

    coleam00/excalidraw-diagram-skill

    Create Excalidraw diagram JSON files that make visual arguments.

    5k GitHub starsUsed in 2 repos~6.1k tokens
    DevelopmentAuto-check passed
  • Excalidraw Diagram

    breferrari/obsidian-mind

    Generate Excalidraw diagrams from text content. An agent skill from breferrari/obsidian-mind.

    5k GitHub stars~3.9k tokensUpdated 3 days ago
    DevelopmentAuto-check passed
  • Excalidraw Skill

    yctimlin/mcp_excalidraw

    Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.

    2.5k GitHub stars~4.6k tokensUpdated 4 days ago
    DevelopmentAuto-check passed
  • Lanshu Animated Architecture Diagram

    cclank/lanshu-animated-architecture-diagram

    Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF style, with editable .excalidraw files, static PNG previews, and genuinely animated GIFs with moving flow…

    994 GitHub stars~1.1k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Excalidraw Diagram Studio

    tech-leads-club/agent-skills

    Generates Excalidraw diagram files from plain descriptions, choosing among flowcharts, mind maps, architecture, swimlane, class, sequence and ER diagrams.

    7k GitHub stars~3.6k tokensUpdated yesterday
    DevelopmentAuto-check passed

More from RedWoodOG/Hermes-Desktop

All 62 skills in this repo
  • Obliteratus

    RedWoodOG/Hermes-Desktop

    Remove refusal behaviors from open-weight LLMs using OBLITERATUS — mechanistic interpretability techniques (diff-in-means, SVD, whitened SVD, LEACE, SAE decomposition, etc.) to excise guardrails…

    177 GitHub starsUsed in 5 repos~3.8k tokens
    Auto-check passed
  • Ascii Video

    RedWoodOG/Hermes-Desktop

    Production pipeline for ASCII art video — any format. An agent skill from RedWoodOG/Hermes-Desktop.

    177 GitHub starsUsed in 2 repos~3.2k tokens
    Auto-check passed
  • Systematic Debugging

    RedWoodOG/Hermes-Desktop

    A skill your agent uses when encountering any bug, test failure, or unexpected behavior.

    177 GitHub starsUsed in 6 repos~2.6k tokens
    Auto-check passed
  • Test Driven Development

    RedWoodOG/Hermes-Desktop

    A skill your agent uses when implementing any feature or bugfix, before writing implementation code.

    177 GitHub starsUsed in 6 repos~2.4k tokens
    Auto-check passed
  • Claude Code

    RedWoodOG/Hermes-Desktop

    Delegate coding tasks to Claude Code (Anthropic's CLI agent).

    177 GitHub starsUsed in 4 repos~784 tokens
    Auto-check passed
  • Google Workspace

    RedWoodOG/Hermes-Desktop

    Gmail, Calendar, Drive, Contacts, Sheets, and Docs integration via Python.

    177 GitHub stars~2.1k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Excalidraw

What does Excalidraw do?

Create hand-drawn style diagrams using Excalidraw JSON format. Excalidraw is an agent skill from RedWoodOG/Hermes-Desktop. Create hand-drawn style diagrams using Excalidraw JSON format.

When should I use Excalidraw?

Excalidraw fits situations like: tasks that involve Diagrams.

How do I install Excalidraw in Claude Code?

Run `npx skills add RedWoodOG/Hermes-Desktop --skill excalidraw -a claude-code`. Or copy the skill folder (skills/creative/excalidraw in RedWoodOG/Hermes-Desktop) into .claude/skills/excalidraw in your project. Claude Code loads it when a task matches its description.

How do I install Excalidraw in Codex?

Run `npx skills add RedWoodOG/Hermes-Desktop --skill excalidraw -a codex`. Or copy the skill folder (skills/creative/excalidraw in RedWoodOG/Hermes-Desktop) into .agents/skills/excalidraw in your project. Codex loads it when a task matches its description.

Can I use Excalidraw 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 RedWoodOG/Hermes-Desktop --skill excalidraw -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, .gemini/skills/excalidraw, .github/skills/excalidraw and .opencode/skills/excalidraw in your project.

What does Excalidraw need to run?

Going by SKILL.md and its folder, Excalidraw needs Python for the scripts in its folder and the command-line tools its instructions call (python and pip). Our summary lists: Python 3.

Does Excalidraw access the network?

SKILL.md names 1 domain. As links in the text: excalidraw.com. This is read from the text; nothing was executed.

Is Excalidraw 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 use?

Excalidraw is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Excalidraw use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.6k tokens, read only when the agent opens those files.

What are the alternatives to Excalidraw?

Skills that share tags, products or a category with Excalidraw: Diagram Design (cathrynlavery/diagram-design, 47k stars), Excalidraw Diagram (coleam00/excalidraw-diagram-skill, 5k stars), Excalidraw Diagram (breferrari/obsidian-mind, 5k stars) and Excalidraw Skill (yctimlin/mcp_excalidraw, 2.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Excalidraw?

RedWoodOG (a GitHub user) maintains it in RedWoodOG/Hermes-Desktop, which has 177 GitHub stars. The repository holds 62 skills in this directory. The repository was last updated on May 30, 2026.

Source: RedWoodOG/Hermes-Desktop on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.