agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/excalidraw-diagram/SKILL.md

excalidraw-diagram

Skill32 starsChanged 6 months agoMITView on GitHub

Generate Excalidraw diagrams from natural language. Diagrams that "argue visually", with a built-in Playwright render-and-validate loop and a brand-customizable color palette. By coleam00.

51 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use mermaid-visualizer, obsidian-canvas-creator and 9 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • BCS1037Skill

    mermaid-visualizer

    Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.

    Also in 7 projects that use this

  • BCS1037Skill

    obsidian-canvas-creator

    Create Obsidian Canvas files from text content, supporting both MindMap and freeform layouts. Use this skill when users want to visualize content as an interactive canvas, create mind maps, or organize information spatially in Obsidian format.

    Also in 4 projects that use this

  • MicrosoftSkill

    rvap-brand

    Applies the RVAP (Real Value Acceleration Program) brand identity — colors, fonts, logo, and layout patterns — consistently to any GitHub Pages website. Use this skill whenever someone asks to brand, rebrand, apply RVAP/RVAS visual identity, make a site look RVAP, match the brand kit, or transform a GitHub Pages site's look and feel to match RVAP. Also trigger when the user shares an HTML/CSS/MkDocs site and says it should look consistent with other RVAP/RVAS materials, even if they don't explicitly say "brand".

    Also in 3 projects that use this

  • HK-hubSkill

    defuddle

    Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page.

    Also in 5 projects that use this

  • wangzhuofengSkill

    obsidian-bases

    Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.

    Also in 6 projects that use this

  • jykimSkill

    obsidian-cli

    Interact with Obsidian using the official CLI to read, search, create, and manage notes, daily notes, tasks, properties, and more. Use when the user wants to query or manipulate vault content via the obsidian command.

    Also in 5 projects that use this

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 45 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    License: no LICENSE file in the repository <!-- das:install:end -->

    line 53

“Common” is measured: kept by at least 6 in 10 of the 45 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

excalidraw-diagram

Catalogue stub — full skill: coleam00/excalidraw-diagram-skill

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed?
    • Global: f=~/.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as excalidraw-diagram, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/excalidraw-diagram ] && echo "global" || echo "project"

    Global:

    npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -g -y

    Project:

    npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: uv (Python) and Playwright Chromium for the mandatory render-and-validate loop (cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium); The skill hard-codes the project path .claude/skills/excalidraw-diagram/references, so install it at project scope (not -g) for the render step to work
  • License: no LICENSE file in the repository
<!-- das:install:end -->

Invoke after install

  • Skill name: excalidraw-diagram
  • Trigger phrases: "excalidraw diagram", "excalidraw", "diagram from description"

What it does

Generates .excalidraw JSON files from natural language descriptions. Diagrams are designed to "argue visually": shapes mirror the concept they represent (fan-outs for one-to-many, timelines for sequences) and include evidence artifacts such as real code snippets or payloads. A render-view-fix loop (Playwright renders the file to PNG, the agent looks at it and fixes layout problems) validates each diagram before delivery. All colors and brand styles live in references/color-palette.md, so editing that one file re-skins every diagram. Output is an editable .excalidraw file.

When NOT to use

  • Quick ideation sketches where no uv and Playwright toolchain is wanted — use hand-drawn-diagrams (lighter weight) or excalidraw-agents365
  • Wireframes of screens rather than concept diagrams — use wireframe-skill

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free