diagram-design
39 high-quality editable diagram types, suitable for Claude Code, Codex, and more.
- Type
- Agent Skill
- Open source
- Yes
- GitHub Stars
- ★ 24.2k
- Source
- skill-github
- Repository
- github.com/cathrynlavery/diagram-design
Overview
diagram-design is a plugin designed for Claude Code, Codex, and Pi, offering 39 high-quality editable diagram types. These diagrams are self-contained in HTML + SVG format, with no shadows and no clutter from Mermaid. This skill can generate brand-matching diagrams within 60 seconds based on your website's branding. Ideal for developers and content creators needing high-quality diagrams.
Capabilities
- ▪39 editable diagram types
- ▪Self-contained HTML + SVG format
- ▪No shadows or Mermaid clutter
- ▪Supports various diagrams such as architecture diagrams, flowcharts, state machines, etc.
- ▪Can read your website’s branding and quickly generate matching diagrams
Use cases
Setup
Download directly from GitHub and use—no additional build steps required.
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
What diagram types are supported?
Supports 39 diagram types, including architecture diagrams, flowcharts, state machines, and more.
How do I generate brand-matching diagrams?
This skill can read your website and generate matching diagrams within 60 seconds.
Related skills
video-shotcraft
AI video skill for creating cinematic product promotional videos.
manim_skill
An Agent skill for creating 3Blue1Brown-style animations with Manim.
drawio-skill
Generate draw.io diagrams from natural language, supporting multiple presets and export formats.
ai-design-skills
Provides design capabilities for AI coding tools, supporting multiple AI assistants.
logo-generator-skill
Professional SVG logo generator with multiple design variants and presentation backgrounds.
claude-skill-aso-appstore-screenshots
Generate high-quality App Store screenshots to boost app download rates.