Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Dark-themed HTML architecture diagram v1.0.0

Use this resource to draw a system architecture diagram in HTML

New

  • 584 downloads
  • 225 likes
  • 188 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install architecture-diagram-html

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent draws your architecture in a self-contained HTML file: colour-coded components, arrows, security groups and a legend, following precise spacing rules. It starts from a provided template, adds three summary cards and keeps an export bar for PNG, PDF or clipboard.

Mostly picked by

Updated November 2, 2026

Dark-themed architecture diagram with colour-coded components joined by arrows and three summary cards.

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Web browser
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: the design system and layout rules
  • template.html: the page template to copy and adapt
  • A semantic palette, spacing rules and legend placement rules

Good fit for

  • Illustrating a client deliverable with a system diagram
  • Explaining infrastructure to a non-technical team
  • Attaching a clean diagram to a proposal

Not for

  • Creating illustrations or logos
  • Documenting code line by line

Tags

  • diagram
  • architecture
  • svg
  • infrastructure
  • html

About

You say

"Draw an architecture diagram of our online shop: site, API, database, payment and messaging."

Dark-themed architecture diagram with colour-coded components joined by arrows and three summary cards.

Skill published by Cocoon AI under the MIT license.

Show more

Prerequisites

You bring
The list of components and how they connect and A title and key points for the summary cards
Dependencies
Web browser

How to use it

  1. Describe the components and how they connect
  2. The agent generates the HTML file from the template
  3. Open it in a browser and export to PNG or PDF

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • resources/template.html17.5 KB
  • SKILL.md8.4 KB

Origin and licence

Modified by PalateKit

Author
cocoon-ai
Source
github.com/cocoon-ai/architecture-diagram-generator/tree/4b9087d55268c79a935105439dbcd37b630fc3f3/architecture-diagram
Licence
MIT

Notice

Version modifiée de « architecture-diagram » (cocoon-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need to be online?

Yes for two things: the Google Fonts font and the two export scripts (html2canvas and jsPDF). The diagram itself is inline SVG.

Can I change the colours?

Yes, the palette is a simple table of fills and strokes that the agent can swap for your brand colours.