This skill produces polished, dark-themed architecture diagrams as self-contained HTML files with inline SVG. It translates system, cloud, security, and network topology descriptions into visual maps with a consistent color palette and built-in export to PNG or PDF. System architects, cloud engineers, and solutions teams use it to turn design discussions into shareable diagrams without leaving the agent workflow.
Follow the documented setup, then try a first task.
Installs: Personal custom skill · Claude.ai
Platform: Claude.ai
Download architecture-diagram.zip.
In Claude.ai, go to Customize → Skills, click +, select + Create skill, and then select Upload a skill.
Choose the downloaded zip file and toggle the skill on.
Installs: Single Claude.ai Project · Claude.ai Projects
Platform: Claude.ai Projects
Upload architecture-diagram.zip to the Project Knowledge of the intended Claude.ai Project.
Installs: Global skills directory · Claude Code CLI
In a terminal, extract the archive into the global Claude skills directory.
unzip architecture-diagram.zip -d ~/.claude/skills/
Installs: Project-local skills directory · Claude Code CLI
Run from: The intended project directory
In a terminal, extract the archive into the current project's .claude/skills directory.
unzip architecture-diagram.zip -d ./.claude/skills/
Installs: Manual architecture-diagram bundle · Claude
Make the architecture-diagram directory accessible to Claude, preserving SKILL.md and resources/template.html in the documented directory structure.
Uses architecture-diagram
Use the architecture-diagram skill to create a self-contained HTML architecture diagram for a web application with: - React frontend - Node.js/Express API - PostgreSQL database - Redis cache - JWT authentication
Claude
Cursor
Windsurf