AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

stack-diagram

Turns a list of technologies into cloud-vendor-style architecture diagrams with real brand logos, delivered as self-contained HTML, PNG, or a React/TSX component.

Design & UIIntermediate★ 337⑂ 7AI score 9/10Last updated: Nov 1, 2026

What it does

  • Converts your tech/service list into an engineering-drawing-style diagram with logo tiles, labeled group boxes, and orthogonal arrows on a graph-paper background.
  • Fetches official logos from svgl, devicon, gilbarbara/logos, Lucide pictograms, and the AWS Architecture Icons package — with a strict "never recolor a logo" rule.
  • Ships a self-contained HTML file (icons and fonts inlined as data URIs) as the source of truth, then derives PNG (light + dark), a dependency-free React/TSX component, or a published artifact.
  • AWS diagrams follow AWS's own drawing conventions: Region/AZ/VPC containers, public vs private subnets, open arrowheads, full service names.
  • Includes a built-in verification loop — render the PNG and inspect it for arrows crossing labels, invisible white-on-white icons, and clipped group boxes.

Who it's for

  • Developers who need a stack overview for a README, blog post, or conference slide.
  • Infra/DevOps engineers documenting AWS, Cloudflare, or Kubernetes topologies.
  • Tech leads and founders who want polished diagrams instead of hand-drawn boxes.

Example uses

  1. "We run TanStack + Hono + Drizzle on Cloudflare D1 — draw our architecture" → grouped HTML diagram plus a PNG, with the primary request flow highlighted.
  2. "AWS diagram: ALB → ECS Fargate → RDS" → official AWS icons inside a VPC with public/private subnets split out.
  3. "Give me light and dark PNGs for the README" → both themes screenshotted at 2x from the same HTML file.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/caru-ini/stack-diagram/HEAD/skills/stack-diagram/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/stack-diagram folder from the GitHub repo caru-ini/stack-diagram into my ~/.claude/skills/stack-diagram/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/caru-ini/stack-diagram.git /tmp/stack-diagram && mkdir -p ~/.claude/skills && cp -r /tmp/stack-diagram/skills/stack-diagram ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and clone the repository: git clone https://github.com/caru-ini/stack-diagram.git
  2. Copy the skill into Claude Code: mkdir -p ~/.claude/skills && cp -r stack-diagram/skills/stack-diagram ~/.claude/skills/
  3. Confirm you have Python 3.9 or newer: python3 --version
  4. For PNG output, install the browser renderer: pip install playwright && python3 -m playwright install --with-deps chromium
  5. Make sure outbound network access to svgl.app, raw.githubusercontent.com, cdn.jsdelivr.net, and aws.amazon.com is allowed so logos can be fetched.
  6. Restart Claude Code and ask something like "draw an architecture diagram of my stack" — the skill triggers automatically.
View source on GitHub ↗License: MIT