PlugWiki

excalidraw-diagram Skill (coleam00) for Claude Code: What It Does and How to Install It

Makes Claude write Excalidraw diagram files that show relationships visually, then render and fix them.

Installs
8.6K
on skills.sh
Stars
5.2K
on GitHub
Updated
Mar 2026
last commit

Ask for a diagram of a workflow, architecture or concept. Claude plans the visual structure first, writes the .excalidraw JSON one section at a time, renders it to a PNG, looks at the picture and fixes problems. The SKILL.md calls this making the diagram "argue" instead of just display boxes.

The render step needs one-time setup: uv, Python 3.11 or newer, and a Chromium download through Playwright. All colors live in references/color-palette.md, so you can swap the palette to match your brand.

Good for

  • Developers explaining architectures, protocols and workflows
  • Authors of tutorials and videos who need diagrams with real code and data in them
  • Teams that want every diagram to follow one brand palette

Install excalidraw-diagram

Claude Code

  1. 1

    Copy this prompt.

    Install the excalidraw-diagram skill in Claude Code. Run this command:

git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires git.

Pick one install route, then run the renderer setup. The README clone command puts the skill in .claude/skills/excalidraw-diagram; the setup step needs uv and Python 3.11 or newer (pyproject.toml) and downloads Chromium through Playwright. The README says to copy the repo as-is, so the skills folder holds the whole repo including README.md. The README names Claude Code and OpenCode and says any coding agent that supports skills works. There is no Claude app upload route because rendering runs Python and a local browser.

From the project README. Source.

What's in the skill

When it loads

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.

Sections in SKILL.md

  1. Customization
  2. Core Philosophy
  3. Depth Assessment (Do This First)
  4. Simple/Conceptual Diagrams
  5. Comprehensive/Technical Diagrams
  6. Research Mandate (For Technical Diagrams)
  7. Evidence Artifacts
  8. Multi-Zoom Architecture
  9. Level 1: Summary Flow
  10. Level 2: Section Boundaries
  11. Level 3: Detail Inside Sections
  12. Bad vs Good
  13. Simple vs Comprehensive (Know Which You Need)
  14. Container vs. Free-Floating Text
  15. Design Process (Do This BEFORE Generating JSON)
  16. Step 0: Assess Depth Required

Key facts

Author
coleam00 (repo owner)
License
No LICENSE file in the repo
Installs on skills.sh
8,640 (Nov 2, 2026)
GitHub stars
5,154 for the whole coleam00/excalidraw-diagram-skill repo (Nov 2, 2026)
Last repo commit
Mar 1, 2026
What it includes
9 files in the repo: SKILL.md, README.md, .gitignore and 6 under references/ (a Python render script, an HTML template, 3 guides, pyproject.toml)
skills.sh audits
Gen Agent Trust Hub: pass; Socket: pass; Snyk: warn (Nov 2, 2026)
Needs
uv, Python 3.11 or newer and Playwright Chromium for the render step

What it includes

  • Decides if the diagram is simple or comprehensive

    Technical diagrams must include evidence artifacts such as code snippets and JSON payloads.

    Depth assessment

  • Look up real specs, event names and formats before drawing

    For protocols, APIs and frameworks, SKILL.md says to look up real formats, event names and endpoints and to use actual terminology rather than placeholders. It does not say where to look.

    Research mandate

  • Understand, map concepts to patterns, vary them, sketch, generate

    The library has 9 visual patterns, such as fan-out, convergence, tree, cycle and side-by-side.

    Try: “Create an Excalidraw diagram of how our API streams events to the frontend”

    Design process, steps 0 to 6

  • Writes the .excalidraw file one section per edit

    SKILL.md says not to generate large diagrams in one response and not to write a Python generator script.

    Write · Build JSON in sections

  • Runs render_excalidraw.py, views the PNG, fixes, repeats

    Typically 2 to 4 rounds. The script uses Playwright with headless Chromium and writes a PNG next to the .excalidraw file.

    Runs code · Render and validate loop

  • uv sync and uv run playwright install chromium

    Run in the references folder. SKILL.md says it is needed if the render script is not set up yet.

    Runs code · First-time setup

  • Reads references/color-palette.md for every color choice

    Edit that file to match your brand.

    Read · Color palette

From the official docs

Permissions

Medium risk

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Setup downloads packages and a browser

    uv sync installs the Playwright package listed in pyproject.toml, and playwright install chromium downloads a browser. Run it only in a project you trust. github.com

  • The render page loads code from esm.sh

    render_template.html imports @excalidraw/excalidraw from esm.sh, so rendering reaches that host. github.com

  • Research step may read outside content

    For technical diagrams SKILL.md says to look up real specs and formats before drawing. It does not say where, so the agent may use whatever lookup tools it has. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details
Turning on read-onlyNo read-only mode. Use version control.
Talks toesm.sh (the render template imports @excalidraw/excalidraw)
Sign-in and keysSKILL.md names no account or key.
Scopes

  • Writes .excalidraw JSON and a PNG next to it

  • Runs uv sync and uv run playwright install chromium on first use

  • Runs render_excalidraw.py, which starts headless Chromium

Questions

What does the excalidraw-diagram skill do?

It makes your agent create .excalidraw files that use shape, layout and color to carry meaning. It then renders each file to a PNG, checks it and fixes defects such as clipped text and misrouted arrows.

How do I install it in Claude Code?

Use the install box at the top of this page. The README clones the repo and copies it to .claude/skills/excalidraw-diagram. Then run the renderer setup in the references folder.

What do I need for the render step?

uv, Python 3.11 or newer and the Playwright Chromium browser. The README says you can also ask your agent to set it up by following SKILL.md.

Does it work in the Claude app, Codex or OpenCode?

The README names Claude Code and OpenCode, and says any coding agent that supports skills works. There is no Claude app upload route, because rendering runs Python and a local browser.

Can I use my own colors?

Yes. The SKILL.md says all colors and brand styles are in references/color-palette.md. Edit that file and every diagram follows it.

Is it safe?

The setup downloads Python packages and a Chromium browser, and the render script runs a headless browser on your machine. The render page loads the Excalidraw library from esm.sh when it runs. Expect the skill to write .excalidraw and PNG files in your project. Our advice: read the setup commands first.

Information

updated Nov 2, 2026

Repository
coleam00/excalidraw-diagram-skill

coleam00/excalidraw-diagram-skillskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. excalidraw-diagram SKILL.md · github.com
  2. excalidraw-diagram-skill README · github.com
  3. pyproject.toml · github.com
  4. render_template.html · github.com
  5. render_excalidraw.py · github.com

Updated Nov 2, 2026.