Diagram Design

A skill for Claude Code, Codex, Factory Droid, Pi and other Agent Skills-compatible hosts that produces editorial-looking diagrams instead of generic rounded boxes: architecture, flowchart, sequence, state machine, ER model, timeline, swimlane, quadrant, Sankey, fishbone, Wardley map, kanban, user journey, UML class, database schema and more. Every type ships as self-contained HTML plus SVG in three variants — minimal light, minimal dark and full editorial — with no build step, no JavaScript and no external images. It reads your website to match your brand, keeps the accent color for the one or two things a reader should notice first, and can redraw existing draw.io or Mermaid sources at a chosen format, size and level of detail. Static output is the default; semantic patterns and optional motion are there for ordered, step-by-step explanations.