architecture-diagram

1---2name: architecture-diagram3description: "Dark-themed SVG architecture/cloud/infra diagrams as HTML."4version: 1.0.05author: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent6license: MIT7dependencies: []8platforms: [linux, macos, windows]9metadata:10  hermes:11    tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]12    related_skills: [concept-diagrams, excalidraw]13---14 15# Architecture Diagram Skill16 17Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.18 19## Scope20 21**Best suited for:**22- Software system architecture (frontend / backend / database layers)23- Cloud infrastructure (VPC, regions, subnets, managed services)24- Microservice / service-mesh topology25- Database + API map, deployment diagrams26- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic27 28**Look elsewhere first for:**29- Physics, chemistry, math, biology, or other scientific subjects30- Physical objects (vehicles, hardware, anatomy, cross-sections)31- Floor plans, narrative journeys, educational / textbook-style visuals32- Hand-drawn whiteboard sketches (consider `excalidraw`)33- Animated explainers (consider an animation skill)34 35If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.36 37Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT).38 39## Workflow40 411. User describes their system architecture (components, connections, technologies)422. Generate the HTML file following the design system below433. Save with `write_file` to a `.html` file (e.g. `~/architecture-diagram.html`)444. User opens in any browser — works offline, no dependencies45 46### Output Location47 48Save diagrams to a user-specified path, or default to the current working directory:49```50./[project-name]-architecture.html51```52 53### Preview54 55After saving, suggest the user open it:56```bash57# macOS58open ./my-architecture.html59# Linux60xdg-open ./my-architecture.html61```62 63## Design System & Visual Language64 65### Color Palette (Semantic Mapping)66 67Use specific `rgba` fills and hex strokes to categorize components:68 69| Component Type | Fill (rgba) | Stroke (Hex) |70| :--- | :--- | :--- |71| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |72| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |73| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |74| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |75| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |76| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |77| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |78 79### Typography & Background80- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts81- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)82- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern83 84```svg85<!-- Background Grid Pattern -->86<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">87  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>88</pattern>89```90 91## Technical Implementation Details92 93### Component Rendering94Components are rounded rectangles (`rx="6"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:951. Draw an opaque background rect (`#0f172a`)962. Draw the semi-transparent styled rect on top97 98### Connection Rules99- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes100- **Arrowheads:** Defined via SVG markers101- **Security Flows:** Use dashed lines in rose color (`#fb7185`)102- **Boundaries:**103  - *Security Groups:* Dashed (`4,4`), rose color104  - *Regions:* Large dashed (`8,4`), amber color, `rx="12"`105 106### Spacing & Layout Logic107- **Standard Height:** 60px (Services); 80-120px (Large components)108- **Vertical Gap:** Minimum 40px between components109- **Message Buses:** Must be placed *in the gap* between services, not overlapping them110- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.111 112## Document Structure113 114The generated HTML file follows a four-part layout:1151. **Header:** Title with a pulsing dot indicator and subtitle1162. **Main SVG:** The diagram contained within a rounded border card1173. **Summary Cards:** A grid of three cards below the diagram for high-level details1184. **Footer:** Minimal metadata119 120### Info Card Pattern121```html122<div class="card">123  <div class="card-header">124    <div class="card-dot cyan"></div>125    <h3>Title</h3>126  </div>127  <ul>128    <li>• Item one</li>129    <li>• Item two</li>130  </ul>131</div>132```133 134## Output Requirements135- **Single File:** One self-contained `.html` file136- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)137- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)138- **Compatibility:** Must render correctly in any modern web browser139 140## Template Reference141 142Load the full HTML template for the exact structure, CSS, and SVG component examples:143 144```145skill_view(name="architecture-diagram", file_path="templates/template.html")146```147 148The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.149