🗺️
FrontendHTML

Diagram Design

by cathrynlavery

Diagram Design is a Frontend skill for Claude Code, published by cathrynlavery in diagram-design.

23.6K stars1.4K forkson cathrynlavery/diagram-designAdded 2026/08/20Repository updated 2026/08/20
View source on GitHubDownload repo ZIP
agent-skillsclaude-codecodexdata-visualizationdiagramsdrawiomermaidsvg
Install in seconds
Install Diagram Design
Copy Diagram Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design ~/.claude/skills/diagram-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

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

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
skills/diagram-design/SKILL.md in cathrynlavery/diagram-design
Installs to
~/.claude/skills/diagram-design
Collection
The only skill cataloged from this repository
Category
Frontend — 567 skills

What Diagram Design does

Diagram Design creates branded architecture, process, data model, and other technical diagrams as standalone HTML, SVG, or PNG. Use it to redraw draw.io or Mermaid sources, or to add brand tokens, semantic patterns, callouts, motion, and sketch styling.

Diagram Design is cataloged under Frontend on DirSkills. Diagram Design comes from a repository tagged agent-skills, claude-code, codex, data-visualization and diagrams.

Documentation

README

Diagram Design

Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.

Thirty-eight visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected.

0. First-time setup — style guide gate

Before generating your first diagram in a new project, verify the style guide has been customized.

Don't silently ship default-skinned diagrams into a branded project.

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Diagram Design

  • How does Diagram Design compare to other Frontend skills?

    Diagram Design ranks #76 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Diagram Design against them. Open each page to compare what they document and how they install.

More Frontend skills

Diagram Design is one of 567 Frontend skills cataloged on DirSkills, ranked #76 by stars among them.

Browse all Frontend skills →
🅰️
3w ago

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Frontend
239.8K36.4K
🏗️
3w ago

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.
Frontend
239.8K36.4K
♿
3w ago

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.
Frontend
239.8K36.4K