AI-Powered Stack Diagrams with Brand Logos & Clean Layouts

AI-Powered Stack Diagrams with Brand Logos & Clean Layouts

This AI agent skill creates detailed cloud-architecture-style diagrams of tech stacks, system architectures, infrastructure layouts, and service topologies. It uses real brand logos, grouped containers, and clean orthogonal arrows. Outputs are delivered as self-contained HTML, PNG images, React/TSX components, or live artifacts.

What this skill does

• Generates engineering-style architecture diagrams with real logos on white tiles and labeled group boxes similar to cloud-vendor VPC diagrams.
• Introduces clear orthogonal arrows with monospace labels, all laid on a graph-paper-like background.
• Provides a self-contained HTML file as the primary source, from which PNG, TSX, and live artifact versions are derived.
• Supports diagram creation in any programming language, and not limited to cloud services.
• Accommodates user requests for various diagram types, including architecture, system, stack, infrastructure, or tech-stack overviews.

Who it is for

This skill is ideal for developers and teams using AI coding agents such as Claude Code, Cursor, and Codex. It assists those needing to organize and visualize complex technical architectures or service topologies efficiently.

Use cases

• Creating a visual overview of multi-component tech stacks to share with new team members or stakeholders.
• Designing infrastructure layouts for service launches or updates.
• Planning system architectures and sharing them within development teams to ensure alignment and understanding.
• Compiling service topology diagrams for presentation in project meetings or technical reviews.

Technical details

• Requires Python 3.9+ for running scripts such as `fetch_icons.py` and `build.py`, using only the standard library.
• Fetches brand icons via network access from sources like svgl.app, raw.githubusercontent.com, cdn.jsdelivr.net, and the brand's own sites.
• Uses Playwright and Chromium for rendering PNGs, necessitating installation with `pip install playwright && python3 -m playwright install --with-deps chromium`.

Source & Licence

This package is built on open-source work published by caru-ini (caru-ini/stack-diagram) and distributed under MIT. The original licence text and copyright notice are included in your download.

Personal and commercial use, modification and redistribution are permitted, provided the original copyright and licence notice are retained.

Your purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.

Delivery & Support

• Delivery: instant — a secure download link is emailed to you as soon as payment is confirmed.
• Format: ZIP archive containing the skill files, documentation and the original licence.
• Support: support@mcpcart.com — we aim to reply within 2 business days.
• Updates: updates are included only where stated on this page.

Refunds

This is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.

Claude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.