// Add skills & rules
diagram-design
An Agent Skill that has your agent draw architecture, quadrant, sequence and other diagrams (45 types per the README) as one self-contained HTML + SVG file, optionally matching your site’s palette and fonts. Install with npx skills add; works in Claude Code, Codex, Cursor, Copilot, Gemini CLI and more
Open source Maintained For agents
IN ONE PARAGRAPH
diagram-design is an Agent Skill that has your agent draw architecture, quadrant, sequence and other diagrams (45 types per the README) as one self-contained HTML + SVG file, optionally matching your site’s palette and fonts. Install with npx skills add; works in Claude Code, Codex, Cursor, Copilot, Gemini CLI and more.
Good for: Developers who want their agent (Claude Code, Codex, Cursor…) to add skills & rules.
Not for: people who don’t want to install and run tools themselves.
01How to start
- 1Read the official README for requirements and permissions.
- 2Install it as the official guide describes.
- 3Tell your agent the command exists (e.g. in AGENTS.md / CLAUDE.md) so it knows when to call it.
02Alternatives & comparison
Compare side by side →03Related
- ›Elements of AI · 赫尔辛基大学 / MinnaLearnMultilingual (incl. EN/ZH)
- ›AI For Everyone · DeepLearning.AI / 吴恩达English
- ›Generative AI for Everyone · DeepLearning.AI / 吴恩达English
- ›Introduction to Generative AI 学习路径 · Google Cloud SkillsEnglish
- ›Microsoft Learn: Fundamentals of Generative AI · Microsoft LearnMultilingual (incl. EN/ZH)
- All tutorials →
Versions, why it is listed, for AI to read
For AI agents
- Interfaces:its own app or website
- Machine-readable record:/api/v1/software/diagram-design.json · llms.txt
- Added 2026-10-20 · updated 2026-10-22