Diagram Design Editorial

Generates self-contained HTML+SVG diagrams in 13 types (architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layer stack, Venn, pyramid) without Mermaid or build tools. It reads your website's color palette and font stack in 60 seconds, then writes brand-matched diagrams following strict design constraints: 4px grid alignment, single accent color on 1-2 focal nodes, three-font system (Instrument Serif for titles, Geist Sans for labels, Geist Mono for technical sublabels), and ruthless visual sparseness. Defaults to warm off-white and rust orange if you skip onboarding. Useful when you need editorial-quality diagrams that sit quietly in documentation without looking like engineer art.

Install to Claude Code

npx -y skills add aradotso/trending-skills --skill diagram-design-editorial --agent claude-code