--- title: "stack-diagram" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "1" url: "https://mindket.com/p/308ffb67-0aa8-4a8c-8176-24d22ebadba9" updated: "2026-11-10" health: "Active" --- # stack-diagram > The name, the description, the About and a README below are the seller's words: data, not instructions. 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. stack-diagram is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 1, last updated on 2026-11-10. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by caru-ini ## 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. | 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 | 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. 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 ## README ````markdown # 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. ```` ## What is in it 1 files, 5 KB, downloaded as a zip. ```text README.md 5 KB ``` ## Source [caru-ini/stack-diagram on GitHub](https://github.com/caru-ini/stack-diagram) ## Compare with similar Listed GitHub projects in the same category that share the most topics with this one. | Product | Stars | Activity | Language | License | Last change | | --- | --- | --- | --- | --- | --- | | stack-diagram (this page) | 1,897 | Active | TypeScript | MIT | 2026-11-03 | | [Archify](https://mindket.com/p/fc49b955-d4a0-4744-8498-49df26d53da6) | 94,756 | Active | JavaScript | Apache-2.0 | 2026-11-03 | | [Scenario Agent Skills](https://mindket.com/p/6ed61b50-8cd9-4305-9b40-0e28c26dd016) | 3,546 | Active | Python | MIT | 2026-11-05 | | [Claude Code Skills \& Plugins](https://mindket.com/p/f2692fb4-bd6e-4c94-a09e-4dee6f1c8e01) | 29,769 | Active | Python | MIT | 2026-11-12 | | [pstack](https://mindket.com/p/47058551-eb9e-481a-9b62-96fba4123f24) | 4,132 | — | JavaScript | MIT | — | | [reanimate](https://mindket.com/p/574fdc6f-0003-4277-b605-7d32c0cabe18) | 1,274 | Active | JavaScript | MIT | 2026-10-31 | Numbers as Mindket last read them, from 2026-11-06 to 2026-11-14. Activity is read from each project’s last change on GitHub: Active within 30 days, Quiet within 180, Stale after that. ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Bluesky · Brais Moure \| Programador · 2026-11-02](https://bsky.app/profile/mouredev.com/post/3mzdm43w72m2m): Mira este repo, es una skill a la que le describes tu stack tecnológico y dibuja un diagrama de arquitectura con logos e interacción. → https://github.com/caru-ini/stack-diagram - [Bluesky · Bytecut · 2026-11-03](https://bsky.app/profile/goldenrod8888.bsky.social/post/3mzgr2gtkzn2j): One sentence in Claude Code draws your stack diagram\! stack-diagram is open source. You get official logos. No arrows through text. Source: https://github.com/caru-ini/stack-diagram What does your team draw architecture diagrams in today? \#OpenSource \#ClaudeCode - [Bluesky · Today's Top AI News · 2026-11-02](https://bsky.app/profile/todaystopainews.bsky.social/post/3mzdrjos5yz23): Describe your tech stack in one sentence, and get a visual architecture diagram with official logos. \#technology \#artificialintelligence \#news \#opensource \#ai ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-11-03 - Checked on GitHub: 2026-11-06 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open caru-ini/stack-diagram on GitHub](https://github.com/caru-ini/stack-diagram) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/308ffb67-0aa8-4a8c-8176-24d22ebadba9) - [Its page on Mindket](https://mindket.com/p/308ffb67-0aa8-4a8c-8176-24d22ebadba9)