---
name: architecture-diagram-creator
description: Create comprehensive HTML architecture diagrams showing data flows, components, and deployment
version: 1.0.0
author: mhattingpete (adapted)
platforms: [claude-code, cursor]
license: MIT
source: https://github.com/mhattingpete/claude-skills-marketplace
---
# Architecture Diagram Creator
Create comprehensive, self-contained HTML architecture diagrams.
## Output Structure
Generate a single HTML file containing 6 components:
### 1. Business Context
- Problem being solved
- Key stakeholders
- Business objectives
### 2. Data Flow (SVG Diagram)
```svg
```
### 3. Processing Pipeline
Sequential steps with inputs → outputs at each stage.
### 4. System Architecture Layers
```
┌─────────────────────────────────────────┐
│ Presentation Layer │
│ (Web UI / API / CLI) │
├─────────────────────────────────────────┤
│ Application Layer │
│ (Business Logic / Use Cases) │
├─────────────────────────────────────────┤
│ Infrastructure Layer │
│ (Database / Cache / Message Queue) │
├─────────────────────────────────────────┤
│ External Services │
│ (Third-party APIs / Clouds) │
└─────────────────────────────────────────┘
```
### 5. Features Grid
Key capabilities grouped by domain.
### 6. Deployment Information
- Environment (cloud provider, region)
- Container/orchestration setup
- Scaling strategy
- Monitoring stack
## Implementation
```html
Architecture: {System Name}
```