stack-diagram

What it does

• One sentence in, a checked diagram out — the agent renders the diagram and inspects it before handing it over, and routes lines around labels so no arrow crosses text
• Official logos, fetched for you — svgl, then devicon, then gilbarbara/logos, or the brand's own repository; AWS diagrams use AWS's own icon package; never recolored or redrawn
• Every diagram in light and dark — tiles stay white so logos keep their colors, group labels switch to the brand's dark-theme logo
• One source, four formats — a self-contained HTML file with fonts and logos inlined (default), a PNG, a dependency-free React component, or a Claude artifact
• Worked examples beyond clouds — monorepo tooling (pnpm workspace with Turborepo, Biome, Vitest, Lefthook), an AI docs chatbot (Supabase pgvector, Inngest) and an AWS topology (CloudFront, ALB, Fargate, RDS, ElastiCache)

When to use it

Anywhere an architecture picture has to stay true to the stack it describes: onboarding docs, design reviews, RFCs and wiki pages. Describe the stack in one sentence and drop the result into a repo, publish it as a Claude artifact, or hand a PNG to a teammate. Runs in Claude Code, Codex and Cursor; in the Claude apps you upload the stack-diagram.zip from Releases as a skill instead.

Getting started

npx skills add caru-ini/stack-diagram

# in the Claude apps: upload stack-diagram.zip from Releases as a skill

Needs Python 3.9+ and network access (logos are fetched at build time). PNG export uses Playwright with Chromium.

Things to know

Created 2026-11-01 (306 stars as of writing): one day old, expect the workflow to keep moving. Logos are downloaded at build time, not bundled, so the skill needs network access and cannot draw offline; bundled fonts are SIL Open Font License 1.1. Brand names and logos remain trademarks of their owners — their use in a diagram does not imply endorsement, and the example images in docs/ show third-party logos.