在VS Code中使用Draw.io插件可便捷绘制并嵌入架构图：安装JGraph官方插件后，新建或打开.drawio文件即可编辑；支持拖拽云服务组件、连线表依赖、分层划分；导出PNG/SVG/PDF并插入文档，源文件纳入版本控制保障协作安全。
在VS Code中使用Draw.io插件绘制架构图非常方便，无需离开编辑器就能快速创建、编辑和嵌入图表。这个流程适合写文档、设计系统结构或做技术方案时使用。
安装Draw.io插件
打开VS Code的扩展市场，搜索“Draw.io”或“drawio”，找到由“JGraph”官方提供的插件（通常图标是蓝色带白色线条的图形）。点击安装即可。
安装完成后，你就可以通过新建或打开以 .drawio 或 .dio 结尾的文件来启动绘图界面。
创建和编辑架构图
右键点击项目中的文件夹，选择“新建文件”，输入名称如 system-architecture.drawio，保存后会自动打开内置的Draw.io编辑器。
- 使用“General”或“AWS / Azure / Google Cloud”等形状库添加标准架构元素
- 用连接线表示服务之间的调用或数据流向
- 双击图形可添加文字说明，比如服务名或接口类型
- 支持分层设计，可用“Swimlane”来划分团队或模块边界
导出与集成
完成绘图后，可以将图表导出为多种格式以便分享或插入文档。
- 右键画布或通过菜单选择“Export As”导出为 PNG、SVG 或 PDF
- 导出的图片可插入 README.md 中，便于团队查看
- 源文件保留为 .drawio，方便后续修改
小技巧与注意事项
Draw.io 在 VS Code 中运行依赖本地Electron环境，不联网也能使用，保障数据安全。- 建议将 .drawio 文件纳入版本控制，便于协同和追踪变更
- 多人协作时，避免同时编辑同一图表文件
- 启用自动保存功能，防止意外丢失内容
基本上就这些。用好这个插件，写文档时画图效率会明显提升，而且保持工程结构整洁。
