Architecture Diagram
Generate dark-themed, self-contained HTML+SVG architecture diagrams for system, cloud, security, and network topology without a separate design tool.
Overview
Architecture Diagram is an agent skill most often used in Build (also Validate prototype, Ship review) that creates self-contained dark-themed HTML+SVG system and infrastructure diagrams from user requests.
Install
npx skills add https://github.com/cocoon-ai/architecture-diagram-generator --skill architecture-diagramWhat is this skill?
- Ships polished diagrams as single HTML files with inline SVG and CSS (no external asset pipeline)
- Semantic color system for Frontend, Backend, Database, AWS/Cloud, Security, Message Bus, and External nodes
- JetBrains Mono typography with defined sizes (12px names, 9px sublabels, 8px annotations, 7px tiny labels)
- Dark slate-950 (`#020617`) background with subtle grid pattern — version 1.1 design system
- Use for system, infrastructure, cloud, security, and network topology requests
- Design system version 1.1
- 7 semantic component color roles in the palette table
Adoption & trust: 896 installs on skills.sh; 5.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can describe your stack in chat but lack a shareable, on-brand architecture diagram for docs or reviews.
Who is it for?
Solo builders documenting microservices, cloud layouts, or security perimeters before ship or fundraise conversations.
Skip if: Live auto-synced diagrams from Terraform state or teams that require interactive editable canvas tools exclusively.
When should I use this skill?
User asks for system, infrastructure, cloud, security, or network topology architecture diagrams.
What do I get? / Deliverables
You get a browser-openable HTML file with labeled SVG nodes, semantic colors, and typography matching the v1.1 Cocoon design system.
- Self-contained HTML architecture diagram file
- Inline SVG with semantic node styling
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build → docs because the primary artifact is publishable technical documentation teammates and investors can open in a browser. Architecture diagrams support implementation alignment, READMEs, and ADRs—not runtime code generation.
Where it fits
Sketch AWS and API boundaries before committing to a multi-service MVP scope.
Drop an HTML topology into the repo docs folder for new contributors.
Produce a rose-stroked security zone diagram for a pre-launch architecture review.
How it compares
Skill-backed diagram generator, not an MCP server or generic whiteboard export.
Common Questions / FAQ
Who is architecture-diagram for?
Indie developers and small teams who want investor- or reviewer-ready topology visuals without a separate design workflow.
When should I use architecture-diagram?
In Validate when scoping prototype architecture, in Build when writing technical docs, and in Ship when you need security or network topology for review—whenever the user asks for system, infrastructure, cloud, or network diagrams.
Is architecture-diagram safe to install?
It mainly writes local HTML files and may load Google Fonts; check the Security Audits panel on this page before enabling browser or filesystem access in your agent.
SKILL.md
READMESKILL.md - Architecture Diagram
# Architecture Diagram Skill Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. > **Version 1.1** · MIT License · Authored by [Cocoon AI](mailto:hello@cocoon-ai.com) ## 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): ```html <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels. ### Visual Elements **Background:** `#020617` (slate-950) with subtle grid pattern: ```svg <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/> </pattern> ``` **Component boxes:** Rounded rectangles (`rx="6"`) with 1.5px stroke, semi-transparent fills. **Security groups:** Dashed stroke (`stroke-dasharray="4,4"`), transparent fill, rose color. **Region boundaries:** Larger dashed stroke (`stroke-dasharray="8,4"`), amber color, `rx="12"`. **Arrows:** Use SVG marker for arrowheads: ```svg <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" /> </marker> ``` **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: ```svg <!-- Opaque background to mask arrows --> <rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/> <!-- Styled component on top --> <rect x="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): ```svg <rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/> <text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text> ``` ### Spacing Rules **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