可在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、点击“安装”按钮，等待安装完成并提示“已启用”。
二、创建新的Draw.io流程图文件
扩展安装完成后，可通过命令面板快速初始化一个可编辑的流程图文件，其内容为标准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中使用引用。
