#2828th of 31 in Skills, plugins and rules
diagram-design
Agent skill that generates editorial HTML/SVG diagrams in your site's style
Live demo ↗
(opens in a new tab)Website ↗
(opens in a new tab)Repository on GitHub ↗
(opens in a new tab)
- Stars
- 48.7k
- License
- MIT
- Last commit
- Oct 2026
- Language
- HTML
Overview
Diagram Design is an Agent Skill, installable as a plugin for Claude Code, Codex, GitHub Copilot, Factory Droid and Pi, that generates diagrams as self-contained HTML and SVG with no build step or JavaScript. It covers more than 40 diagram types, each in minimal light, minimal dark and full-editorial variants, and can match your brand by reading your website. It can also redraw draw.io, Mermaid or Excalidraw sources.
Who it is for: Developers and writers who want branded diagrams from an AI coding agent
Strengths
- Output is static HTML and SVG, openable in a browser with no build step
- Over 40 diagram types, each with light, dark and full-editorial variants
- Installs through marketplaces for Claude Code, Codex, Copilot, Droid and Pi
- Imports Mermaid and Excalidraw sources, with export and doctor commands
Weaknesses
- Needs an Agent Skills-compatible host; no standalone app or CLI generator
- Attribute-only comparisons are not drawn; the README says to use tables
- Standalone `npx skills` install does not auto-update and omits the command surfaces
- OpenCode has no marketplace package; updates mean replacing the copied directory
What it needs
- no GPU
Also in Skills, plugins and rules
See all 31| Rank | Project | Score |
|---|---|---|
| 1 | skillsAgent skills for planning, TDD, debugging and code review | 94 out of 100 |
| 2 | eccSkills, agents, hooks and rules that add a workflow to coding agents | 93 out of 100 |
| 3 | superpowersSkill library that enforces a plan-then-TDD workflow in coding agents | 89 out of 100 |
| #4 | ponytailPrompt skill that makes coding agents write less, safer code | 89 out of 100 |
| #5 | cavemanProxy and skill that cut token use in coding agents | 89 out of 100 |