Draw.io Integration：在VS Code中绘制架构图和流程图

安装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”即可生成图像文件。

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

93

查看详情

例如，在 README.md 中插入：

![](architecture.png)

这样团队成员无需额外工具也能查看系统架构。

版本控制友好

Draw.io 文件本质是 XML 结构，可被 Git 跟踪。每次修改都会反映在代码差异中，便于协作审查。建议启用自动保存，并配合 Git 提交信息说明图表变更内容。

小提示：避免在多人同时编辑同一图表时产生冲突，建议拆分复杂图为多个子图模块。

基本上就这些。在 VS Code 内完成绘图，让系统设计更贴近代码工作流，提升开发效率又保持一致性。

以上就是Draw.io Integration：在VS Code中绘制架构图和流程图的详细内容，更多请关注php中文网其它相关文章！