Claude Code实操教程：用Opus 5.5自动生成代码库架构图

在Claude Code中可以通过操作，让Opus 5.5为你的代码库自动生成可用于README文档的架构图，每一条连接线都可以关联到代码中具体文件和代码行。

该示例在HeyGen开源项目HyperFrames上运行，生成了一张展示HTML文件转换为MP4过程的架构图，包含9个节点、8条连接线，每一条连接线下方都标注了对应的源代码位置。生成的文件会存放在docs/diagrams/目录下，包括架构图文件和证据说明文档。

首先，在终端安装diagram-design插件，该项目在GitHub有4.8万星标，安装命令如下：

1. 添加插件源：claude plugin marketplace add cathrynlavery/diagram-design
2. 安装插件：claude plugin install diagram-design@diagram-design

开启新的Claude Code会话后，将以下提示词发送给Opus 5.5：

使用diagram-design绘制当前项目的架构图，展示从输入到输出的主要流程。第一次被询问样式时保持默认设置。
- 总共保留约9个节点：合并小型模块，只给1-2个最重要节点设置强调色，所有连接线都要标注内容，并在下方用小号文字标注来源（文件名：行号）。
- 所有节点和连接线都必须有代码来源：可以是依赖声明（如package.json、pyproject.toml等）或者实际的导入、调用。没有来源的连接不要绘制。
- 先生成docs/diagrams/architecture.html，再使用diagram-design的导出功能（/diagram-design:export-diagram）导出同名PNG和SVG文件。如果缺少Playwright，全局安装它，不要修改项目依赖文件。
- 创建docs/diagrams/evidence.md：开头标注当前基于的提交，然后记录每个节点和连接线对应的文件及行号，同时说明你检查过但最终没有保留的关系以及原因。
- 运行工具自带的自检。不要修改docs/diagrams/目录以外的任何文件。开始绘制前，先告诉你计划包含的节点，等待确认后再操作。

最后，为了保持架构图和代码同步，可以将以下内容添加到AGENTS.md文件中：

修改代码前，先对比docs/diagrams/evidence.md中记录的提交和当前代码库，检查架构图的节点和连接是否仍然有效。如果依赖、调用、路由或者模块间的主要数据流发生变化，就在同一个提交中重新绘制架构图，重新导出PNG和SVG，并更新evidence.md。