VSCode 的 Draw.io 插件支持将架构图以 XML 格式嵌入代码仓库，实现版本控制与协作：安装插件后创建 .drawio 文件，配置自动格式化并确保 Git 跟踪，还可通过超链接关联源码。
如果您希望在代码仓库中直接编辑和维护架构图，VSCode 的 Draw.io 插件可将图表文件（.drawio）作为文本资源嵌入项目，并支持版本控制与协作。以下是实现该目标的操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用 Draw.io 插件
Draw.io 插件需先在 VSCode 中正确安装并激活，才能识别 .drawio 文件并提供图形编辑界面。插件本身不依赖外部服务，所有绘图操作均在本地完成，确保架构图文件可被 Git 跟踪。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 Draw.io Integration，选择由 Henri Helvetica 发布的官方插件。
3、点击“安装”，安装完成后点击“重新加载”按钮使插件生效。
二、在仓库中创建并编辑 .drawio 文件
VSCode 的 Draw.io 插件支持直接在编辑器内打开和保存 .drawio 文件，其内容以 XML 格式存储，天然适配 Git 差异比对与合并，便于团队协同维护架构图。
1、在 VSCode 资源管理器中右键点击目标文件夹（如 docs/ 或 diagrams/）。
2、选择“新建文件”，命名为 system-architecture.drawio。
3、双击该文件，VSCode 将自动调用内嵌的 Draw.io 编辑器，此时可拖拽组件、连接节点、添加文字说明。
三、配置自动保存与 Git 提交策略
为确保每次修改都生成可追踪的变更记录，需明确 .drawio 文件的保存行为与提交规范。插件默认实时保存，但需确认文件未被 .gitignore 排除，且建议使用一致的压缩与格式化设置避免无意义 diff。
1、检查项目根目录下的 .gitignore 文件，确认其中不含 *.drawio 或相关路径条目。
2、在 VSCode 设置中搜索 drawio.formatOnSave，将其设为 true，确保每次保存时自动标准化 XML 格式。
3、提交前在源代码管理视图中查看 .drawio 文件的变更预览，确认仅包含预期的结构或样式调整。
四、嵌入代码注释与文档联动
Draw.io 支持在图表中添加超链接与自定义属性，可将架构图节点与仓库中的具体文件、函数或 README 片段建立关联，提升文档可追溯性。
1、选中某个形状（如“API Gateway”矩形），右键选择“编辑链接”。
2、在链接字段中填入相对路径 ./src/services/gateway.ts 或 GitHub 文件 URL 片段。
3、保存后，按住 Cmd 键点击该形状即可在 VSCode 中跳转至对应源码位置。
