{
  "markdown": "# Excalidraw Diagram Skill\n\nA coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language descriptions. Not just boxes-and-arrows - diagrams that **argue visually**.\n\nCompatible with any coding agent that supports skills. For agents that read from `.claude/skills/` (like [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [OpenCode](https://github.com/nicepkg/OpenCode)), just drop it in and go.\n\n## What Makes This Different\n\n- **Diagrams that argue, not display.** Every shape/group of shapes mirrors the concept it represents — fan-outs for one-to-many, timelines for sequences, convergence for aggregation. No uniform card grids.\n- **Evidence artifacts.** As an example, technical diagrams include real code snippets and actual JSON payloads.\n- **Built-in visual validation.** A Playwright-based render pipeline lets the agent see its own output, catch layout issues (overlapping text, misaligned arrows, unbalanced spacing), and fix them in a loop before delivering.\n- **Brand-customizable.** All colors and brand styles live in a single file (`references/color-palette.md`). Swap it out and every diagram follows your palette.\n\n## Installation\n\nClone or download this repo, then copy it into your project's `.claude/skills/` directory:\n\n```bash\ngit clone https://github.com/coleam00/excalidraw-diagram-skill.git\ncp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram\n```\n\n## Setup\n\nThe skill includes a render pipeline that lets the agent visually validate its diagrams. There are two ways to set it up:\n\n**Option A: Ask your coding agent (easiest)**\n\nJust tell your agent: *\"Set up the Excalidraw diagram skill renderer by following the instructions in SKILL.md.\"* It will run the commands for you.\n\n**Option B: Manual**\n\n```bash\ncd .claude/skills/excalidraw-diagram/references\nuv sync\nuv run playwright install chromium\n```\n\n## Usage\n\nAsk your coding agent to create a diagram:\n\n> \"Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI\"\n\nThe skill handles the rest — concept mapping, layout, JSON generation, rendering, and visual validation.\n\n## Customize Colors\n\nEdit `references/color-palette.md` to match your brand. Everything else in the skill is universal design methodology.\n\n## File Structure\n\n```\nexcalidraw-diagram/\n  SKILL.md                          # Design methodology + workflow\n  references/\n    color-palette.md                # Brand colors (edit this to customize)\n    element-templates.md            # JSON templates for each element type\n    json-schema.md                  # Excalidraw JSON format reference\n    render_excalidraw.py            # Render .excalidraw to PNG\n    render_template.html            # Browser template for rendering\n    pyproject.toml                  # Python dependencies (playwright)\n```\n",
  "bytes": 2868,
  "sha": "9b51f93c50f942044f041db3b2f59153d5230d848622cb58db04755305438817",
  "repo_slug": "coleam00/excalidraw-diagram-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_coleam00_excalidraw_diagram_skill_excali_2aebba29/readme"
}