用途：diagram-scaffolder 是一个技能，用于生成与教程自定义 Markdown 渲染管线集成的可交互图表组件。它适合在教程内容中新增可视化图表、创建架构插图（如系统图、流程图），或构建带可点击阶段/节点的交互式可视化，以及为 :::diagram <name> 块提供后端 React 组件。
主要能力：新增一张图表需要协同修改 4 个文件：src/components/diagrams/NewDiagram.tsx（React 组件）、src/components/diagrams/index.ts（barrel 导出）、src/components/StepCard.tsx（解析分支与导入）、src/content/**/module-*.md（Markdown 引用）。数据流为：Markdown 中的 :::diagram my-diagram ::: 经 StepCard 的 parseContentBlocks() 解析为 { type: 'diagram', diagramName: 'my-diagram' }，再由 renderBlock() 的 switch 分支渲染 <MyDiagram />。技能还提供现有图表注册表（如 file-hierarchy、mcp-architecture、workflow-comparison、agent-orchestration、ai-testing-flow、capstone-architecture、agentic-loop、provider-abstraction、skill-system-flow、spec-driven-cycle）及其对应组件与所在章节。
使用方式：遵循命名约定——Markdown 名为 kebab-case，组件名为 PascalCase 加 Diagram 后缀，文件名与组件名一致，且二者需通过 kebab-case 转 PascalCase 并追加 Diagram 保持关联。可选用静态图表模板或交互式图表模板（使用 useState 管理点击阶段）。设计模式包含统一的 Tailwind 配色（蓝=输入/开始/用户操作，紫=思考/推理/AI 处理，琥珀=决策点/警告，绿=执行/成功/输出，青=数据流/反馈，玫瑰=停止/错误/终止状态），图标使用 @phosphor-icons/react 的 duotone 风格、size 22。无障碍要求根元素带 role="figure"、data-diagram="kebab-name"、aria-label，交互元素用 <button> 而非 div onClick。响应式方面横向流式布局使用 overflow-x-auto，节点设 min-w-[80px] 防止挤压。新增步骤为：创建组件、在 index.ts 导出、在 StepCard.tsx 导入并在 renderBlock 的 case 'diagram' 中注册、最后在 Markdown 中用 :::diagram your-diagram 引用。校验可使用提供的 PowerShell 脚本审计所有图表引用与注册情况，并运行 npm run build；缺失导入或未注册的图表会导致构建错误或静默返回 null，需在浏览器中确认渲染。完成后按清单逐项核对（命名导出、导出、导入、switch 分支、无障碍属性、键盘操作、横向溢出、明暗主题渲染、Markdown 引用、构建成功）。
适用场景：面向使用该教程仓库 Markdown 渲染管线的开发者，在教程、进阶或终端模块内容中新增架构图、流程图或交互式可视化。
限制：技能资料仅描述该特定教程项目的组件结构与约定，未提供通用安装命令、通用配置或独立使用方式；具体内容与既有图表清单以资料为准，其他项目需自行适配。