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),否则未保存的修改会丢失。
本文档主要讲述的是基于MFC的OpenGL编程;GDI是通过设备句柄(Device Context以下简称"DC")来绘图,而OpenGL则需要绘制环境(Rendering Context,以下简称"RC")。每一个GDI命令需要传给它一个DC,但与GDI不同,OpenGL使用当前绘制环境(RC)。一旦在一个线程中指定 了一个当前RC,在此线程中其后所有的OpenGL命令都使用相同的当前RC。虽然在单一窗口中可以使用多个RC,但在单一线程中只有一个当前RC。下面我将
导出与协作兼容性
- 右键画布 → “Export As” 可导出为 PNG、SVG、PDF 或 HTML,适合嵌入文档或分享
- 源文件是纯 XML 文本,可直接提交到 Git,支持文本比对和版本回溯
- 同一
.drawio文件可在 VSCode、网页版 diagrams.net 或桌面版中无缝打开,编辑内容完全同步
小技巧提升效率
- 按住 Ctrl(或 Cmd)多选形状,再用方向键微调位置
- 双击空白处添加文字说明框;双击形状快速编辑标签
- 启用“Auto-resize”(右上角齿轮 → 勾选)让画布随内容自动扩展
- 在设置中搜索 “drawio” 可调整默认缩放、主题、是否启用离线模式等
基本上就这些。不复杂但容易忽略的是:它不依赖网络(默认使用本地 JS 运行),即使断网也能正常绘图和导出。









