Leaderboard/Diagramming/excalidraw-diagram-skill
Last commit on March 1, 2026·Created on March 1, 2026

coleam00/excalidraw-diagram-skill

Makes research-backed diagrams that argue visually.
Combined rank
#87
across all skills
In Diagramming
#5
category rank
Stars
4.8k
+1.1% in last 7d
Forks
547
+1.1% in last 7d
Watchers
28
+3.7% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill turns technical research into Excalidraw diagrams that show real data, not just labels. It enforces a design process—assess depth, map concepts to visual patterns, include evidence artifacts like code snippets and event names, and render each diagram to verify it before sharing. It helps architects, technical educators, and documentation engineers produce diagrams that teach as clearly as they display.

WHO IT'S FOR
Technical Educators
create educational diagrams for teaching
Software Architects & System Designers
visualize architectures with real specs
Technical Documentation Specialists
produce diagrams with evidence artifacts
AI-Assisted Development Teams
generate diagrams via AI coding assistants
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

I’m using

Claude Code or OpenCode with manual renderer setup

Installs: Complete Excalidraw Diagram Skill repository, installed for the current project at .claude/skills/excalidraw-diagram, with its included renderer configured manually. · Claude Code, OpenCode

Before you start
  • Git, for the documented clone command
  • uv installed and available, as required by the documented renderer setup commands
  • A project used with Claude Code or OpenCode that reads skills from .claude/skills/

Run from: Project root containing the .claude directory

  1. From the project root, clone the repository and copy the cloned repository into the project's .claude/skills/excalidraw-diagram directory.

    git clone https://github.com/coleam00/excalidraw-diagram-skill.git
    cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
  2. From the project root, enter the installed skill's references directory, synchronize its dependencies with uv, and install Chromium for Playwright.

    cd .claude/skills/excalidraw-diagram/references
    uv sync
    uv run playwright install chromium
SKILL.md · Checked Sep 18, 2026README.md · Checked Sep 18, 2026

Give it something to do.

Suggested first task

Create a simple conceptual Excalidraw diagram

Uses excalidraw-diagram

  • A short description replacing [workflow, mental model, or concept]
  • Optional audience or context
  • Optional brand colors configured in references/color-palette.md
Use the excalidraw-diagram skill to create a simple conceptual Excalidraw diagram that explains [workflow, mental model, or concept]. Keep it appropriate for an audience that does not need technical specifics, and use the skill's configured color palette.
SKILL.md · Checked Sep 18, 2026README.md · Checked Sep 18, 2026