Architecture Diagram
Generates self-contained HTML files with SVG architecture diagrams in a dark theme. Ships with a complete design system: semantic color palette for different component types (frontend in cyan, databases in violet, AWS in amber), JetBrains Mono typography, and precise spacing rules to avoid layout collisions. Every diagram includes a built-in export toolbar that captures high-DPI PNGs or PDFs using html2canvas and jsPDF with SRI-locked CDN imports. The template is opinionated about visual consistency, which is exactly what you want when you need to crank out clean system diagrams without fighting CSS for an hour. Works well for cloud architecture, microservices, and network topology docs.
- skills.sh installs
- 2.2K
- GitHub stars
- 7.6K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add cocoon-ai/architecture-diagram-generator --skill architecture-diagram --agent claude-codeInstalls into .claude/skills of the current project.
Files
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 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):
<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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/cocoon-ai/architecture-diagram-generator
- Categories
- Frontend Development, Security, Code Review & Quality, Automation & Workflows, Cloud & Infrastructure
- First seen
- May 16, 2026
Recommended
More Frontend Development
open-pencilopen-pencil/skillsWork with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify 2.2Kskills.sh installs
flutter-adaptive-uimadteacher/mad-agents-skillsBuild, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use whe2Kskills.sh installs
sentry-tanstack-start-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for TanStack Start React. Use when asked to "add Sentry to TanStack Start", "install @sentry/tanstackstart-react", or configure error moni2Kskills.sh installs
gpt-tastenexu-io/open-designElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typograph2Kskills.sh installs
r3f-loadersenzed/r3f-skillsReact Three Fiber asset loading - useGLTF, useLoader, Suspense patterns, preloading. Use when loading 3D models, textures, HDR environments, or managing loading2Kskills.sh installs
brandingkostja94/marketing-skillsWhen the user wants to define, audit, or apply brand strategy—purpose, values, positioning, storytelling, voice, narrative (not only visuals). Also use when the1.9Kskills.sh installs