插件下载链接: https:// github.com/awehook/vsco de-blink-mind/releases ,
插件源码github: https://github.com/awehook/vscode-blink-mind

之前开源的思维导图库blink-mind的框架基本上写完了。正所谓轮子搞定了,不造出辆车出来溜溜弯道怎么行呢,不然怎么知道这轮子是否好使呢。

于是做了这么个vscode的思维导图扩展,验证下这个库的可用性,另外确实工作中也会用的到这个扩展。

后面也会一直投入时间去维护这个插件,让这个插件能够利用vscode独有的功能,实现一些其他思维导图软件无法做到的功能。比方说:

  • 将某段代码和思维导图中的某个主题项进行关联,点击该主题项中某个链接则自动跳转到vscode 工程里面对应的代码段
  • 将代码里面的TODO 注释项按照一定的格式书写,思维导图去分析这些TODO 注释,生成有层级关系的todo list 展示。
  • 如果工作区里面有很多markdown文件,可以将这些markdown文件和思维导图主题项的备注进行关联。
  • 通过在代码文件中按照特定格式编写注释,然后去分析这些注释,最后生成函数的调用关系导图。

话不多说,先上图

界面介绍

主界面:

图太大需要点击查看才能看的更清楚一些




visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入


主题选择界面


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_02


内置五种主题。并且对于每个节点的样式也可以通过右侧的样式编辑器进行微调。

样式编辑界面

支持对边框、背景、连接线样式的编辑。

支持对文字样式(字号、行间距、颜色)的编辑。


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_03


备注编辑界面

支持对任意节点添加备注

备注的编辑器支持富文本编辑,支持插入代码。选中要编辑的文本会弹出编辑工具栏,编辑体验类似于Medium 网站。


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_04


操作介绍

新建导图

Ctrl+Shif+P 打开命令面板,输入Mind


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_05


选择Create new mindmap 新建思维导图


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_06


输入新建思维导图的名称, 比方说我想在当前工作区根目录下的react 子文件夹下新建一个名叫new-mind的思维导图,输入完成之后敲回车。


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_07


系统默认思维导图文件以.blinkmind作为后缀名。接下来文件会创建好,并自动打开编辑器。

编辑导图

右键任意节点会弹出菜单


visual code python 多行注释 vscode注释多行快捷键_vscode怎么输入_08


也可通过快捷键来进行操作, 另外拖拽操作也是支持的。

聚焦模式

在任意节点的右键菜单中选择点击set as editor root菜单项, 会对该节点进入聚焦模式进行编辑。并且在导图的左上角会出现导航栏,通过导航栏可以返回到任意父节点。


visual code python 多行注释 vscode注释多行快捷键_vscode 注释快捷键_09


保存导图

点击工具栏上的最左侧的保存按钮,会将缓冲区内容写入硬盘。


下载链接

awehook/vscode-blink-mindgithub.com

其他

什么时候publish到vscode extention market