Excalidraw Diagram Skill
A skill that builds Excalidraw diagrams from a description and checks their look with a Playwright render
- 5,133 ★ on the repository
- Last commit
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/excalidraw-diagram-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The renderer runs a Python script and Chromium
This is third-party code. Review the repository files before installing.
What it does
The skill generates Excalidraw JSON files where shapes mirror meaning: fan-outs for one-to-many, timelines for sequences. Technical diagrams include real code snippets and JSON payloads. A built-in Playwright renderer lets the agent see its output, catch overlaps and misalignment and fix them before delivering. Brand colors and styles live in one file, references/color-palette.md.
Who it is for. Developers and technical content authors who need clear process and architecture diagrams.
Good fit when
- You need to explain a data flow or protocol visually
- You are preparing illustrations for an article or talk
- You want diagrams in brand colors
Not a fit when
- You need strict UML or ER diagrams with official icons
- Diagrams must live as text in Markdown
Example request
Create an Excalidraw diagram showing how the AG-UI protocol streams events from an agent to a frontendLimitations
Visual validation needs the renderer set up: uv sync and Chromium via Playwright. Installation is manual only, by copying into .claude/skills.
How to disable. Delete the .claude/skills/excalidraw-diagram folder.
FAQ
How do I change diagram colors?
Edit references/color-palette.md, the rest of the skill is universal.
Discussion
No questions or reviews yet.
Related
SkillsA skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
Three skills that turn text into Excalidraw diagrams, Mermaid charts and Obsidian Canvas boards
Excalidraw MCP Server
Excalidraw MCP Server, CLI & Agent Skill
A live Excalidraw canvas for the agent: creates, edits and exports diagrams over MCP or CLI, sees its own work via screenshots and saves .excalidraw files into
README in short
A short README for an Excalidraw diagram skill compatible with agents reading .claude/skills, such as Claude Code and OpenCode. It covers copy-based installation, two renderer setup options and an example prompt. The file structure with element templates and JSON schema references is listed.
README badge
Original SKILL.md
--- name: excalidraw-diagram description: Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts. --- # Excalidraw Diagram Creator Generate `.excalidraw` JSON files that **argue visually**, not just display information. **Setup:** If the user asks you to set up this skill (renderer, dependencies, etc.), see `README.md` for instructions. ## Customization **All colors and brand-specific styles live in one file:** `references/color-palette.md`. Read it before generating any diagram and use it as the single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything. To make this skill produce diagrams in your own brand style, edit `color-palette.md`. Everything else in this file is universal design methodology and Excalidraw best practices. --- ## Core Philosophy **Diagrams should ARGUE, not DISPLAY.** A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning. **The Isomorphism Test**: If you removed all text, would the structure alone communicate the concept? If not, redesign. **The Education Test**: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples. --- ## Depth Assessment (Do This First) Before designing, determine what level of detail this diagram needs: ### Simple/Conceptual Diagrams Use abstract shapes when: - Explaining a mental model or philosophy - The audience doesn't need technical specifics - The concept IS the abstraction (e.g., "separation of concerns") ### Comprehensive/Technical Diagrams Use concrete examples when: - Diagramming a real system, protocol, or architecture - The diagram will be used to teach or explain (e.g., YouTube video) - The audience needs to understand what things actually look like - You're showing how multiple technologies integrate **For technical diagrams, you MUST include evidence artifacts** (see below). --- ## Research Mandate (For Technical Diagrams) **Before drawing anything technical, research the actual specifications.** If you're diagramming a protocol, API, or framework: 1. Look up the actual JSON/data formats 2. Find the real event names, method names, or API endpoints 3. Understand how the pieces actually connect