Draw.io Integration是VS Code中轻量实用的插件，支持在编辑器内直接创建编辑draw.io流程图，无需跳转网页或安装桌面版；默认识别.drawio/.dio文件，内嵌diagrams.net编辑器，支持拖拽绘图、实时保存、多格式导出、Git版本管理及跨平台同步，且完全离线可用。
VSCode 本身不内置完整的文档协作与实时批注能力，真正起作用的是几个关键插件组合——单独装一个“批注插件”基本没用，必须按角色和流程配齐。
GitHub Pull Requests and Issues 插件是协作批注的基础设施
没有它，你在 VSCode 里看到的只是本地注释，根本进不了 PR 流程。它把 GitHub 的评论线程、代码差异锚点、回复状态全部拉进编辑器侧边栏，所有批注都带作者、时间戳和 resolved 状态。
- 必须登录 GitHub 账号并授权该插件访问仓库权限，否则只显示“未连接”
- 启用后，打开一个已存在的 PR，编辑器左下角会自动出现
PR #123状态栏，点击即可加载全部批注 - 在未提交的代码上右键 →
Add Comment，写完点提交，它会暂存为“draft comment”，等你 push 后自动同步到 GitHub - 注意：如果项目用的是 Azure DevOps 或 GitLab，得换对应官方插件，不能硬套 GitHub 插件
CodeTour 适合内部知识沉淀型批注
它不是给外部协作者看的，而是给团队新人或自己三个月后回看代码用的。你可以把一段复杂逻辑拆成几步，每步加语音/文字/代码片段，形成可跳转的交互式导览。
- 安装后用
Ctrl+Shift+P→CodeTour: Create Tour新建，然后逐行录制 - 导览文件是纯 JSON，可提交进 Git，别人 clone 后直接运行就能走一遍
- 不支持图像拖拽或语音嵌入（这是多模态批注的范畴），但胜在轻量、稳定、无服务器依赖
- 容易踩坑：如果 tour 文件路径写死（比如
./src/utils/date.ts），而别人拉代码时目录结构不同，就会跳转失败 —— 建议用相对路径 +**/*.ts这类通配模式
Draw.io Integration + Markdown Preview 实现图文混合批注
当你要解释架构、数据流或组件关系时，光靠文字批注效率极低。Draw.io 允许你在 VSCode 里画图，保存为 .drawio，再用 Markdown 链接到代码旁，形成“图-文-码”三联批注。
- 画完图后导出为 PNG 或 SVG，插入到 README.md 或某个 .md 批注文件中
- 在代码上方加一行
，配合Markdown Preview Enhanced插件，保存即渲染 - 别用截图工具另存为 PNG 再贴 —— 那样无法修改，而 drawio 文件可双击编辑源图
- 性能提示：大型 drawio 文件（>50 个节点）可能让预览卡顿，建议拆分成子图，用链接跳转代替堆在一起
真正的难点不在插件安装，而在谁在什么阶段用哪个功能：GitHub 插件用于对外评审，CodeTour 用于对内传承，Draw.io + Markdown 是设计层沟通。混用或错配，反而增加理解成本。
