mcpField
E
excalidraw-diagram

excalidraw-diagram

github.com/podoDesign & UI29222 installsUpdated 4d ago
Repository

About excalidraw-diagram

excalidraw-diagram is a skill that turns natural-language descriptions into editable Excalidraw diagrams. It uses a render-and-review loop to validate layouts before delivery.

Key features

  1. 01Generate editable .excalidraw files
  2. 02Create diagrams from descriptions
  3. 03Use shapes to express concepts
  4. 04Render and review layouts with Playwright
  5. 05Apply shared color palettes

Use cases

  1. 01Diagramming a process from a text description
  2. 02Creating concept diagrams with code or payload evidence
  3. 03Checking and adjusting diagram layouts before delivery

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill excalidraw-diagram

After installing, type/excalidraw-diagramin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

excalidraw-diagram

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

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

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

Comments

Markdown supported