VSCode 的 drawio 插件仅支持预览 .drawio 文件，不支持编辑；它只是调用 draw.io 前端渲染 SVG，未集成编辑逻辑，真正绘图需通过浏览器打开 diagrams.net 或本地部署实例。
Draw.io 插件在 VSCode 里不能直接编辑或保存 .drawio 文件的图形内容——它只支持预览，不支持绘图。 这是绝大多数刚装完插件的人踩的第一个坑。你双击打开 .drawio 文件，看到的是只读 SVG 预览页，点画布、拖组件、连线条？全部无效。
为什么 VSCode 内置的 Draw.io 插件无法绘图
VSCode 官方市场里的 drawio 插件（作者是 hediet）本质是个「渲染器」：它调用本地或在线的 draw.io 前端代码，把 XML 解析成 SVG 显示出来。它没有注入编辑逻辑，也不监听鼠标/键盘事件来修改 DOM 结构。换句话说：drawio 插件 ≠ draw.io 编辑器。
- 它不启动 draw.io 的完整编辑环境（无菜单栏、无工具箱、无样式面板）
- 它不读写
.drawio文件的 XML body，只读取<mxGraphModel>根节点做静态渲染 - 如果你强行在预览页上右键 → “Edit in draw.io”，会跳转到浏览器打开
app.diagrams.net，此时才真正进入编辑状态
真正能绘图的两种可行方案
想在 VSCode 工作流中完成绘制，必须绕过插件限制，用「外部编辑 + 文件联动」的方式：
- 推荐方案：用 VSCode 打开
.drawio文件，按Ctrl+Click（Windows/Linux）或Cmd+Click（macOS）点击文件顶部的「Edit diagram」链接，自动在浏览器中打开 diagrams.net，并保持文件实时同步 - 备选方案：在 VSCode 中安装
Remote - Containers或使用 WSL，再手动部署一个本地diagrams.net实例（需 Node.js + Python 环境），通过http://localhost:8000访问——但配置成本高，且新版 VSCode 对本地服务跨域限制更严 - 注意：不要尝试用
drawio-editor（另一个同名插件），它已两年未更新，不兼容 VSCode 1.80+，启用后会导致workbench.html报错TypeError: Cannot read properties of undefined (reading 'appendChild')
如何确保 draw.io 编辑后文件被 VSCode 正确识别和提交
浏览器中编辑并保存后，VSCode 默认不会自动刷新文件内容（因为 diagrams.net 是把 XML 写回原文件，但 VSCode 可能仍缓存旧版本）。必须手动触发重载：
- 保存后切回 VSCode，右键该
.drawio文件 → 选择Reveal in Explorer，再右键 →Refresh - 或者在 VSCode 中按
Ctrl+R（Windows/Linux）或Cmd+R（macOS）强制重载当前文件 - Git 提交前务必检查：
git diff应显示 XML 内容变更，而非仅时间戳变化；若只看到mtime改了但内容没变，说明保存未成功落盘，需回到浏览器确认是否点了右上角的Save（不是Export） - 避免用
Save As另存为新文件——VSCode 不会自动跟踪新路径，且原文件引用将失效
真正的难点不在“怎么画”，而在于“怎么让画完的内容可信地回到你的代码仓库”。XML 格式对空格、换行、属性顺序敏感，diff 工具容易误判变更；多人协作时若有人用桌面版 draw.io、有人用网页版，mxGraphModel 的 dx/dy 属性精度可能不同，导致看似没改却触发大量 diff 行。这些细节比界面操作更值得花时间对齐。
