whereismyai
Stack Diagram
Stack Diagram is an agent skill that turns a one-sentence text description of a tech stack into an architecture diagram complete with official logos.
Stack Diagram is an agent skill that converts written tech stack descriptions into visual architecture diagrams. It integrates with agents that support skills, such as Claude Code, Codex, and Cursor, or runs in Claude apps by uploading a zip file. Diagrams are rendered in both light and dark themes using official logos pulled from sources like svgl, devicon, and AWS Architecture Icons without recoloring them. Output options include a self-contained HTML file with inlined fonts and logos, PNG images, or a dependency-free React component. It requires Python 3.9+ and network access, using Playwright with Chromium for PNG exports.
Stack Diagram at a glance
Key features
- Fetches official brand logos from sources like svgl, devicon, and gilbarbara/logos
- Uses official AWS icons for AWS architectures
- Renders every diagram in both light and dark themes
- Generates self-contained HTML files with inlined fonts and logos
- Exports to PNG via Playwright and Chromium
- Produces dependency-free React components
- Routes connector lines around labels to prevent overlapping text
Use it for
- Visualizing web application architectures and cloud deployments
- Mapping development and monorepo tooling setups
- Diagramming AI application workflows and data pipelines
- Creating cloud infrastructure diagrams with official AWS icons
- Sharing diagrams as Claude artifacts, wiki graphics, or repo assets
Alternatives to Stack Diagram
- Diagram Design — Generates editorial-quality visual types matched to brand colors and typography in seconds.
- Draw.io Skill — Synchronizes diagrams with code changes without discarding manual layout adjustments.
- Agent Skills — Encodes senior-engineer workflows and quality gates into 24 skills.
- pstack — Improves AI coding agent outcomes with rigorous workflows.
- Archify — Generates interactive HTML diagrams with motion and export from code or descriptions.
- Visual Explainer — Replaces unreadable terminal ASCII art and tables with interactive HTML.
- ModLens — Converts screenshots and charts into structured JSON data for coding agents.
- Markdown Viewer Skills — Extends AI coding agents with structured visualization capabilities.
- Claude Skills Pack — 388 production-ready skills across 13 tools with zero-dependency Python tools.
- Tstack — Automates complex pull request workflows and multi-model code reviews.
- CodeGraph — It eliminates file crawling, reducing AI agent tool calls by 88% and cutting costs.
- P3 Stack — Native T3 orchestration with worktree threads and delegated subagents.
All Stack Diagram alternatives