stack-diagram：一句话生成带品牌图标的架构图

获取下载链全程约 1 分钟

打开微信，搜索「软件教程管家」关注，或长按下方二维码关注
回复关键词 stack-diagram
公众号自动回复网盘链接，点击即可保存下载

打开微信扫一扫关注
或搜索【软件教程管家】

写技术文档、做项目评审、给客户讲方案时，一张清晰的架构图往往比几百字描述更管用。stack-diagram 是一个面向 AI 编程代理的开源技能：你只需要用一句话描述技术栈，它就能生成一张带品牌官方图标的架构图，并导出为网页、图片或可直接复用的 React 组件，不用再手动拖图标、对齐连线。

项目名称	stack-diagram
仓库地址	caru-ini/stack-diagram
开发语言	TypeScript
开源协议	MIT
Star 数	约 2400（截至 2026-11-12，仍在增长）
适用代理	Claude Code、Codex、Cursor 及其他支持 Agent Skills 的 AI 编程代理

stack-diagram 是什么

stack-diagram 的定位很聚焦：它是给 AI 编程代理用的架构图生成技能，而不是一个独立的画图软件。你在对话里用自然语言描述技术栈，比如“一个用 Next.js 做前端、PostgreSQL 存数据、部署在 Vercel 上的博客系统”，代理调用这个技能后，就能输出一张带品牌标识、分组和连接关系的架构图。

图标是它的一大卖点：项目使用未经重新着色或重绘的品牌官方或社区图标资源，图标来源包括 svgl、devicon、gilbarbara/logos，以及 AWS、Google Cloud、Azure 的官方图标库，画出来的图一眼就能认出用的是哪些服务，而不是一堆灰色方块加文字。

核心功能

一句话出图：用自然语言描述技术栈，即可生成带品牌标识的架构图，不用手动画布、拖组件。
品牌图标原样呈现：图标保持官方配色，不重新着色、不重绘，浅色和深色主题下图标颜色都不变。
连线自动绕行：连接线会绕开文字标签处理，不会出现线穿字的脏图。
多格式导出：可输出自包含 HTML、PNG、无依赖 React 组件或 Claude Artifact，按需选用。
双主题渲染：浅色与深色主题同时生成，放到浅色文档或深色演示里都合适。
可选公开图库：生成结果在你确认后可以发布到公开图库，发布前会展示拟公开的信息。

一句话生成架构图：上手步骤

stack-diagram 本身是一个技能包，使用方式取决于你用的代理，具体步骤如下：

确认环境：代理须支持 Agent Skills（如 Claude Code、Codex、Cursor），并准备好 Python 3.9 以上版本与网络访问，用于获取品牌图标。
安装技能：按仓库 README 的说明把技能装进你的代理；Claude 应用可从 Releases 下载 stack-diagram.zip 后作为技能上传。
一句话描述技术栈：在代理对话里写清楚你的技术栈，例如“React 前端 + Node.js API + PostgreSQL + Redis 缓存，部署在 AWS 上”。
确认生成结果：代理会返回架构图，检查分组、连线和图标是否与你的实际架构一致，有出入直接在对话里让它改。
选择导出格式：要放进文档就导出自包含 HTML 或 PNG；要嵌进项目页面就导出无依赖 React 组件。

能导出哪些格式

自包含 HTML：字体和图标都内联在文件里，离线也能打开渲染，适合放进 Wiki 或随仓库分发。
PNG 图片：可直接插进 PPT、文档或评审材料，导出依赖 Playwright 与 Chromium，环境需要提前配好。
无依赖 React 组件：生成的组件不带额外依赖，可以直接放进自己的前端项目里用。
Claude Artifact：生成结果可发布为 Artifact，在 Claude 对话里直接查看和分享。

适用场景

项目说明文档：给新同事或合作方一张图讲清系统由哪些部分组成。
技术评审：评审会上用架构图对齐各方理解，比口头描述效率高。
云平台部署示意：展示服务在 AWS、Google Cloud 或 Azure 上的分布。
开发工具链图：把 lint、测试、构建、部署等环节画成一张链路图。
AI 应用组件关系图：展示大模型、向量库、API 层之间的数据流向。
仓库或 Wiki 配图：README 里放一张架构图，别人一眼看懂项目结构。

注意事项

生成图标需要联网：图标资源要从网络获取，离线环境无法按 README 所述拿到图标，生成会受限。
PNG 导出有额外依赖：需要 Playwright 和 Chromium，相关运行环境要提前配置好，否则只能导出 HTML 或组件。
公开图库会公开信息：发布到公开图库会公开浅色与深色 PNG、英文标题、技术栈和显示名称，发布前务必确认信息披露范围，涉及内部系统信息的不要公开。
复杂布局要人工复核：README 没有完整说明自然语言解析、复杂布局和错误修正的规则，复杂架构生成后一定要自己检查布局是否清晰、连线是否正确。
维护状态要结合源码判断：公开信息有限，长期使用前建议看一眼 README 和源码，确认项目在你的代理环境下仍能正常工作。
升级后重新验证：升级技能包或代理后，建议重新验证 HTML、PNG、React 组件及 Artifact 输出是否正常。

工具	出图方式	品牌图标	适合场景
stack-diagram	一句话描述自动生成	官方图标原样呈现	快速出架构图、配文档和评审
draw.io / diagrams.net	手动拖拽绘制	需自己找图标库	精细控制每一处布局
Mermaid	写代码定义图形	无品牌图标	写在 Markdown 里的轻量示意图
Excalidraw	手动手绘风格绘制	无品牌图标	白板讨论、草图风格示意