vscode drawio

draw.io vs代码集成

此非官方扩展名将draw.io（也称为图表）集成到VS代码中。
在“官方图”博客中提到。

特征

• 编辑.drawio ， .dio ， .drawio.svg或.drawio.png文件中的draw.io编辑器中的文件。
  • 要创建一个新图，只需创建一个空*.drawio ， *.drawio.svg或*.drawio.png文件并打开它。
  • .drawio.svg是有效的.svg文件，可以嵌入github readme文件中！无需出口。
  • .drawio.png是有效的.png文件！无需出口。您应该在可能的情况下使用.svg它们看起来好多了！
  • 要在不同格式之间转换，请使用Draw.io: Convert To...命令。
• 默认情况下使用draw.io的离线版本。
• 有多个draw.io主题可用。
• 使用Liveshare与他人协作编辑图表。
• 节点/边缘可以与代码跨度链接。

演示

到目前为止喜欢吗？您可能还喜欢我的开源Chrome扩展名，可增强GitHub Markdown编辑器！

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

您可以直接编辑并保存.drawio.svg和.drawio.png文件。这些文件是包含嵌入式draw.io图的完全有效的SVG/PNG图像。每当您编辑此文件时，该文件的SVG/PNG部分将保持最新状态。

此扩展程序的徽标是使用扩展程序本身创建的一个.drawio.png文件！

如果差异对您很重要，则应该更喜欢.drawio并避免.drawio.png图。

合作编辑或现在图

随着此扩展版的1.0版，已经添加了对VS Code Liveshare的广泛支持。现在，您可以在看到每个参与者的光标和选择的同时远程编辑或显示您的draw.io图！这可用于讨论，审查或集思广益图。借助draw.io的徒手绘图工具和集成的乳胶支持，该扩展名成为一种高级白板解决方案，可用于远程代码访谈！

在内部，此扩展名将draw.io图与文本文档同步。这些文本文档由Liveshare共享。由于Liveshare对文本没有理解，因此可能会在同时修改上发生修改冲突。

代码链接功能

在状态栏中，您可以启用或禁用代码链接功能。如果它已启用，然后双击其标签以#开头的节点，则将执行与标签其余部分相匹配的符号的工作区搜索。

如果您的节点标有#MyClass和一类名称MyClass ，则双击节点，您将跳到其源！

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

多亏了我最新的GitHub赞助商，此功能是开源的，现在可以自由使用。

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

主题

可用的draw.io主题

• 主题“ Atlas”

  

• 主题“肯尼迪”

  

• 主题“最低”

  

• 主题“黑暗”

  

与draw.io编辑器相关.svg文件

默认情况下，此扩展名仅处理*.drawio.svg文件。如果要将其与.svg文件相关联，请将其添加到VS代码settings.json中。

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

但是，您将无法编辑任意SVG文件 - 只有那些使用draw.io或此扩展名创建的文件！

编辑图表及其XML并排编辑

您可以使用draw.io编辑器和XML文件打开相同的*.drawio文件。它们是同步的，因此您可以随心所欲地在它们之间切换。如果您想使用查找/替换来重命名文本或VS代码的其他功能来加快图表创建/编辑过程，这将是非常实用的。使用View: Reopen Editor With...在文本或draw.io编辑器之间切换。您可以为同一文件打开多个编辑器。但是，这对于SVG文件并没有多大意义，因为draw.io图存储在其元数据中。

贡献者

• Henning Dieterichs，Github上的Hediet（主要贡献者 /作者）
• VincentRouillé，Github上的Speedy37

另请参阅 /类似的扩展

• draw.io-此扩展名取决于draw.io的巨大作品。他们的嵌入功能可以实现此扩展！此扩展程序将最新版本的draw.io捆绑在一起。
• vscode-drawio by八百。

其他很酷的扩展

如果您喜欢此扩展名，则可能也喜欢我的其他扩展名：

• 调试可视化器：调试时可视化数据结构的扩展程序。
• 实时调试：此扩展程序可视化您的代码的执行方式。