i ideas / repo launcher
cathrynlavery avatar

cathrynlavery/diagram-design

★ 66,493HTMLMIT94

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.

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.

Category
AI Coding Tools
Also in
—
Stars
66,493
Forks
4,420
Last push
today
Created
2026-04-16
Open issues
49
Website
diagramdesign.dev
#agent-skills#claude-code#codex#data-visualization#diagrams#drawio#mermaid#svg#claude#charts#html

Quick start

$ git clone https://github.com/cathrynlavery/diagram-design.git

Hand it to your AI

Read https://ideas.asveas.com/r/cathrynlavery/diagram-design.md and help me add cathrynlavery/diagram-design to my project. Explain the setup steps for my stack and show the minimal code to get it working.
AI Coding ToolsMarkdown .mdOpen on GitHub ↵

Alternatives to diagram-design

All AI Coding Tools →
nextlevelbuilder avatarui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.★ 148kanomalyco avataropencodeThe open source coding agent.★ 226kgoogle-gemini avatargemini-cliAn open-source AI agent that brings the power of Gemini directly into your terminal.★ 109kpbakaus avatarimpeccableThe design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships.★ 108kOpenHands avatarOpenHands🙌 OpenHands: AI-Driven Development★ 93.2kEgonex-AI avatarUnderstand-AnythingGraphs 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

Pairs well with

Leonxlnx avatartaste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages★ 113kblader avatarhumanizerAgent skill that removes signs of AI-generated writing from text★ 67.9khesreallyhim avatarawesome-claude-codeA hand-picked collection of the finest of resources for the most awesome of agents, Claude Code, the undisputed champion of coding companions, from the unstoppable team at Anthropic PBC (no affiliation). A delectable showcase of top tier skills, ambidextrous agents, scintillating status lines, top notch developer tooling, and also we have plugins★ 57.8kzarazhangrui avatarfrontend-slidesCreate beautiful slides on the web using a coding agent's frontend skills★ 32.2kheygen-com avatarhyperframesWrite HTML. Render video. Built for agents.★ 82.8klemomo-ai avatarlemo-opuscarA toolbox of film styles made in code for Claude Code: 66 ready to use, and your own. Each style is a style prompt plus a demo film made entirely in code by Claude Opus 5.5, with no video model. By Lemomo. · 一套用代码做片的风格工具箱：66 种现成风格，也能做出你自己的★ 14.8k

FAQ

What is diagram-design?

cathrynlavery/diagram-design is an AI coding tool on GitHub: 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. An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand.

When should I use diagram-design?

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.

What are the best alternatives to diagram-design?

Popular alternatives in AI Coding Tools: nextlevelbuilder/ui-ux-pro-max-skill (148k★), anomalyco/opencode (226k★), google-gemini/gemini-cli (109k★), pbakaus/impeccable (108k★), OpenHands/OpenHands (93.2k★).

Is diagram-design actively maintained?

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

What license does diagram-design use?

cathrynlavery/diagram-design is published under the MIT license. Check the repository's LICENSE file before commercial use.