如何免费的使用思维导图和流程图制作（Draw.io VS 代码集成）

这个非官方的扩展将Draw.io（也称为diagrams.net）集成到 VS Code 中。在官方的 diagrams.net博客中提到。特征在 Draw.io 编辑器中编辑、或.drawio文件。.dio.drawio.svg.drawio.png要创建一个新图表，只需创建一个空的*.drawio,*.drawio.svg或*.drawio.png文件并打开它。.drawio.svg.svg

文章共2,188字 · 阅读需要大约8分钟

一键AI生成摘要，助你高效阅读

问答

北纬32.6

6587人浏览 · 2022-04-21 02:18:48

北纬32.6 · 2022-04-21 02:18:48 发布

在线版：https://app.diagrams.net/
电脑版：Releases · jgraph/drawio-desktop · GitHub
vdcode支持：这个非官方的扩展将Draw.io（也称为diagrams.net）集成到 VS Code 中。在官方的 diagrams.net博客
中提到。

特征

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

演示

正在上传…重新上传取消

到目前为止喜欢吗？您可能还喜欢我的开源 Chrome 扩展，它增强了 Github 降价编辑器！

编辑 .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 的手绘工具和集成的 LaTeX 支持，此扩展成为可用于远程代码采访的高级白板解决方案！

正在上传…重新上传取消

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

代码链接功能

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

如果你有一个节点标记#MyClass和一个类 name MyClass，如果你双击节点，你将跳转到它的源！

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

感谢我最新的 github 赞助商，这个功能是开源的，现在可以免费使用。

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

正在上传…重新上传取消

主题

可用的 Draw.io 主题

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

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

“workbench.editorAssociations”：{
     “*.svg”：“ hediet.vscode-drawio-text ”，
}

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

并排编辑图表及其 XML

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

正在上传…重新上传取消