为 Visual Studio Code 的 Drawio 插件新增创建 Drawio 格式文件的右键菜单

为 Visual Studio Code 的 Drawio 插件新增创建 Drawio 格式文件的右键菜单

即上一篇《定制功能强大的 Windows Terminal 右键菜单》之后再水一篇定制 Windows 的小技巧文档。

什么是 drawio ?

其实 draw.io 是一个的在线专业绘图的网站，类似国内的 Processon ，但远比后者功能更加强大，支持丰富的图形和在线的图形素材库【有个这个再也不用去到处找 icon 了】。

image.png

熟悉 Visual Studio Code 的朋友应该都听说了现在已经有了对应的 VS 插件了-Draw.io Integration。看一下是不是更爱 Visual Studio Code 了呢。没错当我好好把玩了一番之后就已经爱了，最近自己在写一些自己的东西的时候都不在用 MS 的 Visio 毕竟素材库太少还比较笨重。更何况这个可以免费白嫖。

屏幕截图(12)-_LI.jpg

通过上图，可以看出其特性支持很丰富（素材搜索、图形组合、各种图形类别【流程图、UML类图】、图形编辑区[右侧]），相比原站纯英文对英语不太的小伙伴更加友好些。

创建右键菜单-"创建 Drawio 文件"

再说一下不完美的地方吧，就是插件默认不提供创建特定文件的功能（如下图），这就导致每次使用的时候都要手动创建一个后缀为 .drawio 的文件，然后使用 VIsual Studio Code 打开才能使用，比较麻烦。

image.png

而我想要的效果是酱紫的

屏幕截图(13)_LI.jpg

其实要实现这个在 Linux 桌面发行版是非常简单的，只需要创建空白文本文件，改其后缀为 **drawio **，然后将其放置到用户目录下的 **模板 **文件夹即可。在 Window 系统下则相对比较麻烦，要修改注册表才能实现。

先定义 VSCode 对 Drawio 文件的支持及默认图标

PS: 注意以下两端均为注册表文件，需要你创建一个 .reg 结尾的文本文件复制粘贴最后选中文件执行“ 合并 ”即可

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\VSCode.drawio]
@="Drawio 文件"
"AppUserModelID"="Microsoft.VisualStudioCode"

[HKEY_CLASSES_ROOT\VSCode.drawio\DefaultIcon]
; 此处为我自己制作的 ico 文件，路径使用 VSCode 默认的 icon 存放路径，此处应该注意修改地址为你的实际地址
@="D:\\SOFTWARE\\Develop\\Microsoft VS Code\\resources\\app\\resources\\win32\\drawio.ico"

[HKEY_CLASSES_ROOT\VSCode.drawio\shell]

[HKEY_CLASSES_ROOT\VSCode.drawio\shell\open]

[HKEY_CLASSES_ROOT\VSCode.drawio\shell\open\command]
; 此处应该注意修改地址为你的实际地址
@="\"D:\\SOFTWARE\\Develop\\Microsoft VS Code\\Code.exe\" \"%1\""

注册 _.drawio _文件类型

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.drawio]
@="VSCode.drawio"

[HKEY_CLASSES_ROOT\.drawio\OpenWithProgids]
"VSCode.drawio"=""

[HKEY_CLASSES_ROOT\.drawio\PersistentHandler]

[HKEY_CLASSES_ROOT\.drawio\ShellNew]
"NullFile"=""

根据自己的环境对上面的注册表文件进行定制并执行合并之后，你就可以在“右键->新建”中看到“新增 Drawio 文件”的选项了，不过此时如果你设置了 icon 的话你可能看不到 icon 的效果，莫慌只需在任务管理器中找到“资源管理器”选择重新启动就OK了。

image.png

原本打算将 icon 上传到图床，但是发现图床不支持 ico 文件，所以大家还是自己制作吧，也不复杂。