什么是 stack-diagram？
stack-diagram 是一种 AI 代理技能，可将纯英文技术栈描述转换为架构图。无需手动放置图标和绘制连接线，只需用一句话或一小段文字描述服务、关系、协议和部署流程。
例如，下面的提示描述了一个 Web 应用、其 API、数据服务和部署流水线：
绘制我们的技术栈：Vercel 上的 Next.js 和 Hono API。Neon 上的 Postgres，使用 Clerk 进行身份验证，使用 Stripe 处理支付。由 GitHub Actions 负责部署。
该技能适用于 Claude Code、Codex、Cursor 以及其他支持 Agent Skills 格式的代理。
主要功能
- 自然语言输入：无需编写图表语法，即可描述架构。
- 官方徽标：徽标从 SVGL、Devicon、gilbarbara/logos、官方品牌仓库以及 AWS Architecture Icons 软件包等来源获取。
- 精细的连接线布局：连接线会绕开标签，避免箭头穿过文字。
- 浅色和深色主题：每张图都会以两种主题渲染。徽标图块保持白色，以保留原始品牌颜色。
- 多种输出格式：可生成自包含 HTML 文件、PNG 图片、无依赖的 React 组件或可分享的 Artifact。
- 便携式 HTML：字体和徽标会内嵌，因此生成的 HTML 文件无需网络即可渲染。
要求
使用该技能前，请确保环境提供：
- Python 3.9 或更高版本。
- 获取徽标时所需的网络访问权限。
- 将图表导出为 PNG 文件时所需的 Chromium 版 Playwright。
- 支持技能的 AI 编程代理或应用程序。
虽然最终生成的 HTML 输出可以离线运行，但生成过程中需要网络访问，因为徽标是在构建时下载的，而不是随技能一起打包。
安装 stack-diagram
在受支持的编程代理中安装
在终端中运行以下命令：
npx skills add caru-ini/stack-diagram该命令会为支持技能生态的代理安装此技能，包括 Claude Code、Codex 和 Cursor。
在 Claude 应用中安装
对于支持上传技能的 Claude 应用，请打开项目的最新版本，下载 stack-diagram.zip，然后将该 ZIP 文件作为技能上传。
创建第一张架构图
安装完成后，让代理绘制技术栈。实用的提示应明确主要技术、它们的运行位置以及彼此的交互方式。
绘制我们的技术栈：Vercel 上的 Next.js 和 Hono API。
Neon 上的 Postgres，使用 Clerk 进行身份验证，使用 Stripe 处理支付。
由 GitHub Actions 负责部署。这段描述为代理提供了足够的信息，用于表示前端、API、数据库、身份验证提供商、支付提供商和部署工作流。
明确描述关系
为了获得更精确的结果，请在协议或交互类型重要时将其包含在提示中。你可以说明浏览器通过 HTTPS 访问应用、API 通过 SQL 查询数据库，或某项服务执行 RPC 调用。
绘制用户通过 HTTPS 访问 Vercel 上的 Next.js。
Next.js 通过 RPC 调用 Hono API。
API 通过 SQL 查询 Neon，并使用 Clerk 管理会话。
由 GitHub Actions 负责部署应用。项目会渲染结果并在返回前检查图表，帮助避免连接线穿过标签。
图表开发工具
stack-diagram 不局限于云基础设施。它还可以展示 monorepo、本地工具、测试运行器、提交钩子、持续集成和软件包发布流程。
绘制我们的 monorepo 工具链：使用 Turborepo、Biome、Vitest 和 Lefthook 的 pnpm 工作区。GitHub Actions 运行 CI 并发布到 npm。
这类提示会明确工作区边界、其中运行的工具，以及负责 CI 和发布的外部自动化流程。
绘制 AI 应用
AI 应用图可以结合 Web 框架、模型提供商、向量数据库、后台任务和内容来源。请同时描述交互式请求路径以及任何定时摄取流程。
绘制我们的文档聊天机器人：Vercel 上的 Next.js 搜索 Supabase pgvector，并使用 Claude 作答。Inngest 每晚同步 Notion。
这里，提示区分了面向用户的问答流程和每晚执行的同步流程。
绘制 AWS 基础设施
对于 AWS 架构，请直接命名服务和网络边界。stack-diagram 使用 AWS 官方架构图标。
绘制我们的 AWS 应用：CloudFront 位于 S3 和公有子网中的 ALB 前方。Fargate、RDS 和 ElastiCache 位于私有子网中。
这段描述传达了路由层、静态存储、负载均衡器，以及公有子网和私有子网之间的隔离。
选择输出格式
默认结果是一个自包含的 HTML 文件。你也可以直接在提示词中请求其他受支持的格式：
- HTML：最适合代码仓库、内部文档和维基。字体和徽标会嵌入同一个文件中。
- PNG：适用于演示文稿和文档。导出 PNG 需要使用带有 Chromium 的 Playwright。
- React 组件：无需依赖，适合集成到 React 项目中。
- Artifact：适合通过 Claude 发布和分享。
将此技术栈绘制为一个自包含的 HTML 文件：
Vercel 上的 Next.js 调用 Hono API，后者将数据存储在 Neon 中。PNG 文件和 React 组件都从同一个底层 HTML 文件渲染，有助于保持不同输出格式的一致性。
使用浅色和深色主题
每个图表都会以浅色和深色主题渲染。技术图块保持白色，以便官方徽标保留原有颜色；分组标签则可以切换为适合深色主题的品牌徽标。
在代码仓库或维基中发布输出内容时，如果读者可能使用不同的界面配色方案，请保留两种主题。
高级提示词技巧
描述流量方向
产品列表可以说明技术栈包含哪些内容，但方向性语言能解释其工作方式。使用 调用、查询、提供服务、发布、部署 和 同步 等动词。
命名边界和位置
说明组件是否共享部署、属于某个工作区，或位于公有和私有子网中。这些细节有助于图表正确地将相关组件分组。
包括计划任务和自动化
如果某个流程每晚、每次提交或部署期间运行，请将这些信息包含在内。这有助于区分后台工作流和主要请求路径。
请求所需的交付格式
当默认的 HTML 格式不是你需要的格式时，请指定 HTML、PNG、React 或 Artifact 输出。若要获得便于分享且支持离线使用的结果，请请求一个自包含的 HTML 文件。
保持品牌资源不变
该项目不会重新着色或重绘徽标。品牌名称和徽标仍归各自所有者所有，在图表中的出现不代表获得认可或背书。
许可注意事项
项目代码和文档使用 MIT 许可证。捆绑字体使用 SIL Open Font License 1.1。徽标不会随项目捆绑；生成期间会从受支持的徽标集合、AWS、Lucide 或官方品牌来源和代码仓库中下载徽标。
结语
stack-diagram 提供了一种快速方式，可将简洁的架构描述转换为精美的可视化图表，并提供官方徽标、清晰的路由、主题支持以及多种导出选项。安装此技能，清楚地描述组件及其关系，并请求适合你的文档或分享工作流的输出格式。