必须装 drawio-diagrams（作者 hediet），卸载其他 draw.io 插件，重启 VSCode 后手动配置 files.associations 为 "*.drawio": "drawio"，仅支持 .drawio 后缀；导出 PNG 前需调 Zoom 至 200%/300%，禁用云端同步与网络图片，显式设置字体样式。
装对插件、配好后缀、关掉云端同步，才能在 VSCode 里真正离线画图；装错名字或留着默认设置，大概率双击空白、导出糊图、中文乱码。
认准 drawio-diagrams（作者 hediet），别装 vscode-drawio 或 draw.io
VSCode 市场里有多个名字近似的插件，但只有 drawio-diagrams 是当前维护最活跃、适配最新 VSCode WebView 的官方推荐版本。它由 hediet 开发，不是 jgraph 官方的 Draw.io Integration（后者已转向更重的 iframe 加载模式，依赖网络）。vscode-drawio 已停止更新，draw.io（无连字符）是旧弃用版，装了也打不开编辑器。
- 打开扩展面板，搜
drawio-diagrams，确认作者是hediet - 卸载所有带
draw.io字样的其他插件，避免冲突 - 安装后必须重启 VSCode，否则文件关联不生效
files.associations 必须手动加，否则双击 .drawio 还是开 XML 编辑器
插件不会自动注册文件类型，VSCode 默认把 .drawio 当作普通文本。即使你右键选 “Open With → Draw.io Diagram”，下次仍可能回退到文本视图——因为没写进全局配置。
- 打开
settings.json（Ctrl+, → 右上角 {} 图标） - 添加这一行：
"files.associations": { "*.drawio": "drawio" } - 保存后，新建
flow.drawio并双击，才真正进入图形界面 - 别用
.xml、.diagram或.dio：只有.drawio被drawio-diagrams硬编码识别
导出 PNG 模糊？先调缩放再导出，不是改 DPI 设置
VSCode 内嵌的 draw.io 渲染器用的是 1x 像素栅格，直接导出会丢亚像素信息，小字号文字边缘锯齿、箭头毛刺。这不是分辨率设置问题，而是渲染时缩放不足导致的采样失真。
- 编辑时，点右上角
Zoom下拉菜单，选200%或300%（别用 150% 或自定义值） - 再点
File → Export as → PNG，勾选Transparent background和Include a copy of the diagram - 导出对话框里的
Scale滑块保持默认1即可，它控制的是 SVG 导出比例，对 PNG 无效 - 如果仍糊，说明用了非 Web 安全字体：删掉样式里的
fontFamily=微软雅黑，换成fontFamily=Verdana并手动设fontSize=14
中文显示正常但导出乱码？检查是否启用了在线同步和外部图片链接
导出时中文变成方框或宋体，通常不是字体缺失，而是 draw.io 插件在导出流程中 fallback 到了系统默认字体，而该字体未嵌入或未声明。更隐蔽的问题是：你图里插入了网络图片（比如 https://xxx.png），插件在离线导出时无法加载，整个渲染链路中断，连带样式丢失。
- 进插件设置，关掉
drawio.sync.enabled和drawio.preview.autoRefresh（这两项会强制联网并干扰本地导出） - 右键画布 →
Insert → Image，只用项目内相对路径，如./assets/icon.svg，别填 URL - 导出前，在编辑器右上角点
Arrange → Insert → Advanced → Style，给关键文字框加显式样式：fontFamily=Helvetica;fontSize=14; - 如果图里有 UML 类，别拖
UML Class模板——它锁死样式；改用General → Rectangle手动分三栏，字体完全可控
最容易被忽略的一点：插件编辑器是沙箱化的 WebView，它不读取 VSCode 主题、不继承系统缩放、也不访问本地字体列表。所有样式表现、导出行为、甚至快捷键响应，都以 diagrams.net 的 Web 引擎为准。别指望“跟 VSCode 一样顺”，得按它的规则来。
