architecture-diagram-creator

Featured

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

AI & Automation 662 stars 94 forks Updated 3 weeks ago Apache-2.0

Install

View on GitHub

Quality Score: 90/100

Stars 20%
94
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Architecture Diagram Creator Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture. ## When to Use - "Create architecture diagram for [project]" - "Generate high-level overview" - "Document system architecture" - "Show data flow and processing pipeline" ## Components to Include 1. **Business Context**: objectives, users, value, metrics 2. **Data Flow**: sources → processing → outputs with SVG diagram 3. **Processing Pipeline**: multi-stage visualization 4. **System Architecture**: layered components (data/processing/services/output) 5. **Features**: functional and non-functional requirements 6. **Deployment**: model, prerequisites, workflows ## HTML Structure ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[Project] Architecture</title> <style> body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; } h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; } .section { margin: 30px 0; } svg { max-width: 100%; } /* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */ </style> </head> <body> <h1>[Project Name] - Architecture Overview</h1> <!-- Business Context Section --> <!-- Data Flow Diagram (SVG) --> <!-- Processing Pipeline (SVG) --> <!-- System Architecture Layers --> <!-- F...

Details

Author
mhattingpete
Repository
mhattingpete/claude-skills-marketplace
Created
10 months ago
Last Updated
3 weeks ago
Language
HTML
License
Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

architecture-diagram

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.

20 Updated today
Eigenwise
Code & Development Listed

architecture-diagram

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

3 Updated 6 days ago
kevinlin
DevOps & Infrastructure Featured

architecture-diagram

Generate layered architecture diagrams as self-contained HTML with inline SVG icons, CSS Grid containers, and connection overlays. Triggers on: "architecture diagram", "infra diagram", "system diagram", "deployment diagram", "topology", "draw architecture". NOT for architecture reviews, use architecture-reviewer.

313 Updated 4 days ago
Mathews-Tom