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

cocoon-ai/architecture-diagram-generator

1 skill · 1.5k installs · 6.8k stars · GitHub

Install

npx skills add https://github.com/cocoon-ai/architecture-diagram-generator

Skills in this repo

1Architecture DiagramThe 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.1.5kinstalls

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

unsubscribe anytime.

cocoon-ai/architecture-diagram-generator · 1 skills · Skillselion