VSCode的Draw.io Integration：在VSCode中绘制流程图_网络技术

发布时间 - 2026-01-10 00:00:00 点击率：次

可在VSCode中通过Draw.io Integration扩展直接创建编辑Draw.io流程图：安装扩展→命令面板新建.diagram文件→内嵌编辑器绘图→导出PNG/SVG/PDF等格式。

如果您希望在VSCode中直接创建和编辑Draw.io格式的流程图，而无需切换到浏览器或独立应用，则需要借助Draw.io Integration扩展实现本地化绘图工作流。以下是具体操作步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装Draw.io Integration扩展

该扩展由JetBrains官方团队维护，提供VSCode内嵌Draw.io编辑器，支持.diagram文件实时渲染与保存。安装后即可在VSCode中打开或新建流程图文件。

1、启动VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。

2、在扩展搜索框中输入Draw.io Integration，确保作者为JetBrains。

3、点击“安装”按钮，等待安装完成并提示“已启用”。

扩展安装完成后，可通过命令面板快速初始化一个可编辑的流程图文件，其内容为标准XML格式，兼容draw.io桌面版与在线版。

1、按下Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux）打开命令面板。

2、输入并选择Draw.io: Create New Diagram命令。

3、在弹出的文件保存对话框中，将文件名设为process.flow.diagram，并选择项目目录保存。

VSCode将自动以图形化界面加载.drawio或.diagram文件，调用本地Webview运行轻量级draw.io编辑器，所有操作均在编辑器窗口内完成，无需外部依赖。

1、双击刚创建的process.flow.diagram文件，在右侧打开Draw.io编辑区域。

2、从左侧形状面板拖拽Start/End、Process、Decision等基础元素至画布。

3、使用连接线工具（箭头图标）在形状间建立关系，按住Ctrl（Windows/Linux）或Cmd（macOS）可临时切换为选择工具。

Draw.io Integration默认以XML格式保存.diagram文件，同时支持一键导出为PNG、SVG、PDF等多种图像格式，便于嵌入文档或协作共享。

1、点击编辑器右上角文件 → 导出为 → PNG，设置分辨率与背景透明度。

2、在导出对话框中指定路径，确认后生成高保真图像文件。

3、如需嵌入Markdown，可将导出的PNG文件放入./docs/images/目录，并在MD中使用![流程说明](./images/process.flow.png)引用。