机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

Draw.io VS Code 集成

这个非官方扩展将 Draw.io（也称为 diagrams.net）集成到 VS Code 中。在官方 diagrams.net 博客 中有提及。

功能

• 在 Draw.io 编辑器中编辑 .drawio、.dio、.drawio.svg 或 .drawio.png 文件。
  • To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
  • .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
  • .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
  • To convert between different formats, use the Draw.io: Convert To... command.
• .drawio 文件是普通的 XML：它们在 git 中可以干净地进行差异比较，并且 AI 助手可以像处理其他代码一样读取、编辑和审查图表更改。
• 默认使用 Draw.io 的离线版本。
• 提供多种 Draw.io 主题。
• 使用 Liveshare 与他人协作编辑图表。
• 节点/边可以与代码片段链接。

演示

编辑 .drawio.svg/.drawio.png 文件

你可以直接编辑并保存 .drawio.svg 和 .drawio.png 文件。这些文件是完全有效的 svg/png 图像，内嵌了 Draw.io 图表。每当你编辑这样的文件时，该文件的 svg/png 部分会保持最新。

这个扩展的标志就是一个 .drawio.png 文件，该文件是使用该扩展本身创建的！

如果你希望差异可读，无论是对你的评审者还是你的 AI 工具，都应该优先选择 .drawio 图表而不是 .drawio.png 图表。

协作编辑或展示图表

在此扩展的1.0版本中，已广泛支持 VS Code Liveshare。您现在可以远程编辑或展示您的 Draw.io 图表，同时看到每个参与者的光标和选择！这可用于讨论、审查或头脑风暴图表。借助 Draw.io 的自由绘图工具和内置 LaTeX 支持，此扩展成为可用于远程代码面试的高级白板解决方案！

在内部，此扩展会将 Draw.io 图表与文本文档同步。这些文本文档由 Liveshare 共享。由于 Liveshare 无法理解文本，同时修改时可能会发生修改冲突。

代码链接功能

在状态栏中，您可以启用或禁用代码链接功能。如果启用，并且您双击一个标签以 # 开头的节点，系统将对工作区进行搜索，以查找与标签其余部分匹配的符号。

如果您有一个标记为 #MyClass 的节点和一个名为 MyClass 的类，双击该节点即可跳转到它的源代码！

请注意，您必须至少打开包含该符号的项目中的一个文件。 否则，VS Code 在搜索符号时不会考虑此项目。不过，该文件本身不必包含该符号。

感谢我最新的 GitHub 赞助者，这个功能现已开源并可自由使用。

提示: 如果您将 draw.io 编辑器打开在右侧（即第二个编辑器列）并导航到某个符号，图表将保持可见。

主题

<ul>
    <    li    >        <    p    >    主题 “地图集”    <    /p    >        <    /li    >
    <    li    >        <    p    >    主题 “肯尼迪”    <    /p    >        <    /li    >
    <    li    >        <    p    >    主题 “最小”    <    /p    >
    < li > < p > 主题 “黑暗” < /p > < /li >
</ul>

将 .svg 文件与 Draw.io 编辑器关联

默认情况下，此扩展只处理 *.drawio.svg 文件。如果您想将其与 .svg 文件关联，请将其添加到您的 VS Code settings.json 文件中：

"workbench.editorAssociations": {
    "*.svg": "hediet.vscode-drawio-text",
}

不过，你将无法编辑任意的 SVG 文件——只能编辑那些使用 Draw.io 或此扩展创建的文件！

浅色和深色 .drawio.svg 文件

默认情况下，.drawio.svg 文件会使用浅色保存，无论编辑器使用什么主题。将 hediet.vscode-drawio.svgAppearance 设置为 auto，可以让它们适应显示它们的页面的配色方案，例如 GitHub 的 README 在暗模式下；或者设置为 dark，总是以深色保存。此设置在下一次保存图表时生效。将其添加到工作区设置中，以便团队中的每个人保存相同的文件。

在 VS Code 的 Markdown 编辑器中嵌入图表（实验功能，仅限内部版本）

VS Code Insiders 提供了一个实验性的所见即所得 Markdown 编辑器（View: Reopen Editor With... > Markdown Editor）。在该编辑器中，每个标记为 drawio 的围栏代码块都会被一个可实时操作、可调整大小的 Draw.io 编辑器替代：

```drawio
<mxfile>...</mxfile>

编辑会直接写回到围栏块中，因此 Markdown 文件保持为单一的真实来源，并且撤销/重做、未保存状态和热退出功能都能正常工作。内联编辑器的块属性会被遵守：`locked` 使块只读，`height=N` 固定其高度，例如 ```` ``` drawio locked height=300 ````。Markdown 编辑器自身的锁定切换也会将图表置为只读模式。

注意事项：

-   VS Code 的贡献点是实验性的，仅存在于 Insiders 版本中；在稳定版 VS Code（以及常规 Markdown 预览）中，围栏会作为文本显示，或者由预览插件按之前方式渲染。
-   动态提供程序仅在受信任的工作区中运行。
-   嵌入编辑器的设置（主题、外观、自定义库、字体等）将在下次打开 Markdown 编辑器时生效。
-   Draw.io 插件不会加载到内联编辑器中。

## 并排编辑图表及其 XML

您可以使用 Draw.io 编辑器或作为 XML 文件打开相同的 `*.drawio` 文件。它们是同步的，因此您可以随意切换。这在您想使用查找/替换重命名文本或使用 VS Code 的其他特性加快图表创建/编辑过程时非常实用。使用 `View: Reopen Editor With...` 命令在文本编辑器和 Draw.io 编辑器之间切换。您可以为同一文件打开多个编辑器。不过，对于 SVG 文件，这个操作意义不大，因为 Draw.io 图表存储在其元数据中。

AI 助手也是同样的道理：文件对您来说是可视化图表，对您的代理来说是纯文本。当代理编辑 XML 时，修改会立即显示在打开的图表中，在拉取请求中，它可以读取图表的差异（新增节点、连接变更、新标签）并像处理代码一样处理它。

## 从其他扩展导出图表

其他扩展、键绑定和自动化可以在不打开图表文件且没有提示的情况下，将其导出为 SVG、PNG 或 `.drawio`：

```ts
const uri = await vscode.commands.executeCommand("hediet.vscode-drawio.export", {
    source: "diagrams/architecture.drawio",
    destination: "public/diagrams/architecture.svg", // optional
    format: "svg", // optional: "svg", "png" or "drawio"
    overwrite: true, // optional, defaults to false
});

• source 和 destination 是一个 Uri，一个 URI 字符串，一个绝对路径或相对于第一个工作区文件夹的路径。缺失的文件夹会被创建。
• 如果没有 destination，导出将写入源文件旁边（architecture.drawio → architecture.svg）。如果没有 format，则从 destination 的扩展名中获取，否则使用 SVG。
• 保存的文件会被导出，对于多页图表只导出第一页。它会在临时编辑器标签中短暂渲染，然后再次关闭。
• 该命令解析为写入文件的 Uri，如果导出失败则会拒绝并返回原因，例如因为目标已存在且未设置 overwrite。

如果没有参数，该命令就是 Draw.io: Export To...，它会询问活动编辑器中图表的格式和文件。

另请参见 / 类似扩展

• Draw.io - 这个扩展依赖于 Draw.io 的巨大工作。他们的嵌入功能使这个扩展成为可能！这个扩展捆绑了最新版本的 Draw.io。
• vscode-drawio by eightHundreds.