Skip to content
Get packs

Architecture Diagram Generator

Turns a system description into a polished dark-themed architecture diagram as a single HTML file.

Source Download skill
Repository
Cocoon-AI/architecture-diagram-generator
Stars
7,528
Licence
MIT
Files
2 files

What it does

When installed, the agent can produce architecture diagrams (for systems, cloud infrastructure, security or network layouts) as self-contained HTML files with inline SVG graphics. The skill sets a consistent visual style: a dark background, colour-coded component types (frontend, backend, database, cloud, security, message bus), dashed boundaries, arrows and summary cards, plus a built-in toolbar to copy, download as PNG, or export as PDF.

Great for

  • Engineers who want a quick, good-looking diagram of a system for a design doc or README
  • Teams preparing architecture overviews for presentations or reviews
  • People who would rather describe a system in plain language than draw it by hand

Skip it if

  • Formal diagrams that must follow a strict standard such as UML or ArchiMate, since the skill only defines its own visual style
  • Environments that block external CDNs or Google Fonts, because the generated page loads scripts and fonts from the internet and may render incorrectly offline

Try asking

  • “Create an architecture diagram of our AWS setup with an API gateway, two services, a Postgres database and a Kafka bus”
  • “Draw a network topology diagram showing our VPC, public and private subnets, and security groups”
  • “Make a security diagram of our auth flow between the web app, identity provider and API”
Step-by-step guide: how to use Architecture Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    architecture-diagram.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip architecture-diagram.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip architecture-diagram.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a clear list of components and how they connect, including directions of data flow, to get a more accurate diagram.
  • Open the generated HTML in a browser and check for overlapping boxes or arrows, since the agent may need a second pass to fix layout issues.
  • Keep the pinned CDN script versions and integrity hashes intact if you edit the template, so the export features keep working safely.

What's inside

  • resources/template.html
  • SKILL.md

Redistributed unmodified from Cocoon-AI/architecture-diagram-generator under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.