安装Draw.io扩展后可在VS Code中直接创建、编辑.drawio或.dio文件，利用内置编辑器拖拽图形、连线并自定义样式，支持导出为PNG/SVG嵌入Markdown文档，图表以XML存储便于Git版本控制，推荐拆分复杂图为子模块避免协作冲突。
在VS Code中使用Draw.io可以高效绘制架构图、流程图和各类示意图，无需离开编辑器。通过官方扩展“Draw.io Integration”，你可以直接嵌入、编辑和导出图表，提升开发文档和系统设计的效率。
安装 Draw.io 扩展
打开 VS Code，进入扩展市场（Extensions Marketplace），搜索 “Draw.io Integration”，选择由 Hainan Hu 开发的官方版本并安装。安装完成后，你就可以在项目中创建或打开 .drawio 或 .dio 文件。
支持的文件格式：
- .drawio：标准 Draw.io 图表文件
- .dio：轻量级别名格式，功能相同
创建和编辑图表
右键点击资源管理器中的文件夹，选择“新建文件”，命名为 example.drawio。保存后双击该文件，VS Code 会自动启动内置的 Draw.io 编辑器面板。
编辑界面包含完整的图形库、连接线工具和样式设置，支持拖拽操作。你可以：
- 从左侧图形库中拖动组件到画布（如服务器、数据库、终端等）
- 使用连接线表示数据流或调用关系
- 自定义颜色、字体和布局
- 添加文本说明或注释框
与 Markdown 和文档集成
Draw.io 可将图表导出为 PNG 或 SVG 格式，并嵌入 Markdown 文档中。右键点击 .drawio 文件，选择“Export as Image”即可生成图像文件。
例如，在 README.md 中插入：
这样团队成员无需额外工具也能查看系统架构。
版本控制友好
Draw.io 文件本质是 XML 结构，可被 Git 跟踪。每次修改都会反映在代码差异中，便于协作审查。建议启用自动保存，并配合 Git 提交信息说明图表变更内容。
小提示：避免在多人同时编辑同一图表时产生冲突，建议拆分复杂图为多个子图模块。
基本上就这些。在 VS Code 内完成绘图，让系统设计更贴近代码工作流，提升开发效率又保持一致性。
