Descriptions:
Cole Medin demonstrates a packaged workflow for generating Excalidraw diagrams using Claude Code or any compatible coding agent. The system centers on a reusable “skill” — a structured instruction set stored in Claude Code’s `.claude/skills` directory — that teaches the agent to reason visually rather than defaulting to generic block layouts. Setup involves cloning a GitHub repository and dropping the skill files into place; from there, any input (a script, a PDF, a code file, or a plain idea) can be turned into a diagram with a single prompt.
The standout feature is a self-validation loop: a Python rendering script converts the agent’s Excalidraw JSON output into a PNG screenshot, which the agent then inspects and critiques before iterating. Medin shows real before-and-after versions of a meta-diagram explaining the workflow itself, illustrating how two or three directed follow-ups refine arrow placement, color, and information density. Finished diagrams render for free at Excalidraw.com or inside Obsidian via the Excalidraw plugin.
Medin also walks through the design philosophy baked into the skill prompt, including two core questions the agent must ask itself: “Does the visual structure mirror the concept’s behavior?” and “Could someone learn something concrete from this diagram?” The video covers color palette customization for brand consistency and explains why the LLM’s sheer volume of micro-decisions — every color, shape, position, and label — makes iteration inevitable but manageable with this scaffold in place.
📺 Source: Cole Medin · Published March 02, 2026
🏷️ Format: Tutorial Demo
