Describe your project in one sentence — get a diagram with the real logos

Ask an image model to draw "a site on Vercel, database on Supabase, payments via Stripe". You'll get a pretty picture — with logos that look real the way a market knock-off does. Letters melt, icons are made up, an arrow stabs through a label.

The idea in one line: write one sentence about what your project is built on — and get a clean architecture diagram with the official logos, in light and dark themes. One you'd happily put in a README or drop in a chat.

Why this only just got easy

On November 1, 2026 an open skill called stack-diagram (MIT) came out for Claude Code, Codex, Cursor and other agents that support skills. Nearly 900 stars in a day.

The trick is that it doesn't draw logos — it downloads them: first from svgl, then devicon, then gilbarbara/logos or the brand's own repo. AWS icons come from AWS's official package. Nothing is recoloured or redrawn.

And the agent routes lines around the labels. Then it renders the diagram and checks it itself before handing it over. The output is a single HTML file with fonts and logos inlined: it opens anywhere, even offline. You can also get a PNG, a React component or a Claude artifact.

What you'll learn

• What parts your app is made of: frontend, API, database, auth, payments, deploy.
• How they talk: over HTTPS, SQL, RPC — and why it's worth labeling that on the arrow.
• How to describe a system in words both a human and an agent understand.
• How to install agent skills with one command.

Starter prompt

Install the skill with one command (needs Python 3.9+ and internet — for the logos):

npx skills add caru-ini/stack-diagram

Then precision decides everything. "Draw a diagram" is a guessing game. List the parts and the links:

Not sure what your project is built on? Ask the agent first: "read package.json and describe my stack in one sentence" — then hand that to the skill.

What you'll get

A tidy diagram: white tiles with native logos, the user on the left, deploy at the bottom, labeled arrows that never cross the text. Two versions — light and dark. In dark mode the tiles stay white so logos keep their own colours.

That's what serious projects put at the top of their README. And it's handy to show a friend or a mentor: "look, here's how it works" — instead of explaining with your hands.

Honest limits: the diagram is drawn from your description, not from the code. Describe it wrong and you get a beautiful lie. After drawing, the skill offers once to post the diagram to a public gallery — it shows what will go public and posts only after two "yes"es. Your prompt itself is never sent.

A year ago an "AI diagram" meant a picture with fake logos. Now the agent fetches the real ones — and checks that no arrow runs into the text.

Source: stack-diagram — an architecture diagram with official logos from one sentence (GitHub, caru-ini)