What problem does it solve? Creating technical diagrams that actually communicate structure and meaning is hard — most generated diagrams end up as uniform boxes-and-arrows that display labels without teaching anything. This Skill produces Excalidraw diagrams whose visual structure mirrors the concepts they represent, with built-in render-and-validate loops to catch layout defects. ## Core Features & Use Cases - Concept-driven visual patterns: Maps each concept to a matching visual pattern (fan-out, convergence, timeline, tree, cycle) so the diagram's shape argues its meaning rather than just displaying text. - Evidence artifacts for technical diagrams: Embeds real code snippets, JSON payloads, and actual event names from specs so diagrams educate viewers with concrete detail. - Render-and-validate loop: A Playwright-based pipeline renders the .excalidraw JSON to PNG so the agent can visually inspect output and fix overlaps, clipping, and spacing issues iteratively. - Brand customization: All colors live in a single color-palette.md file that can be swapped to match any brand style. - Use Case: Ask your agent to diagram how a streaming protocol delivers events from backend to frontend, and receive a rendered, validated Excalidraw file showing real event names, section groupings, and code snippets. ## Quick Start Ask your coding agent to create an Excalidraw diagram showing how your system architecture or workflow operates, and it will generate, render, and visually validate the diagram.
