Repolode
提交项目
hediet

hediet/vscode-drawio

一款非官方的 VS Code 扩展，可在编辑器内直接创建和编辑 Draw.io（diagrams.net）图表。

在 GitHub 查看官网
Star
9,511
Fork
470
未关闭 Issue
171
最近提交
21小时前

这是什么？

该扩展可在 VS Code 中打开 .drawio、.dio、.drawio.svg 和 .drawio.png 文件，并使用 Draw.io 编辑器进行编辑。默认内置离线版 Draw.io，无需联网即可编辑图表。新建图表只需创建一个空的对应文件，另有命令可在不同格式之间转换。

.drawio.svg 和 .drawio.png 本身就是有效的图片文件，保存时会同步更新内嵌的图表，可直接显示在 GitHub README 等位置。普通的 .drawio 文件为 XML 格式，在 git 中的差异清晰可读，也便于 AI 助手读取和修改。

此外还支持多种 Draw.io 主题、通过 Live Share 进行协作编辑和演示，并可将节点与代码符号关联，双击即可跳转到源码。图表与其 XML 源文件也可并排编辑并保持同步。

核心功能

  • 01在 Draw.io 编辑器中编辑 .drawio、.dio、.drawio.svg 和 .drawio.png 文件。
  • 02默认内置离线版 Draw.io。
  • 03保存时同步更新内嵌的 SVG 或 PNG 图像。
  • 04以纯 XML 存储图表，在 git 中差异清晰。
  • 05支持 Live Share 进行协作编辑和演示。
  • 06可将图表节点关联到代码符号并跳转到源码。

适用场景

  • 将架构图与其描述的代码保存在同一仓库中。
  • 使用 SVG 格式的图表直接嵌入 GitHub README。
  • 通过可读的 XML 差异在 Pull Request 中审查图表改动。
  • 与同事通过 Live Share 实时协作绘制图表。

快速上手

  1. 1

    从 VS Code 应用市场安装该扩展

  2. 2

    创建一个以 .drawio、.drawio.svg 或 .drawio.png 结尾的空文件并打开

使用前须知

  • 这是非官方扩展，并非 diagrams.net 团队开发。
  • 采用 GPL-3.0 许可证，属于 Copyleft 许可。
  • Markdown 内嵌编辑需要 VS Code Insiders 版本，且处于实验阶段。

标签

#diagram#drawio#vscode-extension#diagramming#svg#whiteboard#hacktoberfest

常见问题

vscode-drawio 是什么？
一款非官方的 VS Code 扩展，可在编辑器内直接创建和编辑 Draw.io（diagrams.net）图表。 该扩展可在 VS Code 中打开 .drawio、.dio、.drawio.svg 和 .drawio.png 文件，并使用 Draw.io 编辑器进行编辑。默认内置离线版 Draw.io，无需联网即可编辑图表。新建图表只需创建一个空的对应文件，另有命令可在不同格式之间转换。
vscode-drawio 可以免费使用吗？用的什么许可证？
vscode-drawio 以 GPL-3.0 许可证开源。用于商业产品前，请先确认许可证条款。
vscode-drawio 还在维护吗？
活跃维护中。vscode-drawio 最近一次提交是在 2026年11月6日。
vscode-drawio 适合用来做什么？
将架构图与其描述的代码保存在同一仓库中。 使用 SVG 格式的图表直接嵌入 GitHub README。 通过可读的 XML 差异在 Pull Request 中审查图表改动。 与同事通过 Live Share 实时协作绘制图表。
vscode-drawio 怎么安装和运行？
从 VS Code 应用市场安装该扩展 创建一个以 .drawio、.drawio.svg 或 .drawio.png 结尾的空文件并打开
在哪里获取 vscode-drawio？
源代码和安装说明在 GitHub 上：https://github.com/hediet/vscode-drawio

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目