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.
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.
license
MIT
metadata
{"version":"1.0","author":"Cocoon AI (hello@cocoon-ai.com)"}
Architecture Diagram Skill
Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.
Design System
Color Palette
Use these semantic colors for component types:
Component Type
Fill (rgba)
Stroke
Frontend
rgba(8, 51, 68, 0.4)
#22d3ee (cyan-400)
Backend
rgba(6, 78, 59, 0.4)
#34d399 (emerald-400)
Database
rgba(76, 29, 149, 0.4)
#a78bfa (violet-400)
AWS/Cloud
rgba(120, 53, 15, 0.3)
#fbbf24 (amber-400)
Security
rgba(136, 19, 55, 0.4)
#fb7185 (rose-400)
Message Bus
rgba(251, 146, 60, 0.3)
#fb923c (orange-400)
External/Generic
rgba(30, 41, 59, 0.5)
#94a3b8 (slate-400)
Typography
Use JetBrains Mono for all text (monospace, technical aesthetic):
Arrow z-order: Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes. SVG elements are painted in document order, so arrows drawn first will appear behind shapes drawn later.
Masking arrows behind transparent fills: Since component boxes use semi-transparent fills (rgba(..., 0.4)), arrows behind them will show through. To fully mask arrows, draw an opaque background rect (e.g., fill="#0f172a") at the same position before drawing the semi-transparent styled rect on top:
<!-- Opaque background to mask arrows --><rectx="X"y="Y"width="W"height="H"rx="6"fill="#0f172a"/><!-- Styled component on top --><rectx="X"y="Y"width="W"height="H"rx="6"fill="rgba(76, 29, 149, 0.4)"stroke="#a78bfa"stroke-width="1.5"/>
Auth/security flows: Dashed lines in rose color (#fb7185).
Message buses / Event buses: Small connector elements between services. Use orange color (#fb923c stroke, rgba(251, 146, 60, 0.3) fill):
CRITICAL: When stacking components vertically, ensure proper spacing to avoid overlaps:
Standard component height: 60px for services, 80-120px for larger components
Minimum vertical gap between components: 40px
Inline connectors (message buses): Place IN the gap between components, not overlapping
Example vertical layout:
Component A: y=70, height=60 → ends at y=130
Gap: y=130 to y=170 → 40px gap, place bus at y=140 (20px tall)
Component B: y=170, height=60 → ends at y=230
Wrong: Placing a message bus at y=160 when Component B starts at y=170 (causes overlap)
Right: Placing a message bus at y=140, centered in the 40px gap (y=130 to y=170)
Legend Placement
CRITICAL: Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).
Calculate where all boundaries end (y position + height)
Place legend at least 20px below the lowest boundary
Expand SVG viewBox height if needed to accommodate
Example:
Kubernetes Cluster: y=30, height=460 → ends at y=490
Legend should start at: y=510 or below
SVG viewBox height: at least 560 to fit legend
Wrong: Legend at y=470 inside a cluster boundary that ends at y=490
Right: Legend at y=510, below the cluster boundary, with viewBox height extended
Layout Structure
Header - Title with pulsing dot indicator, subtitle
Main SVG diagram - Contained in rounded border card
Summary cards - Grid of 3 cards below diagram with key details
