cathrynlavery/diagram-design
Claude Code skill that draws 39 editorial diagram types as self-contained HTML/SVG.
A Claude Code (and Codex, Factory Droid, Pi) skill that generates architecture diagrams, flowcharts, Gantt charts, Sankeys, and 35 other layout types as plain self-contained HTML and SVG — no Figma, no Mermaid's default look, no build step. It reads your website to match your brand's colors in about 60 seconds, and can also redraw an existing draw.io or Mermaid diagram at a chosen size and detail level. Every type ships in three static variants that open directly in a browser.
What holds up
- +39 diagram types from one skill, versus hand-building each one in Figma
- +Self-contained HTML/SVG — no build step, no JS dependency, opens straight in a browser
- +Matches your site's brand colors automatically by reading the website, in about 60 seconds
Mind the limits
- −Only usable through a supported coding agent (Claude Code, Codex, Factory Droid, Pi), not standalone
- −Deliberately low-density output (target 4/10) — won't suit diagrams that need to pack in detail
Picked here? Add the badge
Put it on your site. It links back to this page. Free for every listed product.
<a href="https://stillworks.dev/products/p/cathrynlavery-diagram-design/"><img src="https://stillworks.dev/badge/cathrynlavery-diagram-design.svg" alt="Picked by StillWorks" width="230" height="54"></a>