stack-diagram：一句话描述技术栈，Agent 画出带官方 Logo 的架构图

写项目文档最磨人的不是画图，是找 Logo——去各家官网逐个扒图、对齐连线、调明暗主题，一下午就没了，成品箭头还压着字。GitHub Daily 11 月 6 日推荐的 stack-diagram（MIT，caru-ini 出品，2026-11-01 建库，截至 11-06 有 1,926 星）是一个 Agent Skill：装进 Claude Code/Codex/Cursor 后，一句话描述技术栈——「Next.js 跑在 Vercel 上，数据库用 Neon，支付接 Stripe」——Agent 就产出一张带官方 Logo 的架构图。

核心功能

• 官方 Logo 自动抓取：按 svgl → devicon → gilbarbara/logos 三级顺序检索，AWS/Google Cloud/Azure 用各家官方图标包，永不重新着色或重绘。
• 连线绕开文字：布线避开标签，Agent 渲染后会先自查再交付——「箭头压字」这个老大难被写进了流程。
• 明暗双主题：每张图同时渲染两套主题，底板保持白色以保留 Logo 原色，分组标签切换品牌暗色 Logo。
• 单文件工件：成品是一个把字体与 Logo 全部内联的 HTML，离线可开；也可导出 PNG 或零依赖 React 组件。
• 可选分享：Agent 会询问一次是否把图发布到公共图库 stacks.caru.moe，明示公开内容并需两次确认，提示词永不上传。
• 依赖极简：需 Python 3.9+ 与网络（拉 Logo）；除 PNG 导出用 Playwright + Chromium 外，常规出图不需要浏览器环境。

典型使用场景

• 项目文档与 README：架构图随手更新，技术栈一变重新生成即可。
• 入职与交接：新人一张图看懂全栈依赖与数据流向。
• 方案汇报：报价单或评审材料里配一张品牌 Logo 齐整的部署图。

快速上手

npx skills add caru-ini/stack-diagram

装好后对 Agent 说一句话描述你的栈即可；需 Python 3.9+ 与网络（拉 Logo），PNG 导出走 Playwright + Chromium。示例图与画廊见仓库 README。对于字体缺失导致的排版偏差，把用到的字体随页面内联是它的默认行为，所以成图在任何机器上打开都一致。

小结

stack-diagram 适合要频繁画架构图的开发者、技术写作与售前团队；需要 UML 时序图或精细自定义布局的画图工具不是它的目标——它专攻「技术栈一张图」这一种产物，也因此把这一种做到了免排版。要点与边界：MIT、TypeScript、Logo 未捆绑而是构建时在线抓取（离线环境不可用）；第三方 Logo 的商标归属归各自所有者。它与本站写过的 terminal-mac、stack 生态条目 一样，都是「Agent 产出即文档」的工具——把最磨人的排版活交给 Agent，人只负责描述。