Create polished dark themed architecture diagrams as self contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.
Добавьте инструмент одной командой или скачайте проверенный архив версии.
npx skills add cocoon-ai/architecture-diagram-generator --skill architecture-diagramCreate 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
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) |
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.
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>
CRITICAL: When stacking components vertically, ensure proper spacing to avoid overlaps:
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)
CRITICAL: Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).
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
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:
<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/"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 toolbarCaveats: 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.
<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>
<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>
Copy and customize the template at resources/template.html. Key customization points:
<title> and header text1000 x 680)Always produce a single self-contained .html file with:
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.
| Путь | Размер | SHA256 |
|---|---|---|
| SKILL.md | 8383 | a8dc11b2a648d906... |
| resources/template.html | 17492 | 0b1631dd9e293f0a... |
npx skills add cocoon-ai/architecture-diagram-generator --skill architecture-diagram или скачайте ZIP-архив.Войдите, чтобы оставить комментарий.
Комментариев пока нет.