将 Draw.io 集成到 VS Code

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 731 阅读时长 ≈ 1 分钟
vscode-drawio 是一个 VS Code 扩展，它可以在 VS Code 上集成图表工具 Draw.io。

之前我们在《免费在线流程图Draw.io》中介绍过Draw.io，今天要介绍的插件 Draw.io Integration 可以将 Draw.io 集成到 VS Code 中。

安装

从网页安装

  • 在浏览器中输入 https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
  • 点击 install

网页安装

  • 点击 打开Visual Studio Code

打开应用

  • 点击 安装

开始安装

在VS Code中安装

  • 从VS Code左侧进入【扩展】，或用快捷键 ctrl+shift+x
  • 搜索draw，第一个 Draw.io Integration 就是。

title

设置

  • 在【扩展】中找到 Draw.io Integration

扩展设置菜单

  • 进入【扩展设置】

设置界面

  • 默认情况下使用 Draw.io 的脱机版本

  • 支持更换主题

title

使用

新建

  • 只要新建扩展名为 .drawio、.dio 、.drawio.svg 文件即可进入编辑

编辑文档

编辑

  • 支持同一个 *.drawio 文件同时用 Draw.io 编辑器和 xml 编辑器打开，不仅是同步的，而且可以根据需要在编辑器间进行切换。

同时编辑

保存

  • 要将 Draw.io 文件从转换 .drawio 为 .drawio.svg ，请使用 文件: 另存为 命令

后续

直接编辑 .drawio.png 文件的功能尚未发布，原因是使用了不稳定的VS Code API。

未发布的新功能

总结

想想以后可以直接在VS Code中绘制流程图、脑图、UML图，是不是很拉风~~

参考文档

vscode-drawio代码
地址：https://github.com/hediet/vscode-drawio

vscode插件drawio安装主页
地址：https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio