{
 "schema_version": 1,
 "generated": "2026-10-19",
 "repo": "cathrynlavery/diagram-design",
 "name": "diagram-design",
 "owner": "cathrynlavery",
 "slug": "cathrynlavery-diagram-design",
 "github": "https://github.com/cathrynlavery/diagram-design",
 "what": "An agent skill that draws clean diagrams as a single HTML and SVG file in your brand.",
 "why": "+7,901 stars this week, 58k total",
 "language": "HTML",
 "requirements": [
  "An Agent Skills compatible host such as Claude Code, Codex, Cursor, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf or Amp",
  "Node.js for the npx install command",
  "A browser to open the generated HTML file",
  "Optional: a public website URL for brand onboarding"
 ],
 "audience_note": "Developers and non-designers who already work inside an AI coding agent and want presentable diagrams without opening a drawing app or settling for default Mermaid output.",
 "risk": "none",
 "section": "weekly",
 "weekly_rank": 8,
 "category": "Content & Creative",
 "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/",
 "use_case_count": 8,
 "use_cases": [
  {
   "id": "cathrynlavery-diagram-design--architecture-diagram-for-readme",
   "title": "Draw an architecture diagram for your README without a design tool",
   "best": true,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/architecture-diagram-for-readme/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/architecture-diagram-for-readme.json"
  },
  {
   "id": "cathrynlavery-diagram-design--review-plan-diagram-before-coding",
   "title": "Draw the plan before your agent writes the code",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/review-plan-diagram-before-coding/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/review-plan-diagram-before-coding.json"
  },
  {
   "id": "cathrynlavery-diagram-design--visualize-your-agent-setup",
   "title": "Draw your agent setup: tools, data flows and approval points",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/visualize-your-agent-setup/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/visualize-your-agent-setup.json"
  },
  {
   "id": "cathrynlavery-diagram-design--map-unfamiliar-repo-for-review",
   "title": "Map an unfamiliar repo's components before you change it",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/map-unfamiliar-repo-for-review/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/map-unfamiliar-repo-for-review.json"
  },
  {
   "id": "cathrynlavery-diagram-design--turn-repo-into-explainer-video-with-diagram",
   "title": "Pair diagrams with a video skill to explain a GitHub repo",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/turn-repo-into-explainer-video-with-diagram/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/turn-repo-into-explainer-video-with-diagram.json"
  },
  {
   "id": "cathrynlavery-diagram-design--match-diagrams-to-your-brand",
   "title": "Make every diagram match your website's colors and fonts",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/match-diagrams-to-your-brand/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/match-diagrams-to-your-brand.json"
  },
  {
   "id": "cathrynlavery-diagram-design--replace-mermaid-diagrams-with-cleaner-ones",
   "title": "Redraw an old Mermaid or draw.io diagram in a cleaner style",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/replace-mermaid-diagrams-with-cleaner-ones/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/replace-mermaid-diagrams-with-cleaner-ones.json"
  },
  {
   "id": "cathrynlavery-diagram-design--add-motion-to-ordered-explanations",
   "title": "Add light motion to a diagram that explains steps in order",
   "best": false,
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/add-motion-to-ordered-explanations/",
   "json": "https://dedupedai.com/use-cases/u/cathrynlavery-diagram-design/add-motion-to-ordered-explanations.json"
  }
 ],
 "disclaimer": "Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk."
}