About explain-diagram
A skill that guides agents in explaining ideas with editable Excalidraw diagrams. It provides a workflow for choosing a diagram, checking its readability, and returning it with a brief explanation.
Key features
- 01Choose a diagram structure for the question
- 02Create diagrams with Excalidraw
- 03Check and correct rendered diagrams
- 04Return an editable diagram with context
Use cases
- 01Explain a process as a flow
- 02Show relationships among concepts
- 03Compare options visually
MCP support
The skill uses a bundled Excalidraw MCP server when available, calling `read_me` and `create_view`; without MCP, it can create native `.excalidraw` JSON for import.
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/explain-diagramin Claude Code to confirm it loaded.
Bundled filesreferences/excalidraw.md
Details
From the project READMEExplain with a diagram
Karpathy's premise: a diagram can be easier to understand than prose.
- Identify the question the reader needs to answer. Choose a flow, relationship, comparison, or sequence that makes the answer visible.
- Use Excalidraw. With the bundled MCP server, call
read_meonce, thencreate_viewwith a JSON array string of elements. Follow its current schema. - Give each shape one idea. Use short, concrete labels and explicit arrow directions. Label decisions and feedback loops. Use color only when it has meaning.
- Read the diagram as a newcomer. Check text size, overlap, arrow endpoints, and whether the main path is obvious. Correct the rendered result.
- Return the editable diagram and a brief explanation of how to read it.
Save an
.excalidrawfile when the host supports export; do not claim a file or share link exists until you have it.
If MCP is unavailable, create native .excalidraw JSON for import at
excalidraw.com. See the tool reference.
Use the fewest shapes that preserve the important relationships. Keep uncertainty visible. Create the requested artifact without turning the explanation into a report.