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 后缀，双击即可打开内嵌编辑器。
zh
插件支持通过代码块语法在 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>
```编辑器界面与网页版基本一致，但部分功能有差异：例如不支持插件扩展（如 GitLab 集成）、暂无实时协同。日常够用的核心操作包括：
如果点击 drawio 文件没反应、或编辑器空白，先检查：
drawio（不是 diagrams 或 xml）基本上就这些。用熟之后，画个微服务调用图、数据库ER图或API流程图，全程不用离开 VS Code。
以上就是用Draw.io Integration插件在VS Code中绘制图表的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
118
收藏
