walkthrough
生成交互式代码库导航图，通过可点击图表快速理解架构与流程。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：walkthrough。 它的用途是：生成交互式代码库导航图，通过可点击图表快速理解架构与流程。 完整的 Skill 内容见：https://321skill.com/skills/walkthrough/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘用walkthrough技能解释一下用户下单的完整流程。’ 它会分析代码中与订单相关的模块，生成一个包含下单、支付、库存更新等关键节点的交互式流程图HTML文件，每个节点都可点击查看详细说明和代码片段，帮助你快速建立全局认知。
介绍
Walkthrough Skill 旨在解决开发者，尤其是新成员，在理解复杂代码库时的认知负担问题。它通过分析代码，自动生成包含可点击流程图或ER图的交互式HTML文档，将抽象的代码逻辑转化为直观的视觉地图。
使用时，你只需向AI Agent提出类似“解释认证流程”或“数据库表结构是怎样的”这样的问题。Agent会并行探索相关代码，识别出5-12个核心概念及其关联，最终在项目根目录生成一个独立的HTML文件并自动在浏览器中打开。
这个技能非常适合需要快速熟悉新项目架构的开发者、进行代码审查的工程师，以及希望为团队创建可视化文档的技术负责人。它能将冗长的代码阅读过程，压缩为几分钟的交互式探索。
建议在探索中等复杂度的功能模块、数据流或数据库设计时使用。对于极其庞大或分散的代码库，可能需要结合更具体的提问来获得最佳效果。生成的文件是静态的，便于分享和存档。
核心特点
与普通代码解释或文档生成技能不同，它核心在于生成“交互式、可点击的Mermaid图表”，将代码结构转化为一个可探索的视觉地图，而非静态文本或简单的代码片段列表，实现了从“阅读”到“导航”的体验升级。
注意事项
不适合用于生成详细的API参考文档或深入的单文件逻辑分析，其强项在于展示模块间关系和宏观流程。
常见问题
生成的HTML文件需要网络吗？
文件完全自包含，依赖通过CDN引入，离线无法加载图表和样式。
支持哪些类型的图表？
主要支持Mermaid流程图和实体关系图，用于展示功能流程和数据库结构。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/walkthrough/raw/index.md 读取 walkthrough 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/walkthrough/raw/index.md（查看排版版本）