必须配置workbench.editorassociations而非files.associations,其值为{"*.drawio": "hediet.vscode-drawio.editor"},保存后关闭重开文件才生效。

怎么让 `.drawio` 文件双击就进 draw.io 编辑器?
必须配 workbench.editorAssociations,不是 files.associations —— 后者只管语法高亮,前者才决定用哪个编辑器打开。
常见错误是把两者混用:比如给 *.drawio 配了 "javascript",结果文件还是用文本编辑器打开,只是多了 JS 高亮而已。
- 打开
settings.json(快捷键Ctrl+Shift+P→Preferences: Open Settings (JSON)) - 添加字段:
"workbench.editorAssociations",值为对象,键是通配模式,值是扩展注册的编辑器 ID -
vscode-drawio 的编辑器 ID 固定是
"hediet.vscode-drawio.editor",拼错或大小写不对都不生效 - 示例配置:
{
"workbench.editorAssociations": {
"*.drawio": "hediet.vscode-drawio.editor",
"*.dio": "hediet.vscode-drawio.editor"
}
}
保存后,已打开的 .drawio 文件需要关闭再重开,新文件双击即生效。
为什么 `.png` 或 `.svg` 导出文件打不开?
draw.io 默认不支持直接编辑图片文件,但你可以强制让它接管——前提是这些文件确实是 draw.io 导出的(含嵌入的 XML 数据),否则打开会报错或空白。
VS Code 本身对二进制文件有保护机制,workbench.editorAssociations 对 *.png 这类通用后缀默认被拦截,必须加前缀限定。
- 只关联带 draw.io 标识的导出名,例如
"*.drawio.png"、"*.drawio.svg" - 避免配
"*.png",否则所有 PNG 图片都会尝试用 draw.io 打开,失败后可能卡死或崩溃 - 确认文件实际内容:用文本编辑器打开该 PNG,如果开头有
<mxgraphmodel></mxgraphmodel>或<?xml片段,才是可编辑的 draw.io 导出格式
工作区级配置 vs 用户级配置,选哪个?
优先用工作区配置(.vscode/settings.json),尤其当项目里混用多种绘图规范时。
用户级配置(全局 settings.json)一旦设了 "*.drawio",所有项目都生效,看似方便,实则容易冲突:比如某个团队要求用 PlantUML 而不是 draw.io 处理流程图,全局配置会绕过团队约定。
- 工作区配置路径:
your-project/.vscode/settings.json - 它会覆盖用户级设置,且 Git 提交后能同步给协作者
- 如果项目里还有
.plantuml或.puml文件,可单独配"*.puml": "jebbs.plantuml",互不干扰 - 注意:工作区配置只在 VS Code 打开该文件夹时加载,用“文件 → 打开”单个文件不会触发
配完没反应?先查这三件事
最常被忽略的是编辑器 ID 是否已安装并激活。vscode-drawio 必须处于启用状态,且版本兼容当前 VS Code(2026 年最新版需 v1.8+)。
- 运行命令
Developer: Toggle Developer Tools,控制台看有没有Failed to resolve editor报错 - 右下角语言模式显示是否仍是 “Plain Text”?如果是,说明
files.associations没配好,先确保语法识别正确 - 检查扩展是否被禁用:打开扩展面板(
Ctrl+Shift+X),搜vscode-drawio,确认状态是 “已启用”,不是 “已禁用” 或 “已损坏”
真正麻烦的不是配错字段,而是编辑器 ID 和扩展状态脱节——改十次 JSON 不如点一下启用开关。











