必须装 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”，下次仍可能回退到文本视图——因为没写进全局配置。

VSCode

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

下载

• 打开 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 一样顺”，得按它的规则来。