stack-diagram

# stack-diagram

Turns a one-sentence description of your tech stack into an architecture diagram with official logos, saved as PNGs and one HTML file. For developers who use Claude Code, Codex or Cursor.

Made by caru-ini on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: stack-diagram is a skill that draws architecture diagrams for your coding agent. You describe your stack in a sentence, and it returns a diagram that uses each tool's official logo. It also covers dev tooling, AI apps, and AWS, Google Cloud and Azure with those clouds' own icons.

Who it suits: It suits developers and tech leads who need a clear picture of how an app fits together, without drawing boxes and arrows by hand.

```table
Industry | Who uses it | How they use it | Example
Software teams | Developers writing docs | Draw the stack for a README or a wiki | Describe a Next.js app and a Hono API on Vercel with Neon, Clerk and Stripe
Cloud engineering | Engineers on AWS, Google Cloud or Azure | Draw an app layout with the provider's own icons | A CDN in front of storage and a load balancer, with a database in a private subnet
DevOps | Teams that keep a monorepo | Map their tooling and CI | A pnpm monorepo with Turborepo, Biome and Vitest, published to npm by GitHub Actions
AI products | Teams building chatbots | Show how a retrieval app is wired | A docs chatbot that searches a vector store and answers with Claude
```

People who need a hand-drawn whiteboard sketch, or a diagram of something other than software, can skip it.

Where to use it: It installs as a skill in agents that support skills, and it has a zip file for the Claude apps.

- Claude Code
- Codex
- Cursor
- Any other coding agent with skill support
- The Claude apps, by uploading stack-diagram.zip from the project's releases page as a skill
- A repo, a wiki or a Claude artifact, for sharing the finished diagram

```table
Use case | Who | What they get back
Document an architecture | A developer | A diagram with official logos, in light and dark versions
Show dev tooling | A platform engineer | A map of the tools and CI steps around a monorepo
Share a diagram | A team lead | One HTML file with fonts and logos inlined, which renders without a network
```

How to set it up: You need a coding agent that supports skills and Node.js, which provides npx.

1. Run the install command below.
2. Start your agent and ask it to diagram your stack.
3. In the Claude apps, skip the command and upload stack-diagram.zip from the project's releases page as a skill.

```bash
npx skills add caru-ini/stack-diagram
```

How to use it: Ask your agent to diagram your stack, and name the tools and how they connect. It writes the diagram and shows it in light and dark. When it finishes, it offers once to post the diagram to a public gallery, and you can say no.

Example: You say "Diagram a Next.js app and a Hono API on Vercel, with Postgres on Neon, Clerk, Stripe and GitHub Actions". You get a diagram with each tool's official logo and arrows that show how the pieces connect.

For newcomers and experts: A skill is a set of instructions your coding agent loads when it needs them. This one teaches the agent to turn a short stack description into a picture. A good first try is to install it and describe your own project in one sentence.

A finished diagram is a single HTML page that carries its fonts and logos inside it. The PNG images and a React component all come from that one page. White tiles let each logo show its real colors. In the dark theme, group labels switch to that brand's dark logo.

```flow
You describe your stack in a sentence
The agent draws it with official logos
It renders one HTML file with fonts inlined
PNGs and a React component come from that file
The agent offers once to post it to the gallery
```

Good to know:

- Every diagram is rendered in both light and dark themes
- The HTML file renders anywhere, with no network needed
- Gallery posting is optional, and it posts only after you confirm twice
- What goes public: both PNGs, a title in English, your tech stack and a display name
- Nothing from your prompt goes up
- A GitHub login is optional. It is never displayed and only lets you delete the post afterward

## On GitHub, 6 November 2026

- Stars: 1,897
- Forks: 87
- Watching: 3
- Open issues and pull requests: 0
- Language: TypeScript
- License: MIT
- Topics: agent-skills, architecture-diagram, claude-code, claude-skills, codex, diagram, system-architecture, tech-stack

## Links

- Code: https://github.com/caru-ini/stack-diagram
- Releases: https://github.com/caru-ini/stack-diagram/releases
- Issues: https://github.com/caru-ini/stack-diagram/issues
- Star history: https://www.star-history.com/#caru-ini/stack-diagram&Date

## Get the code

```
git clone https://github.com/caru-ini/stack-diagram.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  5 KB