AI Toolkit

Skills

Diagram Design

Create editorial diagrams as self-contained HTML and SVG files.

What it does

Guides an agent through choosing a diagram type and producing an editable diagram that follows your visual style.

  • HTML and SVG output
  • Architecture and process diagrams
  • Brand-aware diagram styling

Why use it

Explain architectures, workflows, and business processes with a reusable visual format.

Recent traction

GitHub Trending reported 3,863 stars gained over 7 days.

Source snapshot: 2026-10-25. This is a 7-day signal, not a 90-day ranking.

View popularity source (opens in a new tab)

Installation

  1. Run npx skills add cathrynlavery/diagram-design.

  2. Choose an Agent Skills-compatible host and restart its session.

  3. Describe the audience, relationships, and desired diagram, then inspect the generated HTML in a browser.

Official website / repository (opens in a new tab)