A Claude and coding-agent skill that turns a short JSON spec into animated, explorable diagrams exportable as SVG, PNG, GIF or MP4.
coleam00/excalidraw-diagram-skill
A coding agent skill that lets Claude Code and similar agents generate Excalidraw diagrams from natural language descriptions.
Open-source alternative to:Lucidchart
- Stars
- 5,043
- Forks
- 584
- Open issues
- 34
- Last commit
- 8 months ago
What is it?
This skill gives coding agents such as Claude Code and OpenCode the ability to produce Excalidraw diagrams from plain-language descriptions. The agent handles concept mapping, layout, JSON generation and rendering, so a user can ask for a diagram of a system or protocol and receive an editable Excalidraw file.
The project focuses on diagram structure rather than simple boxes and arrows. Shapes are arranged to reflect the concept, such as fan-outs for one-to-many relationships, timelines for sequences and convergence for aggregation. Technical diagrams can include code snippets and sample JSON payloads.
A Playwright-based render pipeline lets the agent view its own output, check for overlapping text or misaligned arrows, and iterate before delivering. Colors and brand styles are defined in a single palette file that can be replaced.
Key features
- 01Generates Excalidraw diagrams from natural language descriptions.
- 02Arranges shapes to match the concept, such as fan-outs, timelines and convergence.
- 03Renders output with Playwright so the agent can check and fix layout issues.
- 04Includes code snippets and JSON payload examples in technical diagrams.
- 05Brand colors are centralized in one palette file for easy customization.
Use cases
- Documenting a system architecture or data flow inside a coding agent session.
- Illustrating an API or protocol sequence for a design doc.
- Creating on-brand diagrams by editing the color palette file.
Quick start
- 1
Clone the repository
git clone https://github.com/coleam00/excalidraw-diagram-skill.git - 2
Copy the skill into your project's skills directory
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram - 3
Install renderer dependencies and Chromium
cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium - 4
Ask your coding agent to create a diagram
Things to know
- The README does not state a license, so usage rights are unclear.
- The render pipeline requires uv and Playwright with Chromium installed.
Topics
FAQ
- What is excalidraw-diagram-skill?
- A coding agent skill that lets Claude Code and similar agents generate Excalidraw diagrams from natural language descriptions. This skill gives coding agents such as Claude Code and OpenCode the ability to produce Excalidraw diagrams from plain-language descriptions. The agent handles concept mapping, layout, JSON generation and rendering, so a user can ask for a diagram of a system or protocol and receive an editable Excalidraw file.
- Is excalidraw-diagram-skill free to use? What license does it have?
- excalidraw-diagram-skill has no declared license. Its code is public, but without a license you have no explicit permission to reuse it; ask the author before relying on it.
- Is excalidraw-diagram-skill still maintained?
- No commits for 6+ months. The last commit to excalidraw-diagram-skill was on Mar 1, 2026.
- What can I use excalidraw-diagram-skill for?
- Documenting a system architecture or data flow inside a coding agent session. Illustrating an API or protocol sequence for a design doc. Creating on-brand diagrams by editing the color palette file.
- How do I install excalidraw-diagram-skill?
- Clone the repository: git clone https://github.com/coleam00/excalidraw-diagram-skill.git Copy the skill into your project's skills directory: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram Install renderer dependencies and Chromium: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium Ask your coding agent to create a diagram
- Where can I get excalidraw-diagram-skill?
- The source code and installation instructions are on GitHub: https://github.com/coleam00/excalidraw-diagram-skill
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
An agent skill that turns ideas, plans, or codebases into interactive HTML diagrams for Claude Code, Codex, Cursor and OpenCode.
An agent skill that makes coding agents render diagrams, diff reviews, plans and tables as styled HTML pages instead of ASCII art.
An Agent Skill that lets coding agents write and run custom Playwright browser automation scripts for tests and multi-step web tasks.
An agent skill and zero-dependency linter that makes coding agents draw hand-placed SVG diagrams in one consistent house style.
An agent skill that makes editorial diagrams as one self-contained HTML + SVG file, with 45 diagram types and brand matching.