Distinctive UI/UX implementation patterns for frontend work
Diagram Design
Skill39 editorial HTML/SVG diagram types for Claude Code and Codex
Clone or download it from github.com, then drop the folder into ~/.claude/skills/ (Claude Code) or your agent's skills directory.
Product badge
Share this product's name and rating in your README or on your website.
Updates may be delayed by image caching.
About Diagram Design
Editorial diagram Agent Skill with 39 visual types — architecture, sequence, Sankey, Wardley, kanban, user journey, UML class, and more — as self-contained HTML/SVG. No Mermaid slop, no Figma required.
Reads your site brand, keeps static HTML as the default, and can redraw draw.io, Mermaid, or Excalidraw sources at a chosen format and density.
No reviews yet
Used it? Write the first review.
Similar skills
Capture desktop, app windows, or pixel regions
Translate Figma into production code at 1:1 fidelity
ADHD-friendly skill that makes agents lead with the answer
Map Figma design components to code with Code Connect
Build Figma screens from code using design-system tokens