VSCode 中使用 Draw.io Integration 扩展可原生创建编辑流程图。依次安装扩展、新建 .drawio 文件、导入已有图表、保存导出 PNG、启用自动同步，实现全流程本地化绘图。
如果您希望在 Visual Studio Code 编辑器中直接创建和编辑流程图，而无需切换到浏览器或独立应用，则 VSCode 的 Draw.io Integration 扩展提供了原生嵌入式绘图能力。以下是启用并使用该扩展的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Draw.io Integration 扩展
该扩展由 jgraph 官方维护，需通过 VSCode 扩展市场获取并启用，确保后续功能模块可被正确加载。
1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入 Draw.io Integration。
3、在搜索结果中找到作者为 jgraph 的官方扩展，确认描述中包含“Official draw.io integration for VS Code”。
4、点击“安装”按钮，等待安装完成，然后点击“重新加载”使扩展生效。
二、创建新的 draw.io 文件
扩展安装后，VSCode 将识别 .drawio 文件类型，并提供专用编辑器视图，支持实时渲染与交互式绘图。
1、在资源管理器中右键单击项目文件夹，选择“新建文件”。
2、将新文件命名为 diagram.drawio（扩展名必须为 .drawio）。
3、双击该文件，VSCode 将自动以 draw.io 编辑器模式打开，界面右侧显示工具栏与左侧显示形状库。
三、从已有图表导入内容
若已有本地 draw.io XML 文件或从 draw.io 网页版导出的图表，可通过导入方式复用原有设计，避免重复绘制。
1、在 draw.io 编辑器界面中，点击顶部菜单栏的 文件 → 导入。
2、选择本地磁盘中的 .drawio 或 .xml 文件，点击“打开”。
3、确认导入后，图表将完整呈现在当前编辑画布中，所有连接线、样式与分组均保留。
四、保存与导出图表
编辑完成后，图表默认以 XML 格式保存在本地文件中，同时支持一键导出为多种图像格式供文档嵌入使用。
1、点击顶部菜单栏的 文件 → 保存，确保修改已写入 .drawio 文件。
2、如需导出为 PNG，点击 文件 → 导出为 → PNG，在弹出窗口中设置背景透明度与缩放比例。
3、点击“导出”，选择保存路径，生成的 PNG 文件将保持矢量级清晰度与原始布局对齐。
五、启用自动同步与版本兼容
该扩展支持与 draw.io 官方 schema 保持同步，确保图表在不同平台打开时结构与行为一致，避免解析异常。
1、打开 VSCode 设置（Cmd+,），搜索 drawio.sync。
2、勾选 Draw.io: Sync With Online Version 选项。
3、重启 draw.io 编辑器标签页，新创建的图表将自动采用最新版 draw.io 渲染引擎解析。
