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。
批量替换指定目录下所有 Git 仓库的远程地址（remote URL）。 当用户需要将 Git 仓库从一个服务器迁移到另一个服务器时使用。 触发词：git remote 替换、git url 批量修改、git 仓库迁移、更换 git 地址、批量修改 remote url。
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 中跳转至对应源码位置。
