Guide · Agent skill

How to use the Architecture Diagram Generator agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The architecture-diagram skill lets an AI agent draw system, cloud, infrastructure, security and network diagrams as single HTML files with inline SVG graphics. It is aimed at engineers who need a clean diagram for a design doc, README or review, and at people who would rather describe a system in plain language than draw it by hand. This guide explains what the skill does, how to install it, how to ask for a diagram and what to check before you share the result.

Architecture Diagram GeneratorCocoon-AI/architecture-diagram-generator · MIT Download the skill

Quick start

1Download the ZIP. Download the skill ZIP from this page and unzip it. You should see SKILL.md and resources/template.html.
2Place the skill folder. Move the folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills instead.
3Describe your system. In your agent, list the components, their types and how they connect, and say you want an architecture diagram.
4Review the HTML file. Open the generated single HTML file in a browser and check names, arrows and grouping against your real system.
5Export the result. Click the ⋯ toggle in the header, then use Copy, PNG or PDF to take the diagram into a document or presentation.

What is an agent skill, and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file that tells a compatible AI agent how to perform a specific task. This skill is named architecture-diagram. When it is installed and the agent is asked for a system, infrastructure, cloud, security or network topology diagram, it produces a self-contained HTML file with inline SVG graphics and CSS styling.

Dark background (slate-950) with a subtle grid pattern
Colour-coded component types: frontend, backend, database, cloud, security, message bus, and external/generic
Dashed boundaries for security groups and regions, arrows between components, and a row of three summary cards
A header toolbar with a ⋯ toggle that reveals Copy (high-DPI PNG to clipboard), PNG download, and PDF export

How do you install the architecture-diagram skill?

Download the ZIP from the skill page on this site and unzip it. The skill folder contains SKILL.md and resources/template.html. Put the unzipped folder in one of these locations:

Personal skills for your user account: ~/.claude/skills/
A single project: the .claude/skills/ folder inside your project
Claude apps: upload the ZIP under Settings → Capabilities → Skills

Which agents and environments can run it?

The skill needs an AI agent that supports SKILL.md skills, for example Claude Code or Claude with skills enabled. You also need a web browser to open the generated HTML file, and internet access when that file loads its scripts and fonts.

Agent: supports SKILL.md skills
Browser: any browser that can open a local HTML file
Network: the generated page loads html2canvas and jsPDF from the jsDelivr CDN and JetBrains Mono from Google Fonts
Scripts: the skill does not run scripts

How do you trigger the skill with a natural request?

You do not need a special command. Describe the system in plain language and say what kind of diagram you want. The skill's description matches requests for system, infrastructure, cloud, security, or network topology diagrams, so use those words where they fit.

Name the components and how they connect, for example: the web frontend calls an API backend, which writes to PostgreSQL and publishes events to Kafka.
Mention grouping if it matters, such as a Kubernetes cluster, an AWS region, or a security group.
Ask for the output in the form you need, such as a single HTML file for a design doc.

What does a good request look like?

The more concrete the components and connections, the more accurate the diagram. A useful request names each service, its type (frontend, backend, database, cloud, security or message bus) and the direction of each connection. Auth flows can be called out, since the skill draws them as dashed rose-coloured lines.

Example: Create an architecture diagram of a three-tier app. A React frontend calls a Node backend through an API gateway. The backend reads from PostgreSQL and sends events through Kafka to a worker service. Put the backend and database inside an AWS region.
Example: Draw a network topology for a office setup with a firewall, a DMZ with two web servers and an internal database subnet.
Example: Make a security-focused diagram of our login flow showing the identity provider, the auth service and the session store.

Each generated diagram includes a small ⋯ toggle in the header. Click it to show three buttons. Copy places a high-DPI PNG on the clipboard, PNG downloads a high-DPI image, and PDF saves the diagram as a one-page PDF. All three use the same capture, so the dark theme is kept without using the browser's print dialog.

Copy needs a click (a user gesture) and a secure context such as https, file, or localhost.
The toolbar is hidden when printing.

Open the HTML file in a browser and read the labels, arrows and legend. Diagrams that load fonts or scripts from the internet may render differently in environments that block external CDNs or Google Fonts, so test on the machine where people will view it. Also remember the skill only defines its own visual style, so it is not a tool for strict UML or ArchiMate notation.

Confirm every component and connection matches your real system.
Check that the legend sits outside the boundary boxes.
Open the page on a machine with internet access, or check how it looks offline.

What people use it for

Adding a system overview to a README or design doc
Preparing an infrastructure or cloud layout for a team review
Sketching a network topology with firewalls and subnets
Illustrating a security or authentication flow for a presentation

Frequently asked questions

How do I install the architecture diagram skill?

Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for your user account, or in a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

Is the architecture-diagram skill free to use?

The skill is published under the MIT License, as stated in its SKILL.md. Check the license file in the source for the full terms before reuse.

What do I need to run it?

You need an AI agent that supports SKILL.md skills, such as Claude Code or Claude with skills enabled, and a web browser to open the generated HTML. The generated page needs internet access to load html2canvas, jsPDF and JetBrains Mono.

Why does my diagram look wrong or fonts not load?

The generated page loads scripts and fonts from jsDelivr and Google Fonts. If your network blocks external CDNs or Google Fonts, the page may render incorrectly, so open it on a machine with internet access.

Does the skill run scripts or send my data anywhere?

The skill does not run scripts, according to its listing. It does use the network: the generated HTML file loads its libraries and fonts from the internet when opened.

Can it produce UML or ArchiMate diagrams?

No. The skill only defines its own dark visual style with colour-coded component types. If you need a strict standard such as UML or ArchiMate, use a tool built for that notation.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you want a quick, good-looking dark-themed diagram of a system for a design doc, README or presentation, and you are happy to describe it in plain language. Pick a dedicated modelling tool if you need strict UML or ArchiMate notation, or if the diagram must render on machines that block external CDNs or Google Fonts.

Download the skill