excali-diagram

excali-diagram is a skill for Claude Code, the AI coding assistant, that teaches it how to create diagrams in a format called Excalidraw. Excalidraw is a popular browser-based tool for drawing hand-drawn-style diagrams, and it stores diagrams as JSON files with a .excalidraw extension. This skill gives Claude Code a set of rules and templates so it can generate those files directly without the user needing to draw anything manually.

The core idea behind the skill is that a diagram should make an argument rather than just label things with boxes and arrows. The README includes a test for this: if you erased all the text from a diagram, would the structure of the shapes alone still communicate the concept? If not, the diagram should be redesigned. This philosophy is baked into the playbooks the skill uses for different diagram types.

The skill covers four categories of diagrams: flowcharts and approval flows, software architecture and data pipeline diagrams, event sequence and timeline diagrams, and hierarchy diagrams including mindmaps and entity-relationship charts. It responds to requests in both English and Vietnamese.

When invoked, the skill follows a loop: design the layout, write the Excalidraw JSON region by region, render it to a PNG image using a headless browser (Playwright with Chromium), look at the result, fix any problems, and repeat until the diagram looks right. The Python renderer script is included in the repository and requires a tool called uv to run.

Installation means copying the diagram/ folder into a Claude Code skills directory, either at the project level or for your user account globally. The repository includes worked examples for each diagram type as both .excalidraw source files and rendered PNG images. The project is Apache 2.0 licensed.