excalidraw-diagram-skill

Excalidraw Diagram Skill is a skill package for coding agents that generates Excalidraw diagrams from natural-language descriptions. It is designed for agents that load skills from a `.claude/skills/` directory, such as Claude Code and OpenCode, and can be copied into a project to enable diagram generation. The project emphasizes diagrams that "argue visually" rather than simply display information. According to the README, shapes and shape groups are chosen to mirror the concept being represented, such as fan-outs for one-to-many relationships, timelines for sequences, and convergence for aggregation, instead of uniform card grids. Technical diagrams can include real code snippets and JSON payloads as evidence artifacts. A notable feature is built-in visual validation. A Playwright-based render pipeline lets the agent view its own output, detect layout problems such as overlapping text, misaligned arrows, or unbalanced spacing, and iterate before delivering the final diagram. Colors and brand styling are centralized in `references/color-palette.md`, so replacing that file makes all diagrams follow a different palette. Installation involves cloning the repository and copying it into `.claude/skills/excalidraw-diagram`. Setup of the render pipeline can be delegated to the coding agent by pointing it at SKILL.md, or done manually with `uv sync` and `uv run playwright install chromium` inside the references directory. Usage is then as simple as asking the agent to create a diagram, for example one showing how the AG-UI protocol streams events from an AI agent to a frontend UI; the skill handles concept mapping, layout, JSON generation, rendering, and visual validation. The repository structure includes SKILL.md for design methodology and workflow, plus references containing the color palette, element templates, JSON schema documentation, a Python renderer for converting `.excalidraw` files to PNG, an HTML render template, and Python dependencies for Playwright.