caru-ini/stack-diagram

项目介绍

stack-diagram 是一个给编码 Agent 使用的技能：用一句话描述技术栈（例如 Next.js 和 Hono API 部署在 Vercel，Neon 上的 Postgres，Clerk 负责认证，Stripe 负责支付），Agent 就会产出对应的架构图。目标用户是需要一张可展示的系统架构图、但不想手动摆框和收集图标文件的开发者。

技能会从 svgl、devicon、gilbarbara/logos、品牌仓库、AWS 官方图标包和 Lucide 获取 logo，并把连线绕开文字标签。图同时提供亮色和暗色主题。输出可以是字体和 logo 全部内联的自包含 HTML 文件、PNG、不依赖框架的 React 组件，或 Claude artifact。

快速使用

通过 skills CLI 安装：

npx skills add caru-ini/stack-diagram

README 列出 Claude Code、Codex、Cursor 以及其它支持 skills 的 Agent 作为适用客户端。在 Claude 应用里，则改为上传最新 release 中的 stack-diagram.zip 作为技能。安装后向 Agent 描述技术栈，例如：

Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys.

Agent 会渲染并检查图后再交付；默认输出自包含 HTML，也可以指定其它格式。

使用约束

• 需要 Python 3.9+，并为获取 logo 提供网络访问。
• 导出 PNG 依赖 Playwright 和 Chromium。
• logo 在构建时下载而不是随技能打包，可用性取决于所列来源和品牌仓库。所有商标归各自所有者，图中出现 logo 不表示背书。
• 代码与文档采用 MIT 许可证；内置字体采用 SIL Open Font License 1.1。

HotRepo 点评

该项目在 2026-11-01 进入 HotRepo 新项目榜，首个观测窗口内获得 132 个 Star，目前没有 GitHub 日榜名次记录。这一条早期快照只能说明起步阶段的关注度，不足以判断趋势。更值得注意的技术点是分发方式：它通过 skills CLI 和兼容 agentskills 的客户端提供能力，同时把渲染与 logo 解析放在 Python 工具链里保持确定性。

项目源码与说明