vscode中draw.io插件打不开编辑界面，是因为插件仅提供只读svg预览，不支持内嵌绘图；必须安装hediet.drawio-diagrams（≥1.7.0）、手动配置"files.associations": {"*.drawio": "drawio"}，并点击“edit diagram”链接在浏览器中打开diagrams.net进行真正编辑。
VSCode 里装了 Draw.io 插件却打不开编辑界面？不是插件没装对，就是文件没认对，或者你根本没用对命令——三者任缺其一，.drawio 文件就只能当 XML 看。
怎么确认装的是正确的 Draw.io 插件
VS Code 扩展市场搜 “Draw.io Integration”，会出现至少三个同名插件。唯一能用的是作者 hediet、ID 为 hediet.drawio-diagrams 的那个。旧版 vscode-drawio（作者 jgraph）已停更，1.80+ 版本上大概率白屏；另一个 drawio-editor 两年没更新，启用后直接报错 Cannot read properties of undefined (reading 'appendChild')。
安装后必须重启 VS Code，否则右键菜单不出现 Open Diagram，命令面板也搜不到相关命令。检查方式：打开扩展面板 → 点击该插件详情页 → 确认 Publisher 是 hediet，版本 ≥ 1.7.0。国内用户若 Marketplace 安装失败，可去 GitHub releases 下载 drawio-diagrams-1.7.0.vsix，再通过 Extensions: Install from VSIX 手动安装。
为什么双击 .drawio 文件只显示 XML 源码
插件不会自动接管文件类型。VS Code 默认把 .drawio 当纯文本处理，必须手动在 settings.json 中声明关联：
{
"files.associations": {
"*.drawio": "drawio"
}
}
这个配置告诉 VS Code：“所有 .drawio 后缀的文件，都交给 drawio 语言服务渲染”，才能触发内嵌编辑器加载。保存后需重载窗口（Ctrl+R / Cmd+R）。新建文件时必须带 .drawio 后缀（如 arch.drawio），不能是 .xml、.md 或 .diagram——即使内容完全合法也不生效。
如何真正编辑架构图，而不是只看预览
关键点来了：hediet.drawio-diagrams 插件本身只提供内嵌预览，不支持鼠标拖拽绘图。它调用的是 draw.io 前端静态渲染逻辑，没有注入编辑器 UI（无工具栏、无样式面板、无事件监听）。所以你看到的“编辑器”其实是只读 SVG。
真正能画图的方式只有两个：
- 在 VS Code 中打开
.drawio文件，点击顶部链接Edit diagram（按住Ctrl/Cmd单击），自动跳转到app.diagrams.net浏览器页面，此时才是完整编辑环境，且支持实时保存回原文件 - 如果需要离线或定制化，可本地部署 diagrams.net（需 Node.js + Python），但新版 VS Code 对
http://localhost:8000跨域限制更严，配置成本高，不推荐日常使用
浏览器中编辑并保存后，VS Code 不会自动刷新文件内容。务必手动重载：右键文件 → Reveal in Explorer → 右键 → Refresh，或直接按 Ctrl+R。Git 提交前检查 git diff，确保看到的是 XML 内容变更，而非仅时间戳变化。
导出 PNG 模糊、中文乱码怎么办
这不是 bug，是 Web View 渲染策略导致的默认行为：
- 导出前先右键画布 →
Zoom→ 设为200%或300%，再执行导出 - 导出对话框中必须勾选
Use device pixel ratio（这是清晰度核心开关）和Include a copy of the diagram（确保 SVG 含内联样式） - 中文乱码主因是字体 fallback 失败。避免用 “微软雅黑”“思源黑体”；在样式栏（
Arrange → Insert → Advanced → Style）手动加fontFamily=Helvetica;fontSize=14;；Web 安全字体仅限Helvetica、Arial
最常被忽略的一点：你以为在 VS Code 里点开了 Draw.io 就能画图，其实只是打开了一个“XML 查看器”。真正的编辑永远发生在浏览器里，文件同步靠的是 diagrams.net 把 XML 写回磁盘，VS Code 只负责读取——这两步之间没有任何魔法，只有配置、路径和手动重载。
