架构地图到交互课程的源码学习法

是什么 这条推文推荐一条“先地图、后课程”的源码学习路径：用 Cocoon-AI/architecture-diagram-generator 把代码库的组件、模块关系和数据流整理成可独立打开的 HTML/SVG 架构图，再用 zarazhangrui/codebase-to-course 把仓库变为单页交互课程。前者是 Claude Skill，后者是 Claude Code Skill。

核心设计 架构图项目采用自包含输出、深色网格画布、前端/后端/数据库语义配色、连线标签和 PNG/PDF/剪贴板导出；课程项目则组合滚动模块、进度与键盘导航、真实代码—白话解释并排、数据流动画、应用型测验和术语提示，并支持离线单文件使用。两者把全局结构、运行细节和理解校验串成渐进式体验。

关键洞察 它的价值不是替代源码阅读，而是先建立认知索引，帮助 Agent 工程师定位入口、依赖和修改面，也帮助非科班使用者判断 AI 代码是否合理。两个仓库分别有 7063 和 5482 stars，反映出代码理解界面存在明显需求。

边界与风险 架构图依赖输入描述或 AI 分析，可能遗漏隐式依赖；课程若只覆盖选定片段，也会弱化运行时、异常路径和版本差异。因此图表的漂亮与交互性应配合测试、源码核对和真实调用链验证。