diagram-design

A skill that produces editorial quality diagrams in self contained HTML and SVG for coding agents, matching a site's brand by reading its homepage.

The GitHub description promises 29 editorial diagram types for Claude Code with self contained HTML and SVG, no shadows, and no Mermaid slop. The README version 2.3 counts 27 visual types in a single agent skill that works with Claude Code, Codex, and Pi.

The author writes that every time they needed a diagram, an architecture sketch, or a flowchart, asking Claude produced a generic rounded box thing that looked nothing like the rest of the site. The choice was fighting Figma for 30 minutes or skipping the diagram, so they built a skill instead.

The skill reads a website and matches the brand in 60 seconds, mapping the site's colors and fonts onto tokens for paper, ink, accent, and typography. Contrast is checked automatically against WCAG AA, and the README notes the highest quality move is usually deletion, with the accent color reserved for one or two things.

Semantic patterns describe behavior separately from layout, so a queue, policy trace, or trust boundary can reuse the nearest existing type without growing the type count. Motion is optional and does not create another visual type; static HTML remains the default and ordinary output stays script free.

The skill redraws draw.io and Mermaid sources, reading .drawio files and fenced Mermaid blocks as text only. Diagrams can be exported to SVG or PNG, with the PNG path rasterizing via Playwright at 2x by default. The README promises the same content in a new design system at whatever format, size, and detail the destination needs.

• Source 1 · Project repository
• Source 2 · README