Architecture Diagram Generator skill
A skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
- 7,504 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill contains only instructions and an HTML template
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/architecture-diagram-generatorDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill contains only instructions and an HTML template
This is third-party code. Review the repository files before installing.
What it does
From a text description of a system, the skill builds a dark-themed architecture diagram. Components are colored by type: frontend, backend, databases, cloud, security, message bus and external systems. Security groups and regions get dashed borders, and arrows show data flow. Summary cards sit below the diagram. The output opens in any browser, with header buttons to copy the image or export PNG and PDF.
Who it is for. For developers, architects and technical writers who need a clean system diagram without a drawing tool.
Good fit when
- You need an architecture diagram for docs or slides
- You want to show cloud infrastructure and service links visually
- You want to iterate on the diagram through chat edits
Not a fit when
- You need a step-by-step process flow; the author has a separate skill for that
- You need an editable format such as draw.io or Mermaid
Example request
Draw an architecture diagram: React frontend, Node.js API, PostgreSQL, Redis cache, all on AWS behind CloudFrontLimitations
One style only: a dark theme with JetBrains Mono loaded from Google Fonts. Uploading the skill to claude.ai requires code execution to be enabled.
How to disable. In claude.ai toggle off or delete the skill under Customize, Skills. In Claude Code remove the architecture-diagram folder from ~/.claude/skills.
FAQ
Where do I get the architecture description?
Ask an agent to analyze your codebase, list components by hand, or ask for a typical architecture for your kind of product.
Do I need anything to open the result?
No, it is a single HTML file with embedded styles and SVG.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
A skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
A skill drawing animated architecture and process diagrams in a hand-drawn style: dark neon and light paper. The README is in Chinese
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Architecture Diagram Generator (this entry) | no | 7,504 | |
| Anatomy | no | 22,392 | a skill that draws interactive isometric illustrations in SVG |
| tld | no | 294 | a CLI and web UI for C4-style architecture diagrams where the agent |
| ClaudeMap | no | 295 | a skill that maps a repository into meaningful blocks |
README in short
The README lays out three steps: install the skill, get a text description of the system and ask Claude to draw it. It gives sample prompts for a web app, AWS serverless and microservices, a color table by component type and the output file structure. Install by uploading the zip to claude.ai, to project knowledge, or unpacking into the Claude Code skills directory. MIT licensed.
README badge
Original SKILL.md
--- name: architecture-diagram description: Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams. --- # Architecture Diagram Skill Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. > **Version 1.1** · MIT License · Authored by [Cocoon AI](mailto:hello@cocoon-ai.com) ## Design System ### Color Palette Use these semantic colors for component types: | Component Type | Fill (rgba) | Stroke | |---------------|-------------|--------| | Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | | Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | | Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | | AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | | Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | | Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) | | External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) | ### Typography Use JetBrains Mono for all text (monospace, technical aesthetic): ```html <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.