Diagram Design is an open-source agent skill that has your coding agent draw diagrams as a single self-contained HTML + inline SVG file instead of Mermaid output. You ask in plain words, for example an architecture diagram of an app or a quadrant of projects by impact and effort, and the agent picks a diagram type, states its plan and writes one .html file you can open by double-clicking. The project positions itself as editorial diagrams "your designer won't hate": no shadows and no rounded-box defaults.
It covers more than 40 diagram types, from architecture and sequence diagrams to quadrants, Sankey charts and heatmaps. Brand onboarding pulls a website's palette and fonts so later diagrams match it, and saved profiles let different client projects use different brands. Existing draw.io, Mermaid and Excalidraw diagrams can be imported and redrawn, output can be exported to PNG (via Playwright) or SVG, and optional motion modes add reveal, step or loop animation while the default output stays static and script-free.
It installs with npx skills add cathrynlavery/diagram-design on any host that reads Agent Skills, including Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp, and through plugin marketplaces for Claude Code, Codex, Copilot and Factory Droid, or as a Pi package. The marketplace packages add commands such as /export-diagram, /import-mermaid, /profile and /doctor.
Diagram Design is free and MIT-licensed. Its privacy policy says it has no server, no accounts, no analytics and no telemetry, and the publisher (LittleMight) receives no data from its use; your diagram content stays in your agent session and with your model provider. Generated diagrams load their fonts from Google Fonts when opened, which the policy discloses.
