Skip to main content

Diagrams That Argue, Not Just Display

A coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language. Create visual arguments with evidence artifacts, render validation, and customizable brand styles.

Get StartedLearn the Philosophy
458 GitHub Stars
Open Source

Visual Arguments

Diagrams where shape mirrors meaning

Evidence Artifacts

Real code snippets and data examples

Visual Validation

Built-in render pipeline catches layout issues

Customizable Styles

Single-file brand color system

Quick Start

Get up and running with the Excalidraw Diagram Skill in minutes

1

Install the skill

Clone the repository and copy it into your project’s .claude/skills/ directory:
git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
The skill is now available to your coding agent.
2

Set up the render pipeline

Install dependencies for the visual validation pipeline:
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
You can also ask your coding agent to run these commands for you!
3

Create your first diagram

Ask your coding agent to create a diagram:
“Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI”
The skill handles concept mapping, layout, JSON generation, rendering, and visual validation automatically.
4

Customize colors (optional)

Edit references/color-palette.md to match your brand:
| Primary/Neutral | `#3b82f6` | `#1e3a5f` |
All diagrams will automatically use your custom color palette.

Core Features

Everything you need to create diagrams that teach and persuade

Visual Arguments

Learn the core philosophy: diagrams should argue visually, not just display information. Each shape mirrors the concept it represents.

Evidence Artifacts

Include real code snippets, JSON payloads, and concrete examples that prove accuracy and help viewers learn.

Pattern Library

Ready-to-use visual patterns for common structures: fan-out, convergence, tree, spiral, cloud, and assembly line.

Render & Validate

Built-in Playwright pipeline lets agents see their own output and fix layout issues before delivering.

Multi-Zoom Architecture

Create comprehensive diagrams that work at multiple levels: summary flow, section boundaries, and detailed evidence.

Brand Customization

Single-file color system makes it easy to match your brand. Everything else is universal design methodology.

Explore by Topic

Dive deeper into the methodology and technical details

Core Concepts

Master the philosophy of visual arguments, depth assessment, and evidence artifacts

Learn more

Design Methodology

Follow the design process, pattern library, and layout principles for professional diagrams

Explore methodology

Technical Reference

Complete reference for color palettes, element templates, and the Excalidraw JSON schema

View reference

Ready to Create Visual Arguments?

Install the skill and start generating diagrams that teach, persuade, and communicate complex ideas with visual clarity.

Get StartedView on GitHub

Build docs developers (and LLMs) love

Get started for freeTalk to us