Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
cocoon-ai avatar

Architecture Diagram

cocoon-ai/architecture-diagram-generator

  • 1.5k installs
  • 6.8k repo stars
  • Updated May 13, 2026
  • cocoon-ai/architecture-diagram-generator

architecture-diagram is an agent skill that creates polished dark-themed system and cloud architecture diagrams as self-contained HTML and SVG files.

About

The architecture-diagram skill from Cocoon AI creates professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. It defines a dark design system on slate-950 backgrounds with semantic colors for frontend cyan, backend emerald, database violet, AWS amber, security rose, and message bus orange components. Typography uses JetBrains Mono at prescribed sizes for names, sublabels, and annotations. Visual rules cover rounded component boxes, dashed security groups and region boundaries, early-drawn arrows with masking rects behind semi-transparent fills, and rose dashed lines for auth flows. Spacing rules prevent vertical overlap between stacked components and document minimum gaps between rows and columns. The skill targets system, infrastructure, cloud, security, and network topology diagram requests and outputs portable HTML artifacts developers can open directly in a browser without external diagram services.

  • Self-contained HTML plus inline SVG architecture diagrams with dark slate design system.
  • Semantic color palette for frontend, backend, database, cloud, security, and message bus nodes.
  • JetBrains Mono typography and grid background pattern for technical aesthetic.
  • Arrow z-order and opaque masking guidance for clean connector routing.
  • Covers security groups, region boundaries, and auth flow dashed connectors.

Architecture Diagram by the numbers

  • 1,511 all-time installs (skills.sh)
  • +60 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #252 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

architecture-diagram capabilities & compatibility

Capabilities
dark themed html svg diagram generation · semantic component color system · security group and region boundaries · arrow routing with masking · jetbrains mono typography styling · spacing rules for stacked components
Use cases
documentation · ui design
From the docs

What architecture-diagram says it does

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.
SKILL.md
Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.
SKILL.md
npx skills add https://github.com/cocoon-ai/architecture-diagram-generator --skill architecture-diagram

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.5k
repo stars★ 6.8k
Security audit3 / 3 scanners passed
Last updatedMay 13, 2026
Repositorycocoon-ai/architecture-diagram-generator ↗

How do I generate a professional dark-themed architecture diagram for system, cloud, or security topology without a separate diagram tool?

Generate polished dark-themed system, cloud, security, or network architecture diagrams as self-contained HTML and SVG files.

Who is it for?

Developers documenting infrastructure, cloud, security, or network layouts who want self-contained HTML diagram artifacts.

Skip if: Skip when you need interactive editable diagram canvases or animated runtime monitoring dashboards.

When should I use this skill?

User asks for system, infrastructure, cloud, security, or network topology architecture diagrams.

What you get

A portable HTML file with inline SVG components, connectors, and semantic color styling ready to open in a browser.

  • HTML+SVG diagram file

By the numbers

  • Ships at version 1.1 with MIT License

Files

SKILL.mdMarkdownGitHub ↗

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

Design System

Color Palette

Use these semantic colors for component types:

Component TypeFill (rgba)Stroke
Frontendrgba(8, 51, 68, 0.4)#22d3ee (cyan-400)
Backendrgba(6, 78, 59, 0.4)#34d399 (emerald-400)
Databasergba(76, 29, 149, 0.4)#a78bfa (violet-400)
AWS/Cloudrgba(120, 53, 15, 0.3)#fbbf24 (amber-400)
Securityrgba(136, 19, 55, 0.4)#fb7185 (rose-400)
Message Busrgba(251, 146, 60, 0.3)#fb923c (orange-400)
External/Genericrgba(30, 41, 59, 0.5)#94a3b8 (slate-400)

Typography

Use JetBrains Mono for all text (monospace, technical aesthetic):

<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:

<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:

<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:

<!-- 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):

<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 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

1. Header - Title with pulsing dot indicator, subtitle, and export toolbar 2. Main SVG diagram - Contained in rounded border card 3. Summary cards - Grid of 3 cards below diagram with key details 4. Footer - Minimal metadata line

Export Toolbar (built-in)

Every diagram ships with a single unobtrusive ⋯ toggle in the header. Click it to reveal three buttons — 📋 Copy (high-DPI PNG to clipboard, scale: 2), 🖼️ PNG (high-DPI PNG download), 📄 PDF (PNG embedded in a one-page PDF via jsPDF). The toolbar collapses back to the icon by default so it doesn't clutter the diagram. All three formats use the same html2canvas capture (with the toolbar excluded and 32px padding around the content), so PDF preserves the dark theme without going through the browser's print dialog.

When generating a new diagram, keep these intact in the template:

  • The two CDN scripts in <head> (pinned versions, with Subresource Integrity hashes and crossorigin="anonymous"):
  • https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js — integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H"
  • https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js — integrity="sha384-en/ztfPSRkGfME4KIm05joYXynqzUgbsG5nMrj/xEFAHXkeZfO3yMK8QQ+mP7p1/"
  • SRI ensures generated diagrams are tamper-resistant against CDN compromise. Do not modify the hashes; if the version is bumped, the new hash must be computed fresh.
  • id="report-container" on the outermost .container div (this is what gets captured)
  • .toolbar markup with .toolbar-actions (collapsed by default) and .toolbar-toggle (the ⋯ button)
  • .toolbar CSS + @media print { .toolbar { display: none !important; } }
  • copyAsImage(), downloadPNG(), and downloadPDF() script before </body>, all using getBoundingClientRect() + html2canvas(document.body, { x, y, width, height, ignoreElements }) to capture a precise rect with breathing room and no toolbar

Caveats: clipboard API needs a user gesture and a secure context (https/file/localhost). SVG <foreignObject> renders inconsistently in html2canvas — stick to plain <svg> shapes and <text>. Bump scale: 2 to 3 or 4 for higher-res output.

Component Box Pattern

<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>

Info Card Pattern

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Template

Copy and customize the template at resources/template.html. Key customization points:

1. Update the <title> and header text 2. Modify SVG viewBox dimensions if needed (default: 1000 x 680) 3. Add/remove/reposition component boxes 4. Draw connection arrows between components 5. Update the three summary cards 6. Update footer metadata

Output

Always produce a single self-contained .html file with:

  • Embedded CSS (no external stylesheets except Google Fonts)
  • Inline SVG (no external images)
  • No JavaScript required (pure CSS animations)

The file should render correctly when opened directly in any modern browser. The export toolbar uses two CDN scripts (html2canvas and jsPDF) — no other JavaScript dependencies.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

How it compares

Use architecture-diagram for portable HTML+SVG files; use Mermaid or PlantUML skills when diagram source must live in markdown repos.

FAQ

What format does architecture-diagram output?

A self-contained HTML file with inline SVG graphics, CSS styling, and JetBrains Mono typography.

What component types are styled?

Frontend, backend, database, AWS or cloud, security, message bus, and external or generic nodes with distinct colors.

When should I use architecture-diagram?

When you need a polished dark-themed technical diagram for system, cloud, security, or network topology documentation.

Is Architecture Diagram safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Design & UI/UXuibranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.