必须手动配置 files.associations 才能启用右键菜单;保存失败因工作区非 git 根目录;导出中文乱码需安装中文字体并设置 drawio.exportfont;diff 不可读需开启 drawio.compactxml 并配置 .gitattributes 和 git diff.xml.textconv。

Draw.io集成插件装了但右键没“Open Diagram”选项
VSCode里装了官方 drawio-diagrams 插件后,很多用户发现对 .drawio 文件右键没有预期菜单——根本原因是插件默认不自动关联文件类型。必须手动配置 files.associations,否则 VSCode 根本不识别这些文件为绘图资源。
打开设置(Ctrl+, 或 Cmd+,),搜索 files.associations,点击「在 settings.json 中编辑」,添加:
{
"files.associations": {
"*.drawio": "drawio-diagram",
"*.diagram": "drawio-diagram"
}
}
重启 VSCode 后,再双击或右键 xxx.drawio 文件,才会出现 Open Diagram 和 Preview Diagram 选项。
保存时提示“Cannot save diagram: File is not writable”
这个错误通常发生在你用 VSCode 打开的是 Git 仓库的子目录(比如只打开了 docs/),而非整个仓库根目录。插件内部依赖 VSCode 的 workspaceFolders 判断文件写入权限,若工作区不是 git 仓库根,它会误判路径不可写,哪怕文件本身有写权限。
解决方法只有两个:
- 用 VSCode 直接打开整个 Git 仓库根目录(即包含
.git/的那个文件夹) - 如果必须用子目录工作区,可在该工作区根下手动创建空的
.git文件(仅用于欺骗插件识别为 git 环境,不影响真实 git 操作)
注意:drawio-diagrams 不支持 WSL 路径或网络挂载盘(如 /mnt/c/...)直接保存,这类路径需先映射为本地 workspace。
导出 PNG/SVG 时中文乱码或字体缺失
Draw.io 集成插件底层调用的是 Web 版引擎(基于 Chromium 渲染),导出图片时默认使用系统无衬线字体。Linux/macOS 上若未安装 Noto Sans CJK 或 Source Han Sans,中文就会显示为方块或 Helvetica 替代字。
修复方式分两步:
- 确认系统已安装中文字体(例如 macOS 运行
fc-list | grep -i "sans\|cjk";Ubuntu 安装fonts-noto-cjk) - 在 VSCode 设置中搜索
drawio.exportFont,将其设为"Noto Sans CJK SC"或你系统实际存在的中文字体名(注意大小写和空格)
导出前务必点开预览页右上角的 ⋯ → Edit diagram,在 Draw.io 编辑器里手动选中文字 → 右侧样式栏确认字体已生效,否则设置可能被 diagram 内嵌样式覆盖。
多人协作时 .drawio 文件 diff 不可读、Git 合并冲突难处理
Draw.io 默认保存为冗长的 XML,且每次保存都会重排节点顺序、更新时间戳和随机 ID,导致 Git diff 几乎全是噪音,合并不了。
关键动作是启用插件的「精简导出」模式:在 VSCode 设置中开启 drawio.compactXml(默认关闭)。它会移除空格、换行和冗余属性,大幅压缩体积并提升 diff 可读性。
更进一步,建议团队统一加一条 .gitattributes 规则:
*.drawio diff=xml
再配合 Git 配置 git config --global diff.xml.textconv "xmllint --format --recover",就能让 git diff 显示格式化后的结构差异——虽然仍不能语义合并,但至少能看清谁改了哪个框、哪条连线。
真正要避免冲突,只能靠约定:一个图一个文件、禁止多人同时编辑同一 .drawio、复杂图拆成多个子图按模块分工——插件再强,也救不了没流程约束的协作。











