# cathrynlavery/diagram-design

> Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.

- GitHub: https://github.com/cathrynlavery/diagram-design
- Website: https://diagramdesign.dev
- Category: AI Coding Tools (https://ideas.asveas.com/c/ai-coding)
- Tags: agent-skills, claude-code, codex, data-visualization, diagrams, drawio, mermaid, svg, claude, charts, html
- Language: HTML · License: MIT
- Stars: 66,493 · Forks: 4,420 · Open issues: 49
- Last push: 2026-11-10 (today)
- Vibe score: 94/100

## What it is
An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand. 45 diagram types. No shadows. No Mermaid slop. Install · What it makes · Quickstart · Match your brand · Import · Export · Contributing "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." "I need a quadrant showing Q2 projects by impact vs effort." "Give me a sequence of a bearer call with token refresh on 401." "Onboard diagram-design to https://yoursite.com" (pulls your palette and fonts so every diagram after this one matches your site)

## When to use it
Reach for diagram-design when you want an AI to write, refactor or scaffold code in your editor or terminal — it's written in HTML and fits stacks tagged agent-skills, claude-code, codex, data-visualization.

## Maintenance
cathrynlavery/diagram-design looks very actively maintained: the last push was today (2026-11-10), with 66,493 stars and 49 open issues.

## Quick start
```bash
git clone https://github.com/cathrynlavery/diagram-design.git
```

## Alternatives in AI Coding Tools
- [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) — An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. (★148k, Python, vibe 98/100) · details: https://ideas.asveas.com/r/nextlevelbuilder/ui-ux-pro-max-skill
- [anomalyco/opencode](https://github.com/anomalyco/opencode) — The open source coding agent. (★226k, TypeScript, vibe 96/100) · details: https://ideas.asveas.com/r/anomalyco/opencode
- [google-gemini/gemini-cli](https://github.com/google-gemini/gemini-cli) — An open-source AI agent that brings the power of Gemini directly into your terminal. (★109k, TypeScript, vibe 96/100) · details: https://ideas.asveas.com/r/google-gemini/gemini-cli
- [pbakaus/impeccable](https://github.com/pbakaus/impeccable) — The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships. (★108k, Rust, vibe 96/100) · details: https://ideas.asveas.com/r/pbakaus/impeccable
- [OpenHands/OpenHands](https://github.com/OpenHands/OpenHands) — 🙌 OpenHands: AI-Driven Development (★93.2k, TypeScript, vibe 95/100) · details: https://ideas.asveas.com/r/OpenHands/OpenHands
- [Egonex-AI/Understand-Anything](https://github.com/Egonex-AI/Understand-Anything) — Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more. (★92.1k, TypeScript, vibe 95/100) · details: https://ideas.asveas.com/r/Egonex-AI/Understand-Anything

---
Source: https://ideas.asveas.com/r/cathrynlavery/diagram-design · Catalog: https://ideas.asveas.com/llms.txt