diagram-design

Diagram-design is an agent skill that makes your coding agent draw diagrams a designer wouldn't wince at. Ask in plain words for an architecture sketch, flowchart, sequence diagram, Sankey or Gantt chart, and it picks from more than 40 types and writes one self-contained HTML file with inline SVG. MIT licensed and free.

It's no longer Claude Code only. npx skills add cathrynlavery/diagram-design installs it into Cursor, Codex, Copilot, Gemini CLI, Cline and other skill-aware agents; plugin marketplaces add updates and slash commands. Point it at your website and it pulls your palette and fonts, checks contrast, and every diagram after that matches your brand. It also redraws draw.io, Mermaid and Excalidraw files and exports SVG or PNG.

Solo writers and technical bloggers: install it. Small teams: save a brand profile everyone uses. Larger teams with a design system: test it first, because the style is opinionated on purpose (one accent color, hairlines, no shadows).

The catch: the output is a finished picture, not a source file. Nothing to diff in a pull request, no canvas to drag, and the same prompt can lay out differently twice. For docs that change every sprint, its own README says Mermaid fits better.