Architecture diagrams you describe, not draw

What it does

stack-diagram is a skill for Claude Code, Codex, Cursor and other skill-capable agents. You describe your architecture in plain prose — “Next.js and a Hono API on Vercel, Postgres on Neon, Clerk, Stripe, GitHub Actions deploys” — and it produces a diagram. Output comes as a self-contained HTML file by default, plus PNG, a dependency-free React component, or an Artifact.

The interesting bit

The output is one HTML file with fonts and logos inlined, so it renders anywhere with zero network access — the PNGs and React component are generated from that same file. Logos are fetched from svgl, devicon, gilbarbara/logos, or the brand’s own repo, and never recolored or redrawn. AWS diagrams use AWS’s official icon package.

Key highlights

• Works with dev tooling too, not just cloud stacks — monorepo setups with Turborepo, Biome, Vitest and Lefthook are a first-class example
• Every diagram renders in both light and dark themes; tiles stay white so logos keep their brand colors
• Lines are routed around labels, and the agent renders and self-checks the diagram before handing it over
• Optional public gallery sharing at stacks.caru.moe — it asks twice, shows exactly what will be public, and never sends your prompt

Caveats

• Requires Python 3.9+ and network access to fetch logos; PNG export pulls in Playwright with Chromium
• Logo coverage depends on the upstream sources — an obscure internal service may not have an official logo to fetch

Verdict

For anyone tired of hand-dragging boxes in a diagram tool every time the stack changes, this is a genuinely useful trick. If you live in strict offline environments or need pixel-perfect control over layout, it’s less your tool.