安装hediet.drawio-diagrams插件，配置"files.associations": {"*.drawio": "drawio"}，新建.drawio文件后双击即可启用内嵌编辑器；否则仅显示xml源码。
装对插件、设好后缀、启用内嵌编辑器——三步到位，否则你双击 .drawio 文件只会看到 XML 源码或空白页。
装哪个插件？认准 drawio-diagrams（作者 hediet）
VS Code 扩展市场里搜 “Draw.io Integration” 会出现多个同名插件，必须选作者是 hediet、ID 为 hediet.drawio-diagrams 的那个。它不是旧版 vscode-drawio（jgraph 作者，已停更），也不是 drawio-editor（两年未更新，VS Code 1.80+ 下直接报错 Cannot read properties of undefined (reading 'appendChild')）。
安装后务必重启 VS Code，否则右键菜单不出现 “Open Diagram”，命令面板也搜不到 Draw.io: Open Diagram。
- 检查是否装对：打开扩展面板 → 点击插件详情 → 确认 Publisher 是
hediet，版本 ≥ 1.7.0 - 如果 Marketplace 安装失败，看 Developer Tools Console 是否有
ERR_CONNECTION_REFUSED或证书错误；国内用户可改用离线方式：下载drawio-diagrams-1.7.0.vsix，再通过Extensions: Install from VSIX手动安装
为什么双击 .drawio 还是显示 XML？补上文件关联配置
插件本身不自动接管文件类型，.drawio 默认仍被识别为纯文本。需手动在 settings.json 中声明关联：
{
"files.associations": {
"*.drawio": "drawio"
}
}
这个配置告诉 VS Code：“所有 .drawio 后缀的文件，都交给 drawio 语言服务处理”，从而触发内嵌编辑器加载。
- 新建文件时必须带
.drawio后缀（如flow.drawio），不能是flow.xml或flow.md，即使内容合法也不生效 - 已有 XML 内容想复用？新建空
.drawio文件 → 粘贴 XML → 按Ctrl+Enter（Windows/Linux）或Cmd+Enter（macOS）强制解析，别只靠Ctrl+S
导出 PNG 模糊、中文乱码？关键参数得手动开
内嵌编辑器默认用 1x 渲染 + 系统字体 fallback，高分屏下 PNG 发虚、中文显示为方块是常态。这不是 bug，是 Web View 渲染策略导致的，必须主动干预：
- 导出前先调高缩放：右键画布 →
Zoom→ 设为200%或300%，再执行导出 - 导出对话框中务必勾选
Use device pixel ratio（这是清晰度核心开关）和Include a copy of the diagram（确保 SVG 导出含内联样式） - 中文不乱码：避免用 “微软雅黑”“思源黑体”；在样式栏（
Arrange → Insert → Advanced → Style）手动加fontFamily=Helvetica;fontSize=14;；Web 安全字体仅限Helvetica、Arial、Verdana、Times New Roman
离线环境能用吗？要关掉在线同步
内网或断网时，默认会尝试连接 app.diagrams.net 加载资源，失败后编辑器白屏或卡死。必须显式启用离线模式：
在 VS Code 设置中搜索 drawio.offline，勾选该选项。它会强制使用插件内置的 diagrams.net 前端代码包，所有渲染、导出、字体加载都在本地完成。
注意：离线模式下，Draw.io: Sync With Online Version 必须关闭，否则每次保存都会触发网络请求并超时；另外，插件的 Web View 不读取系统字体、不同步 VS Code 主题色或缩放设置——所有表现以 diagrams.net Web 版为准，别指望它像桌面软件那样自由调用本地能力。
