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 657 stars 91 forks Updated 3 days ago Apache-2.0

Install

View on GitHub

Quality Score: 92/100

Stars 20%
94
Recency 20%
100
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
9 months ago
Last Updated
3 days ago
Language
HTML
License
Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

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 4 days ago
kevinlin
DevOps & Infrastructure Solid

architecture-diagram

This skill should be used when the user asks to "create a diagram", "make an architecture diagram", "design a system diagram", "draw an architecture", "create a technical diagram", "make a deployment diagram", "visualize infrastructure", "create a data flow diagram", "draw system components", "make a network diagram", "diagram a cloud architecture", "draw an AWS diagram", "create a Kubernetes diagram", or mentions architecture, system design, infrastructure diagrams, component relationships, or data flow. Do NOT trigger for cover images, step-by-step process flows, or infographics.

4 Updated 3 days ago
widnyana
AI & Automation Listed

architecture-diagrams

Draw architecture diagrams at consistent C4-style levels, as code, kept honest and fit to the audience. Use when documenting a system's structure or when existing diagrams mislead more than they help.

4 Updated today
Amey-Thakur