应安装官方 draw.io integration（jgraph）或 drawio-diagrams（hediet）插件，确保文件后缀为.drawio，通过命令面板调用编辑功能，并配置文件关联与启用渲染器以解决加载失败问题。
如果您希望在 VSCode 中直接创建和编辑 draw.io 流程图，但插件无法正常加载或绘图界面不出现，则可能是由于插件未正确安装、文件后缀未关联或编辑器未启用内嵌渲染。以下是解决此问题的步骤：
一、安装正确的 Draw.io 插件
VSCode 市场中存在多个名称相似的插件，仅官方维护的 Draw.io Integration（作者 jgraph） 或 drawio-diagrams（作者 hediet） 支持内嵌编辑；旧版 vscode-drawio 已停更，会导致跳转浏览器而非本地编辑。
1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块）。
2、在搜索框中输入 Draw.io Integration，确认发布者为 jgraph 或在另一搜索中输入 drawio-diagrams，确认发布者为 hediet。
3、点击“安装”，安装完成后点击“重新加载”或手动重启 VSCode。
4、重启后按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Draw.io: Open Diagram，若命令可执行则表明插件已激活。
二、新建并正确打开 .drawio 文件
插件默认仅识别 .drawio 或 .dio 后缀文件；使用其他后缀（如 .xml、.md、.diagram）即使内容合法也不会触发图形编辑器。
1、在资源管理器中右键项目文件夹，选择“新建文件”。
2、将文件命名为 flowchart.drawio（必须含 .drawio 后缀）。
3、双击该文件；若仍显示 XML 源码，请右键 → “Open With” → 选择 Draw.io Diagram。
4、首次成功打开后，VSCode 通常自动记住关联；如未记住，需手动编辑 settings.json，添加：
"files.associations": { "*.drawio": "drawio" }
三、通过命令面板强制调用编辑器
当右键菜单缺失“Open Diagram”选项，或双击无响应时，可绕过文件关联机制，直接调用插件内置命令启动编辑器，适用于任意位置的合法 draw.io XML 内容。
1、按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令面板。
2、输入并选择 Draw.io: Create New Diagram，保存为本地 .drawio 文件。
3、或选择 Draw.io: Open Diagram from Code Block（适用于 Markdown 中的 ```drawio ``` 代码块）。
4、若已有 XML 内容，新建空白 .drawio 文件，粘贴 XML，然后按 Ctrl+Enter（Windows）或 Cmd+Enter（macOS） 触发解析。
四、修复打开后仅显示 XML 源码的问题
VSCode 默认将 .drawio 当作纯文本处理，需显式启用渲染器并确保插件接管文件类型。该问题与插件版本、VSCode 设置及 Marketplace 签名验证状态强相关。
1、确认插件已启用：进入“设置”→ 搜索 drawio.enabled，确保其值为 true。
2、检查 Marketplace 连接：按 Ctrl+Shift+P → 输入 Developer: Toggle Developer Tools，切换至 Console 标签页，查看是否存在 ERR_CONNECTION_REFUSED 或证书错误。
3、国内用户可临时配置代理：设置中搜索 http.proxy，填入可用 HTTP 代理地址；或改用离线安装：前往 GitHub Releases 下载最新 drawio-diagrams-x.x.x.vsix，再通过 Extensions: Install from VSIX 安装。
4、禁用冲突插件：关闭可能劫持 .drawio 关联的旧插件（如 vs-code-drawio、draw.io（无连字符）等）。
五、在 Markdown 中嵌入并编辑图表
原生 Markdown 预览不支持 draw.io 渲染，必须配合特定语法与插件协作；图表内容以 XML 形式内联于代码块中，编辑后需手动回写，不可自动同步。
1、在 .md 文件中插入如下代码块（注意：file: 后无空格，路径为工作区根目录下相对路径）：
```drawio file: ./arch.drawio```
2、确保已安装 Markdown All in One（仅此插件支持 file: 语法）或使用内联 XML 方式：
<diagram name='\"架构图\"'>...</diagram>
3、光标置于代码块内，按 Ctrl+Shift+P → 输入 Draw.io: Edit diagram，唤出图形编辑器。
4、编辑完成后保存，XML 将自动更新回代码块；若未生效，需手动复制编辑器左上角“XML”标签页中的全部内容，粘贴覆盖原代码块。
