{"data":{"slug":"diagram-design","name":"Diagram Design","tagline":"MIT agent skill for editorial HTML/SVG diagrams — 40+ layout types, brand-matched, no server","category":"design","categoryName":"Design","url":"https://diagramdesign.dev","github":"https://github.com/cathrynlavery/diagram-design","pricing":"open-source","hook":"Diagram Design is an Agent Skill that makes your coding agent draw clean, editorial-looking diagrams as self-contained HTML + SVG instead of the default rounded-box Mermaid look: architecture, sequence, state machines, ER, swimlanes, Sankey, Wardley maps, Gantt, schema and more, each in light, dark and full-editorial variants.","whatsGood":"MIT (cathrynlavery/diagram-design). Free path: install as a plugin in Claude Code, Copilot CLI or Droid, pi install it, or import the skill folder into any Agent Skills host such as Kiro or Codex. Output opens straight in a browser with no build step or JavaScript. It can pull brand colors and fonts from a site you name, and redraw existing draw.io, Mermaid or Excalidraw sources. Privacy policy says no server, accounts, analytics or telemetry. Browse every type in the live gallery before installing. ★~44k.","theCatch":"It is instructions plus templates, so quality depends on the model running it, and a weak model still produces weak layouts. The look is deliberately opinionated (minimal, single accent color); if you want hand-drawn or diagrams-as-code you edit and diff, Excalidraw or D2 fit better. Generated files load fonts from Google Fonts unless you strip the link. Brand onboarding fetches the website you point it at.","verdict":"Install this if your agent writes docs or READMEs — free, local, and it makes agent-drawn diagrams look designed; just know it is a skill, not a renderer.","addedAt":"2026-10-07","featured":false,"domain":"Design","subSpecialty":"UI","subcategory":"UI","tags":["self-host","permissive","coding-agents","skills","active","fast-stars"],"capabilities":[],"surfaces":["Self-host"],"ecosystem":["Browser"],"licenseModel":"OSS/MIT","githubStars":57876,"starsPerWeek":2171,"access":"free","archived":false,"repo":{"createdAt":"2026-04-16","pushedAt":"2026-10-16","license":"MIT","archived":false,"checkedAt":"2026-10-19"}},"related":[{"slug":"tailwindcss","name":"Tailwind CSS","tagline":"Utility-first CSS that developers love"},{"slug":"shadcn-ui","name":"shadcn/ui","tagline":"Copy-paste components built on Radix"},{"slug":"radix-ui","name":"Radix UI","tagline":"Unstyled, accessible React components"},{"slug":"framer-motion","name":"Framer Motion","tagline":"Production-ready React animations"},{"slug":"figma","name":"Figma","tagline":"Collaborative design tool in the browser"}],"links":{"self":"/api/gems/diagram-design","html":"/gems/diagram-design","markdown":"/gems/diagram-design.md","category":"/api/gems?category=design","categoryPage":"/stacks/design"}}