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 671 stars 96 forks Updated 1 months ago Apache-2.0

Install

View on GitHub

Quality Score: 87/100

Stars 20%
94
Recency 20%
75
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
1 months 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.

146 Updated 1 weeks ago
alfredolopez80
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 yesterday
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.

5 Updated today
kevinlin