Architecture Diagram Generator

Install

unzip architecture-diagram.zip -d ~/.claude/skills/

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.

Example request

Draw an architecture diagram: React frontend, Node.js API, PostgreSQL, Redis cache, all on AWS behind CloudFront

Limitations

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.

Security check

• The skill contains only instructions and an HTML template

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.

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.

Related