cathrynlavery/diagram-design

What it does

A diagram design skill for coding agents like Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. It makes agents output editorial-quality diagrams instead of generic rounded boxes or Mermaid slop, delivered as self-contained HTML + SVG with no shadows and no build step.

What's inside

The repo ships skill definitions and templates for 42 diagram types, covering architecture, flowcharts, flywheels, Sankey, fishbone, Wardley maps, kanban, user journeys, UML class diagrams, and database schemas. Each type comes in three static variants — minimal light, minimal dark, and full-editorial — plus screenshots and a project site.

Tech stack

Built on HTML and SVG, with fully self-contained output requiring no JavaScript or external image dependencies. The skill runs in Agent Skills-compatible hosts and can redraw draw.io, Mermaid, or Excalidraw sources.

Use cases

• Developers using Claude Code, Codex, or similar agents for docs, blogs, or tech proposals
• Engineers needing brand-consistent architecture or flow diagrams without opening Figma
• Teams wanting to redraw old draw.io, Mermaid, or Excalidraw diagrams at higher quality
• Content creators who care about editorial, minimalist diagram aesthetics

Why it's trending

It hit #5 on GitHub Trending daily with 825 new stars today and 45,298 total. It nails the pain point of AI-generated diagrams looking ugly, replacing Mermaid cheapness with editorial-grade aesthetics.

Current chart placements