excalidraw-diagram-skill
Skill to give Claude Code (and any coding agent) the ability to generate beautiful and practical Excalidraw diagrams.
An agent skill that enables coding assistants like Claude Code and OpenCode to generate Excalidraw diagrams from natural language prompts. Unlike generic diagram tools, it creates conceptual visualizations that mirror the structure of ideas—using visual metaphors like fan-outs for one-to-many relationships and timelines for sequences. The skill includes a Playwright-based rendering pipeline that lets agents visually validate their own diagrams, catching layout issues and iterating automatically before delivery. Brand colors and styles are fully customizable through a single configuration file.
Key Features
Use Cases
- 01Generating architecture diagrams that illustrate system component relationships
- 02Creating protocol flow diagrams showing event streaming between services
- 03Visualizing data structures and their relationships in technical documentation
- 04Producing branded diagrams that follow company color schemes and visual identity
- 05Building educational diagrams that use visual metaphors to explain abstract concepts
- 06Documenting API workflows with actual code examples embedded in diagrams
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
excalidraw-diagram-skill — FAQ
What is the Excalidraw diagram skill?+
It's an agent skill that allows coding assistants like Claude Code and OpenCode to generate Excalidraw diagrams from natural language descriptions. The skill includes visual validation so agents can review and fix their own diagram layouts before delivering the final output.
How do I install the Excalidraw diagram skill for Claude Code?+
Clone or download the repository, then copy the excalidraw-diagram-skill folder into your project's .claude/skills/ directory. After that, run the setup commands manually or ask your coding agent to set up the renderer by following the SKILL.md instructions.
Which AI coding agents work with this skill?+
It works with any coding agent that supports skills and reads from the .claude/skills/ directory, including Claude Code and OpenCode. The skill is designed to be compatible with any agent that follows this convention.
What are the prerequisites for using this skill?+
You need Python with UV (package manager) and Playwright with Chromium installed for the visual validation pipeline. The skill's pyproject.toml includes all required dependencies, and setup can be handled by your coding agent or run manually.
Is the Excalidraw diagram skill free to use?+
Yes, the skill is open source and available on GitHub at no cost. You only need the standard dependencies (Python, UV, Playwright) which are also free.
How do I customize diagram colors and branding?+
Edit the references/color-palette.md file to define your brand colors and visual styles. All diagrams generated by the skill will automatically follow the palette defined in this single configuration file.
How do I install excalidraw-diagram-skill?+
Open the source repository on GitHub and follow its README. excalidraw-diagram-skill is a skill — MCP Agents Market links you directly to the official repo.
Is excalidraw-diagram-skill free?+
excalidraw-diagram-skill is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.