stack-diagram

一句话描述技术栈，自动生成带官方 Logo 的架构图

开源 🏷️定价信息待确认 ⏳ 访问状态待核验设计创意 🍴 复刻 75 👀 关注 2

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1730

维护状态活跃

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

项目数据

分类设计创意

开发团队caru-ini

官网地址https://stacks.caru.moe

GitHubhttps://github.com/caru-ini/stack-diagram

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态⏳ 访问状态待核验

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent-skills,architecture-diagram,claude-code,claude-skills,codex,diagram,system-architecture,tech-stack

GitHub 星标★ 1730

上线时间2026-11-01 00:00:00

代码更新2026-11-03

仓库体积3.4 MB

本站数据更新2026-11-05

维护状态活跃

收录时间2026-11-05

浏览次数0

项目介绍

stack-diagram 是一个面向 AI 编程代理的 Agent Skill，用一句话描述你的技术栈，它就能生成带官方 Logo 的架构图。它解决的是「画架构图费时、图标找不齐、风格不统一」的问题：用户只需自然语言说明系统由哪些组件构成，技能会解析技术栈、匹配官方品牌图标并输出结构清晰的架构示意图。核心能力包括：自然语言到架构图的转换、官方 Logo 自动匹配、按技术栈分层布局，以及作为 Claude Code、Codex 等代理的可复用技能被调用。项目用 TypeScript 实现，以 agent-skills 形式分发，适合在 AI 编码工作流中快速产出可分享的架构草图，减少手动绘图和素材搜集成本。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-11-05 · 当前星标 ★ 1730

技术标签

agent-skills claude-code claude-skills codex

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 5 分钟部署方式：命令行工具 5 步

环境要求

已安装 Node.js，命令行可使用 npx
一个支持 skills 的 AI 编程代理（Claude Code、Codex、Cursor 等）
能够访问 npm 软件源的网络环境
Claude 应用用户需准备 Releases 页面下载的 stack-diagram.zip

安装与启动步骤

1确认 npx 可用

该技能通过 npx 分发安装，先确认本机已装 Node.js 且 npx 命令可正常执行。
```
node -v
npx --version
```
2安装技能

在项目或工作目录执行该命令，将 stack-diagram 技能添加到代理的 skills 中。
```
npx skills add caru-ini/stack-diagram
```
3Claude 应用内上传

若使用 Claude 应用而非命令行代理，改为上传 Releases 页面最新的 stack-diagram.zip 作为技能。
4用一句话描述技术栈

在代理中说明系统由哪些组件构成，例如前端框架、API、数据库、认证、支付与部署方式。
5查看生成的架构图

代理会解析技术栈、匹配官方 Logo 并按分层布局输出架构图，可继续追加组件让它重画。