Stack Diagram

What is Stack Diagram?

Stack Diagram is an open-source agent skill that turns a one-sentence description of a technology stack into a visual architecture diagram. It works with AI coding tools like Claude Code, Codex, and Cursor by adding the skill via a single command or uploading a zip file.

The tool fetches official logos from public repositories and vendor sites, ensuring accurate branding without recoloring. It supports major cloud providers including AWS, Google Cloud, and Azure, as well as general development tooling. Lines are automatically routed around labels to avoid overlapping text.

Output formats include a self-contained HTML file, a PNG image, a dependency-free React component, or a Claude artifact. Each diagram renders in both light and dark themes. Users can optionally share their diagrams to a public gallery, though prompts are never sent to external services.

Stack Diagram features

• Generates architecture diagrams from natural language descriptions
• Fetches and uses official vendor and community logos
• Supports AWS, Google Cloud, Azure, and general dev tooling
• Exports to self-contained HTML, PNG, React component, or artifacts
• Renders diagrams in both light and dark themes
• Automatically routes connection lines around text labels

Who uses Stack Diagram and for what

• Documenting a monorepo setup with pnpm, Turborepo, and CI workflows
• Visualizing a full-stack app using Next.js, Supabase, and Vercel
• Mapping out serverless infrastructure across AWS S3, Lambda, and CloudFront
• Creating quick architecture references for team documentation or wikis
• Generating cloud diagrams for Google Cloud GKE and SQL deployments

Stack Diagram FAQ

Comments (0)

Comments and upvotes open when this product launches on ProductPerch.