Draw.io Integration 是 VSCode 中轻量实用的插件，支持在编辑器内直接创建编辑 draw.io 流程图，无需网页或桌面版；默认识别 .drawio/.dio 文件，内嵌 diagrams.net 编辑器，支持拖拽绘图、实时保存、多格式导出、Git 版本管理及跨平台同步，且完全离线可用。
Draw.io Integration 是 VSCode 中一个轻量实用的插件，能让你在编辑器内直接创建和编辑 draw.io（现称 diagrams.net）格式的流程图，无需跳转网页或安装桌面版。
安装与基础配置
在 VSCode 扩展市场中搜索 “Draw.io Integration”，安装由 jgraph 官方发布的插件（图标为蓝色流程图）。安装后重启 VSCode 即可生效。插件默认支持 .drawio 和 .dio 后缀文件，新建文件时建议直接命名为 xxx.drawio，双击即可进入可视化编辑界面。
快速绘制与保存
打开 .drawio 文件后，会自动加载内嵌的 diagrams.net 编辑器。左侧是图形库（流程图、UML、网络拓扑等），拖拽形状到画布即可连接、标注、分组。所有操作实时保存在当前文件中——关闭标签页前记得按 Ctrl+S（Windows/Linux）或 Cmd+S（macOS），否则未保存的修改会丢失。
导出与协作兼容性
- 右键画布 → “Export As” 可导出为 PNG、SVG、PDF 或 HTML，适合嵌入文档或分享
- 源文件是纯 XML 文本，可直接提交到 Git，支持文本比对和版本回溯
- 同一
.drawio文件可在 VSCode、网页版 diagrams.net 或桌面版中无缝打开，编辑内容完全同步
小技巧提升效率
- 按住 Ctrl（或 Cmd）多选形状，再用方向键微调位置
- 双击空白处添加文字说明框；双击形状快速编辑标签
- 启用“Auto-resize”（右上角齿轮 → 勾选）让画布随内容自动扩展
- 在设置中搜索 “drawio” 可调整默认缩放、主题、是否启用离线模式等
基本上就这些。不复杂但容易忽略的是：它不依赖网络（默认使用本地 JS 运行），即使断网也能正常绘图和导出。
