かる
@caru_ini
Skill release postCreate editorial visuals
Post summary
Turns a short stack description into an architecture diagram with official logos, grouped boxes, and dark or light output.
stack-diagram: Logo architecture diagrams
Turns a short tech-stack description into an architecture diagram with official logos, grouped boxes, and orthogonal arrows as HTML, PNG, or TSX.
Source facts
- Repository
- caru-ini/stack-diagram
- Last source activity
- November 9, 2026 at 06:00
- Detected SKILL.md language
- English
- Stars
- 2,411
- Forks
- 126
Examples
Author README shows a Next.js + Hono on Vercel stack with Neon, Clerk, Stripe and GitHub Actions rendered as a logo diagram (https://github.com/caru-ini/stack-diagram/blob/9413ef2b611bb695cb969913c829beda828affaf/README.md).
Uses
Use when you need an architecture, system, stack, infra, or service-topology diagram with real logos—even if the tools are not cloud services and you have not named an output format.
Prerequisites
Python 3.9+ and network access to fetch logos (svgl.app, GitHub raw, jsDelivr, AWS icon CDNs, or brand URLs). PNG output also needs Playwright with Chromium.
How to use
Settle nodes/groups/edges from the stack description → run scripts/fetch_icons.py → plan coordinates via references/geometry.md → build HTML with scripts/build.py from assets/template.html → render PNG and review before delivery → deliver HTML/PNG/TSX/live artifact as requested.
Limitations
Icon fetch depends on third-party CDNs and brand sites. PNG path requires Playwright/Chromium. Deeper than one group nesting gets noisy per the skill guidance.
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
19 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview| name | stack-diagram |
|---|---|
| description | Create cloud-architecture-style diagrams of tech stacks, system architectures, infra layouts, and service topologies — with real brand logos, grouped containers, and clean orthogonal arrows — delivered as self-contained HTML, a PNG image, a React/TSX component, or a live artifact. Use this skill whenever the user asks for an architecture / system / stack / infra diagram, a tech-stack overview, a service topology, a cloud-vendor-style diagram, or wants tech logos arranged into a picture of how their services connect — in any language, even if they don't name an output format, and even if the tools involved aren't cloud services. |