直接在 VS Code 中创建图表

图表能让编码过程更加流畅，尤其是在团队协作中。图表版本与引用的代码同步更新，并在代码编辑器中进行类似的版本跟踪，可以节省大量时间。您无需退出工作区切换到外部工具，也无需每次更新图表时都进行导出/导入操作。

Henning Dieterichs 为 VS Code 编辑器开发了一个第三方图表绘制集成，让您可以实现这一目标。现在，您无需离开代码编辑器，即可使用 draw.io 编辑器创建 .drawio 图表。

目前，您可以创建和编辑 .drawio、.dio 或 .drawio.svg 文件，对 .drawio.png 文件的支持正在开发中。图表编辑器扩展程序已与 VS Code 编辑器捆绑在一起，因此您可以离线编写代码和绘制图表。

这是因为 draw.io 既是开源的，又支持嵌入到其他应用程序中。

查看完整的第三方集成列表

安装 VS Code 集成

1. 在 VS Code 编辑器中，单击左侧面板中的“扩展”部分。

2. 搜索draw.io。

3. 点击Henning Dieterichs 创建的 Draw.io 集成的 “安装”按钮。
   

在 VS Code 中创建新图表

像往常一样在 VS Code 编辑器中创建一个新文件，并确保文件扩展名为 .drawio。嵌入式图表编辑器中将显示一个新的空白图表。

在 VS Code 中编辑图表

1. 打开存放图表的文件夹，然后选择图表文件。

2. 图表将在右侧窗格中打开。如有需要，请调整窗格大小以获得更大的绘图区域。
   

更改图表编辑器主题

图表编辑器会自动使用 VS Code 编辑器的深色主题，以匹配其默认的深色主题。您可以轻松更改此设置。

1. 在 VS Code 菜单中选择“首选项”>“设置” 。

2. theme在“设置”页面中查找。

3. 在“扩展”下，点击“Draw.io 集成”，然后从下拉列表中选择一个新的主题。了解更多关于 draw.io 的信息。