VSCode 的 Draw.io Integration 插件通过 iframe 嵌入在线 draw.io 编辑器，支持 .drawio 文件及 Markdown 内联图表，需联网；可配置本地服务实现离线编辑，保存为 XML、支持 Git，但不支持协同编辑。
vscode 里的 draw.io 插件（官方名：draw.io integration）确实能让你不跳出编辑器，直接画流程图、架构图、uml 图等——但要注意，它不是内嵌完整版 draw.io，而是通过 iframe 嵌入 draw.io 的在线编辑器，依赖网络和 draw.io 官方服务。
安装与基础使用
在 VSCode 扩展市场搜 Draw.io Integration（作者是 jgraph），安装后重启。支持的文件类型包括 .drawio、.drawio.svg 和部分 Markdown 中的内联图表（需配置）。新建一个 test.drawio 文件，双击或右键 → “Open Diagram”，就会在 VSCode 右侧或新标签页中加载 draw.io 编辑界面。
- 保存自动写入本地
.drawio文件（XML 格式），可直接提交到 Git - 支持 Ctrl+Z / Ctrl+Y 撤销重做，快捷键与 draw.io 网页版一致
- 可拖拽添加形状、连接线，右键快速设置样式或导出
离线可用吗？
默认情况下需要联网，因为插件加载的是 draw.io 官网的编辑器（https://app.diagrams.net）。不过你可以配置为使用本地部署版本：
- 下载 draw.io Desktop，启动后会开启本地服务（如
http://localhost:8000） - 在 VSCode 设置中搜索
drawio.integration.url，改成你的本地地址（例如http://localhost:8000/?embed=1&proto=json） - 重启插件，即可离线编辑（部分高级功能如某些字体或导出选项可能受限）
和 Markdown 协同工作
如果你在写技术文档，可以直接在 Markdown 文件里嵌入 draw.io 图表：
- 用代码块标记
```drawio+ XML 内容 +```，插件可预览渲染（需启用drawio.preview.enabled） - 右键代码块 → “Edit Diagram” 就能图形化编辑，改完自动更新 XML
- 适合轻量图表，复杂图建议单独存为
.drawio文件，更易维护和复用
小技巧与注意点
几个容易忽略但实用的细节：
- 按住 Ctrl（Mac 为 Cmd）拖动可临时切换为手型移动画布
- 双击文本可快速编辑，回车确认；Esc 退出编辑模式
- 导出 PNG/SVG 时，默认背景透明，如需白底，先在“格式面板 → 页面 → 背景颜色”设为白色
- 插件不支持协同编辑（即不能像在线版那样多人实时共编），适合个人或顺序协作
基本上就这些。不需要切窗口、不用导出导入，画完即存，对写文档、画设计草稿、整理思路挺顺手。不复杂但容易忽略配置细节，配好一次，长期省事。
