Draw.io Integration 插件支持在 VS Code 内直接创建编辑 diagrams.net 图表，兼容 .drawio 文件及 Markdown/代码内嵌图表，自动缓存离线资源并支持中文界面与多种导出格式。
Draw.io Integration 插件让 VS Code 用户可以直接在编辑器里创建和编辑 draw.io（现为 diagrams.net）图表，无需跳转网页或外部应用，适合写文档、设计架构图、画流程图等场景。
安装与基础配置
在 VS Code 扩展市场搜索 “Draw.io Integration”，安装由 Jamie K. L. Lee 维护的官方推荐插件（图标为蓝色方块加白色“D”）。安装后重启 VS Code 即可生效。插件默认支持 .drawio 和 .dio 后缀文件，新建文件时建议用 .drawio 后缀，双击即可打开内嵌编辑器。
- 首次打开图表时会自动下载并缓存 diagrams.net 离线资源（约 5MB），后续离线也可使用
- 如需中文界面，在 VS Code 设置中搜索 drawio.language，设为
zh - 编辑器默认启用自动保存，关闭文件前记得手动保存（Ctrl+S），否则改动可能丢失
在 Markdown 或代码文件中嵌入图表
插件支持通过代码块语法在 Markdown（.md）、TypeScript、Python 等文件中直接插入可编辑图表。写法如下：
```drawio
<diagram name="流程图">
<mxGraphModel dx="1426" dy="755" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="开始" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="240" y="120" width="120" height="60" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
```- 光标放在代码块内，按 Ctrl+Shift+P → 输入 “Draw.io: Edit diagram” 即可唤出图形编辑器
- 编辑完成后保存，XML 会自动更新回代码块中，保持源文件纯净
- 支持多个 diagram 块共存于同一文件，每个独立可编辑
常用操作与技巧
编辑器界面与网页版基本一致，但部分功能有差异：例如不支持插件扩展（如 GitLab 集成）、暂无实时协同。日常够用的核心操作包括：
- 拖拽左侧形状库元素到画布，右键可复制/删除/对齐；双击文本快速编辑
- 按住 Ctrl（Cmd）多选，拖动边缘调整大小，按住 Shift 拖动保持宽高比
- 导出时右键画布 → “Export as” → 可选 PNG/SVG/PDF；SVG 支持透明背景，适合嵌入文档
- 快捷键：Ctrl+Z / Ctrl+Y 撤销重做；Ctrl+Enter 快速进入/退出文本编辑模式
常见问题处理
如果点击 drawio 文件没反应、或编辑器空白，先检查：
- VS Code 是否已更新至 1.70+ 版本（旧版本兼容性差）
- 插件是否被其他安全软件拦截了本地服务启动（Windows 用户偶尔遇此问题）
- 尝试在命令面板运行 “Draw.io: Reset Cache” 清理缓存后重启
- Markdown 中图表不渲染？确保代码块语言标记是
drawio（不是diagrams或xml）
基本上就这些。用熟之后，画个微服务调用图、数据库ER图或API流程图，全程不用离开 VS Code。
