Draw.io插件需手动配置文件关联和渲染器才能正常编辑预览；Markdown嵌入需特定语法+插件支持；导出中文乱码须用Web安全字体并勾选内联样式。

Draw.io 插件在 VSCode 里能画流程图，但默认不支持实时预览和自动保存到 .drawio 文件——必须手动配置才能真正用起来。

为什么打开 .drawio 文件只显示 XML 源码？

VSCode 默认把 .drawio 当作纯文本文件处理。Draw.io 官方插件（drawio-diagrams）本身不接管文件关联，需要手动设置 files.associations 和启用渲染器。

• 在 VSCode 设置（settings.json）中添加：

  "files.associations": {
    "*.drawio": "drawio"
  }

• 确保已安装插件 drawio-diagrams（作者：hediet），不是旧版 vscode-drawio
• 重启 VSCode 后，双击 xxx.drawio 才会进入图形编辑界面，而非 XML 编辑器

如何让 Draw.io 图表嵌入 Markdown 并实时预览？

VSCode 原生 Markdown 预览不识别 标签或 base64 内联图，需配合特定写法 + 插件协作。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 推荐方式：用相对路径引用外部 .drawio 文件，在 Markdown 中写

  ```drawio
  file: ./flowchart.drawio
  ```

• 前提是已安装 Markdown Preview Mermaid Support 或 Markdown All in One（仅后者支持该语法）
• 注意：路径必须是工作区根目录下的相对路径；file: 后不能有空格，也不能用绝对路径
• 修改 .drawio 文件后，需手动刷新 Markdown 预览（Ctrl+Shift+P → “Markdown: Refresh Preview”）

导出图片时中文乱码、字体缺失怎么办？

Draw.io for VSCode 使用内置 Web 版引擎渲染，不读取系统字体，中文默认 fallback 到无衬线字体，且导出 PNG/SVG 时若未显式指定，会丢失样式。

• 在图表编辑界面右上角点击 Arrange → Insert → Advanced → Style，为文字框手动加

  fontFamily=Helvetica;fontSize=14;

• 避免使用“微软雅黑”“思源黑体”等本地字体名；Web 环境安全字体只有 Helvetica、Arial、Verdana、Times New Roman
• 导出前务必勾选 Include a copy of the diagram（否则 SVG 不含内联样式，打开后文字可能变英文）

最常被忽略的是：Draw.io 插件的编辑器是沙箱化的 Web View，它不访问本地文件系统，也不同步 VSCode 的主题色或缩放设置——所有样式、导出行为、字体表现都以 Web 版 draw.io 为准，别指望它像桌面版一样自由调用系统能力。