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 预览不识别 <diagram></diagram> 标签或 base64 内联图，需配合特定写法 + 插件协作。
- 推荐方式：用相对路径引用外部
.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 为准，别指望它像桌面版一样自由调用系统能力。
