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
- Business Context: objectives, users, value, metrics
- Data Flow: sources → processing → outputs with SVG diagram
- Processing Pipeline: multi-stage visualization
- System Architecture: layered components (data/processing/services/output)
- Features: functional and non-functional requirements
- Deployment: model, prerequisites, workflows
HTML Structure
<!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 -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
SVG Pattern for Data Flow
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
Workflow
- Analyze project (README, code structure)
- Extract: purpose, data sources, processing, tech stack, outputs
- Create HTML with all 6 sections
- Use semantic colors for visual hierarchy
- Write to
[project]-architecture.html
Keep diagrams clear, use consistent styling, include real project details.
1---2name: architecture-diagram-creator3description: 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.4---56# Architecture Diagram Creator78Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.910## When to Use1112- "Create architecture diagram for [project]"13- "Generate high-level overview"14- "Document system architecture"15- "Show data flow and processing pipeline"1617## Components to Include18191. **Business Context**: objectives, users, value, metrics202. **Data Flow**: sources → processing → outputs with SVG diagram213. **Processing Pipeline**: multi-stage visualization224. **System Architecture**: layered components (data/processing/services/output)235. **Features**: functional and non-functional requirements246. **Deployment**: model, prerequisites, workflows2526## HTML Structure2728```html29<!DOCTYPE html>30<html>31<head>32 <meta charset="UTF-8">33 <meta name="viewport" content="width=device-width, initial-scale=1.0">34 <title>[Project] Architecture</title>35 <style>36 body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }37 h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }38 .section { margin: 30px 0; }39 svg { max-width: 100%; }40 /* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */41 </style>42</head>43<body>44 <h1>[Project Name] - Architecture Overview</h1>4546 <!-- Business Context Section -->47 <!-- Data Flow Diagram (SVG) -->48 <!-- Processing Pipeline (SVG) -->49 <!-- System Architecture Layers -->50 <!-- Features Grid -->51 <!-- Deployment Info -->52</body>53</html>54```5556## SVG Pattern for Data Flow5758```html59<svg viewBox="0 0 800 400">60 <!-- Data sources (left, blue) -->61 <rect x="50" y="150" width="120" height="80" fill="#4299e1"/>6263 <!-- Processing (center, orange) -->64 <rect x="340" y="150" width="120" height="80" fill="#ed8936"/>6566 <!-- Outputs (right, green) -->67 <rect x="630" y="150" width="120" height="80" fill="#48bb78"/>6869 <!-- Arrows connecting -->70 <path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>71</svg>72```7374## Workflow75761. Analyze project (README, code structure)772. Extract: purpose, data sources, processing, tech stack, outputs783. Create HTML with all 6 sections794. Use semantic colors for visual hierarchy805. Write to `[project]-architecture.html`8182Keep diagrams clear, use consistent styling, include real project details.
diegosouzapw