Draw.io Integration插件需正确安装并配置:绑定.drawio后缀、关闭autoRefresh和sync、导出PNG调高Scale、离线需改URL、Markdown内联XML编辑,不支持Mermaid/PlantUML。

能直接画,但默认联网、默认不认 .drawio 文件、默认卡顿——三个默认值不调,体验会断崖式下降。
插件名和安装路径必须对得上
VSCode 扩展市场里搜 Draw.io Integration(作者是 jgraph 或 Haini Hu),不是 drawio、vscode-drawio 或其他变体。装错版本会导致文件打不开、右键无菜单、设置项缺失。装完不用重启,但首次使用前建议关掉所有 .drawio 相关标签页,避免缓存冲突。
.drawio 文件双击打不开?先检查文件关联
VSCode 默认不把 .drawio 后缀绑定到该插件,即使插件已装好。常见现象:双击文件 → 打开成纯文本 XML;右键 → 没有 “Open Diagram” 选项。
- 右键文件 → Open With → 选
Draw.io Diagram(注意不是 “Default Editor”) - 下次打开就会记住;若仍失效,在设置里搜
files.associations,加一行:"*.drawio": "drawio" - 别用
.diagram、.dio或.xml当后缀——只有.drawio被主流版本稳定支持
编辑卡顿、缩放失灵、导出糊图?关掉两个开关
插件默认开启 drawio.preview.autoRefresh 和 drawio.sync.enabled,这对小图友好,但一画微服务拓扑或 K8s 架构(节点 >30 个 + SVG 图标),就会触发 CPU 暴涨、滚动卡顿、甚至画布白屏。
- 进 VSCode 设置,搜这两个配置项,全部设为
false - 导出 PNG 前,手动点工具栏
Export→ 选PNG→ 把Scale改成2(默认是1,文字边缘发虚) - 需要离线?改
drawio.integration.url为本地http://localhost:8000/?embed=1&proto=json(前提是已运行 draw.io Desktop)
嵌入 Markdown 不是自动的,XML 内联要手动配
插件不自动把 .drawio 渲染进 Markdown 预览。想在 README.md 里显示图表,得走内联 XML 路线:
- 在 Markdown 里新建代码块:
```drawio开头,```结尾 - 把
.drawio文件里的 XML 内容复制进去(从<mxGraphModel>开始整段) - 启用
drawio.preview.enabled,右键代码块 →Edit Diagram可图形化编辑,保存后自动更新 XML - 复杂图别硬塞进 Markdown——维护困难、Git diff 失效、协作易冲突
真正容易被忽略的是:插件不支持 Mermaid 语法、不解析 PlantUML、也不转译任何文本 DSL。它就是个轻量 iframe 容器,背后跑的仍是 mxGraph 引擎。想混排多种图表类型,得靠文件拆分 + 手动引用,而不是指望一个插件包打天下。


















