Diagram Design

Diagram Design is a skill for Claude Code, Codex, and Pi that returns a diagram as one self-contained HTML file with inline SVG. Semantic patterns describe behavior apart from layout, so a queue, a policy trace, or a trust boundary reuses the nearest existing visual type instead of adding another one. Static output is the default, with optional motion for explanations that have an order. It also redraws draw.io or Mermaid sources at a format, size, and detail level you pick.

The taste rules live inside the skill rather than in a style guide beside it: the accent color is held back for the one or two things a reader should see first, target density is stated as 4 out of 10, and every node has to earn its place. The author wrote it after asking an assistant for architecture sketches and getting generic rounded boxes that matched nothing else on the site. MIT licensed.