🏠 AI Tools Hub | 首页 | 文章 | 评测 | GitHub热门 | 排行榜

Stack Diagram教程：一句话描述技术栈，Agent画出带官方Logo的架构图

📌 项目日期：2026年11月 | 数据来源：GitHub官方仓库 | 星数：973+

📋 项目简介

每个开发者都写过那句著名的话："我给你描述一下我们的架构……"然后面对一个画图软件发呆。stack-diagram 把这件事变成一句话："Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys."——产出一张带官方Logo的架构图：用户经HTTPS到Vercel上的Next.js，Hono走RPC，Neon走SQL，Clerk管会话，Stripe管支付，GitHub Actions负责部署。

它是Agent技能生态里"小而美"的典型；同赛道工具：Addy Osmani技能集（8.9分）、UI规格图方向的 Dimensional Drawing。

🔧 适合画什么

场景	示例
全栈架构	前端+API+数据库+认证+支付+部署
Monorepo工具链	构建/测试/发布工具流向图
文档配图	README、技术方案、新人onboarding

📦 安装

npx skills add caru-ini/stack-diagram

# Claude应用用户：Releases下载 stack-diagram.zip 作为技能上传
# 支持 Claude Code / Codex / Cursor / 其他skills兼容Agent

✅ 使用建议

描述时点名服务+托管方+协议三要素，图最准确
README/onboarding/技术方案 review 前先出一张图，沟通成本骤降
官方Logo自动匹配——比手画截图体面得多

📚 常见问题

stack-diagram是什么？

一个Agent技能：用一句话描述你的技术栈，得到一张带官方Logo的架构图——谁连谁、走什么协议、部署在哪，一眼看清。

怎么安装？

npx skills add caru-ini/stack-diagram，支持Claude Code、Codex、Cursor及其他支持skills的Agent；Claude应用里把Releases的stack-diagram.zip作为技能上传。

典型例子？

"Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys."——用户→Next.js(HTTPS)→Hono(RPC)→Neon(SQL)+Clerk+Stripe+部署流向全画清。