stack-diagram

# stack-diagram

把一句话描述的技术栈变成带官方标志的架构图，保存为 PNG 和一个 HTML 文件。适合使用 Claude Code、Codex 或 Cursor 的开发者。

由 caru-ini 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：stack-diagram 是一个为你的编程智能体画架构图的技能。你用一句话描述你的技术栈，它就返回一张用每个工具官方标志画成的图。它也涵盖开发工具链、AI 应用，以及 AWS、Google Cloud 和 Azure，并使用这些云平台自己的图标。

适合谁：它适合需要清楚看到应用如何组合在一起的开发者和技术负责人，省去手工画方框和箭头。

```table
行业 | 谁在用 | 怎么用 | 例子
软件团队 | 写文档的开发者 | 为 README 或 wiki 画出技术栈 | 描述一个 Next.js 应用和 Vercel 上的 Hono API，搭配 Neon、Clerk 和 Stripe
云工程 | 使用 AWS、Google Cloud 或 Azure 的工程师 | 用云厂商自己的图标画出应用布局 | CDN 在存储和负载均衡器前面，数据库放在私有子网里
运维开发 | 维护单体仓库的团队 | 梳理他们的工具链和 CI | 一个带有 Turborepo、Biome 和 Vitest 的 pnpm 单体仓库，由 GitHub Actions 发布到 npm
AI 产品 | 开发聊天机器人的团队 | 展示检索应用是如何连接的 | 一个在向量库里搜索并用 Claude 作答的文档聊天机器人
```

需要手绘白板草图，或者要画软件以外内容的人，可以跳过它。

用在哪里：它作为技能安装在支持技能的智能体里，并为 Claude 应用提供了一个压缩包。

- Claude Code
- Codex
- Cursor
- 任何其他支持技能的编程智能体
- Claude 应用，把项目发布页上的 stack-diagram.zip 作为技能上传
- 仓库、wiki 或 Claude artifact，用来分享画好的图

```table
使用场景 | 谁 | 得到什么
记录架构 | 开发者 | 一张带官方标志的图，有浅色和深色两个版本
展示开发工具链 | 平台工程师 | 一张单体仓库周围的工具和 CI 步骤的图
分享图表 | 团队负责人 | 一个内嵌字体和标志的 HTML 文件，没有网络也能渲染
```

如何设置：你需要一个支持技能的编程智能体，以及提供 npx 的 Node.js。

1. 运行下面的安装命令。
2. 启动你的智能体，让它为你的技术栈画图。
3. 在 Claude 应用里，跳过这条命令，把项目发布页上的 stack-diagram.zip 作为技能上传。

```bash
npx skills add caru-ini/stack-diagram
```

如何使用：让你的智能体为你的技术栈画图，并说出用到的工具以及它们如何连接。它会画出图，并以浅色和深色显示。画完后，它会询问一次是否把图发布到公开图库，你可以拒绝。

示例：你说：“画一张图：Vercel 上的 Next.js 应用和 Hono API，加上 Neon 上的 Postgres、Clerk、Stripe 和 GitHub Actions”。你会得到一张图，每个工具都带官方标志，箭头显示各个部分如何连接。

新手与专家：技能是一组说明，你的编程智能体在需要时才加载。这个技能教智能体把简短的技术栈描述变成一张图。可以先安装它，再用一句话描述你自己的项目。

画好的图是一个独立的 HTML 页面，字体和标志都装在页面里面。PNG 图片和 React 组件都来自这一个页面。白色图块让每个标志显示它真实的颜色。在深色主题下，分组标签会换成该品牌的深色标志。

```flow
你用一句话描述你的技术栈
智能体用官方标志把它画出来
它渲染出一个内嵌字体的 HTML 文件
PNG 和 React 组件都来自这个文件
智能体会询问一次是否发布到图库
```

注意事项：

- 每张图都以浅色和深色两种主题渲染
- HTML 文件在任何地方都能渲染，不需要网络
- 发布到图库是可选的，只有你确认两次后才会发布
- 公开的内容：两张 PNG、一个英文标题、你的技术栈和一个显示名称
- 你的提示词内容不会被上传
- GitHub 登录是可选的。它不会显示出来，只用于之后删除这条发布

## GitHub 上的数据（2026年11月6日）

- 星标：1,897
- 复刻：87
- 关注：3
- 未关闭的议题和拉取请求：0
- 语言：TypeScript
- 许可证：MIT
- 话题：agent-skills, architecture-diagram, claude-code, claude-skills, codex, diagram, system-architecture, tech-stack

## 链接

- 代码：https://github.com/caru-ini/stack-diagram
- 发布版本：https://github.com/caru-ini/stack-diagram/releases
- 议题：https://github.com/caru-ini/stack-diagram/issues
- 星标历史：https://www.star-history.com/#caru-ini/stack-diagram&Date

## 获取代码

```
git clone https://github.com/caru-ini/stack-diagram.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  5 KB