【分享】最近使用的另一款 MindMap 挂件

本贴最后更新于 301 天前,其中的信息可能已经时移世易

简介

该挂件在 fex-team/kityminder-editor 的基础上,做了一些小改动以适配自己的使用习惯。用起来感觉还可以,顺便分享一下。

想起弄新导图挂件一开始是因为之前 JSMind 版的思维导图在节点的多行文本输入方面体验不佳,虽然可手动输入 <br/> 来换行,但用起来还是不太顺手。

主要做了以下修改:

  • 超链接支持思源块链接,并简化插入链接、引用块的步骤
  • 支持悬浮预览笔记内的文档、块
  • 引入全屏模式
  • 支持将当前文档的大纲转为思维导图,保留标题的块引,方便悬浮预览对应章节。
  • 修改控制导图缩放的交互方式
  • 修改切换到拖拽模式的方式
  • 支持通过快捷键 Ctrl+i /Ctrl+ o 快速导入/导出导图的 JSON 数据
  • 支持通过快捷键 Alt+i 快速导入 JSMind 版思维导图的数据,相当于导入无序列表数据
  • 支持通过快捷键 Alt+o 将导图数据导出为无序列表,保留链接和块引
  • 将导图的数据存储到挂件的块属性——备注中;

截图:

dark.png

light.png

视频演示

演示环境:Windows 10 ,V2.7.2

挂件压缩包

环境:Windows 10,V2.7.2

1、演示时使用的版本

MindMap.zip

2、修复问题

当导图出现在搜索界面的预览窗口时,导图初始化后仍选中根节点的行为会导致焦点转移到导图根节点,进而造成导图根节点标题被误修改的问题。

现修改为:初始化后自动取消选中根节点,这样可以避免导图在搜索界面的预览窗口下被误修改。

MindMap.zip

3、修复问题

  • 修复问题:当节点中有换行时,导出无序列表后再导入,会出现无法导入的问题;

MindMap.zip

4、修复问题

  • 修复【复制笔记内容作为节点备注时,块引无法识别】的问题。

MindMap.zip

5、导出图片

  • 按快捷键 ctrl + p,将导图内容以 png 图片的格式导出

看个大概还可以,没有想象中那么清晰。

MindMap.zip

使用说明

1、插入超链接

1、手动指定链接的锚文本

  • 双击导图节点后进入编辑模式,手动输入锚文本后按 Enter 结束编辑。——节点内换行是 Shift+Enter
  • 复制外部链接或者笔记内文档/块的超链接地址
  • 单击导图节点进行选中,然后按快捷键 Ctrl+K 即可插入超链接

2、使用引用块的标题作为锚文本

  • 在笔记中某个文档/块的菜单中,点击【复制该块为引用块】
  • 在导图中单击选中一个节点,然后按快捷键 Ctrl+K 即可插入超链接,此时链接的锚文本就是引用块的标题。

2、文档/块的悬浮预览

如果插入的是笔记内文档或者块的链接,那么按住 Alt 键后,鼠标悬浮在超链接图标上时会弹出该文档/块的预览窗口。

参考之前 JSMind 版思维导图里修改 mian.js 的做法——【分享】导图挂件更新,目前需要手动挂载方法:

示例:Windows10 ,V2.7.2

修改方法如下:

使用编辑器比如 VSCode 打开 笔记安装的文件夹\resources\stage\build\app\main.js,使用查找/替换功能:

搜索

t.WYSIWYG=class

替换成

window._M=n(236);window._o=n(8438);window._a=n(7377);t.WYSIWYG=class

修改后保存并关闭。

3、全屏模式

这里用的是增/删 类名的方式,所以要在 theme.css 中添加一个样式。

比如:现在使用的主题是 Dark

打开思源笔记——【更多】——【设置】——【外观】——【打开主题文件夹】,打开后,找到【Dark】文件夹,里面有个 theme.css,打开后在最后加上:

.fullScreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 200;
}

单击导图空白处让导图获得焦点后,使用快捷键 Alt+F 即可进入/退出全屏模式。

4、数据存储

  • 导图数据以 JSON 格式存储到挂件块的属性【备注】中。
  • 导图内容发生变更后,大于 1s 后会自动保存一次。
  • 还可以使用快捷键 Ctrl+S 或者手动点击右上角的【保存】按钮来手动保存数据。
  • 保存数据时,会自动整理布局。

5、JSON 数据的导入/导出

数据导出

  • 鼠标点击一下导图空白处让导图获得焦点;
  • 按快捷键 Ctrl+o 将导图的 JSON 数据复制到剪切板
  • 然后可以在代码块中粘贴 JSON 数据进行备份。或者到一个空白的导图中进行导入。

数据导入

  • 上一步已经将导图的 JSON 数据复制到剪切板
  • 对一个新插入的导图或者已经存在的导图,鼠标点击其空白处让导图获得焦点;
  • 按快捷键 Ctrl+I,就会将剪切板中的 JSON 数据写入到挂件属性中,此时会提示:【导入成功,刷新后会看到新数据】
    • 如果想使用导入的数据,此时点击右上角【刷新】按钮或者按【F5】即可渲染新导入的数据。
    • 如果是不小心按错了,不需要新数据来覆盖当前导图,可以按 Ctrl+S 来保存当前导图,此时新导入的数据会被当前数据覆盖掉。
    • 如果提示【非导图数据无法导入】,说明刚才没有正确的复制到导图的数据,最好重新导出一遍再进行导入。

6、导入旧版导图【JSMind】的数据

如果你之前有使用 JSMind 版思维导图的话,这个可能有点帮助。

  • 在 JSMind 版导图中,单击导图空白处让导图获得焦点,然后按快捷键 Alt+Q,此时会将导图的数据以无序列表的形式复制到剪切板。
  • 在当前的导图中,单击导图空白处让导图获得焦点,然后按快捷键 Alt+i 进行导入,提示导入成功后,按 F5 刷新导图即可。

7、将导图数据以无序列表的形式导出

  • 点击导图空白处让导图获得焦点
  • 按快捷键 Alt+o,此时会将导图的数据以无序列表的形式复制到剪切板
  • 到笔记中粘贴无序列表即可。

8、将当前文档的大纲转为思维导图

用法:

  • 在有大纲的文档中插入导图后,单击导图空白处,然后按快捷键 Alt+D,弹出提示:需要刷新
  • 按下 F5 来刷新导图即可看到大纲对应的导图。

导图里保留了各级标题的块引,方便查看对应章节的内容。见视频演示:

9、插入/删除备注

单击选中节点后,按下快捷键即可快速插入备注。当然,也可以点击顶栏的【备注】来手动输入备注内容。

  • 添加快捷键 Ctrl+D——将剪切板中的内容作为备注内容插入节点、
  • 添加快捷键 Ctrl+E——删除当前选中节点的备注
  • 添加快捷键 Ctrl+G——将剪切板中的内容(以代码块的形式)作为备注内容插入节点。

这几个快捷键设置的有点随意,当前纯粹是怎么顺手怎么来。如果不太符合你的习惯,可以到挂件的 index.html 那里修改一下。

10、控制导图缩放

  • 按住 Ctrl 后,通过鼠标滚轮来缩放导图,向前滚是放大。
  • 还可以通过快捷键 Ctrl +Ctrl - 来缩放导图。

11、切换拖拽模式

在导图空白处,单击鼠标中键,即可进入/退出拖拽模式。

进入拖拽模式后,可通过按下鼠标左键并移动鼠标来拖拽导图。

12、粘贴样式

给粘贴样式设置了快捷键 Alt+X,使用方法如下:

  • 给某个节点设置样式,比如背景色、字体颜色、字体大小等
  • 点击顶栏——外观——复制样式
  • 选中其他一个或者多个节点后,按快捷键 Alt+X 即可粘贴刚刚复制的样式。

13、自定义导图主题

样式这个比较主观,你可以在挂件文件夹中打开 MindMap/bower_components/kityminder-core/dist/kityminder.core.min.js 这个文件,然后从最底下往上找到类似以下代码段:

["classic","classic-compact"].forEach(function(a){var b="classic-compact"==a;e.register(a,{background:'#3c3c3c',"root-color":"#ffffff","root-background":"#bd4750","root-stroke":"#bd4750","root-font-size":24,"root-padding":b?[10,25]:[15,25],"root-margin":b?[15,25]:[30,100],"root-radius":10,"root-space":10,"root-shadow":"transparent","main-color":"white","main-background":"#a35157","main-stroke":"#a35157","main-font-size":16,"main-padding":b?[6,10]:[6,20],"main-margin":b?[5,10]:20,"main-radius":5,"main-space":5,"main-shadow":"transparent","sub-color":"white","sub-background":"transparent","sub-stroke":"#616161","sub-font-size":12,"sub-padding":[5,10],"sub-margin":b?[5,10]:[15,20],"sub-tree-margin":30,"sub-radius":5,"sub-space":5,"connect-color":"#a8be70","connect-width":1.5,"main-connect-width":3,"connect-radius":5,"selected-background":"#3c3c3c","selected-stroke":"rgb(254, 219, 0)","selected-color":"white","marquee-background":"rgba(255,255,255,.3)","marquee-stroke":"white","drop-hint-color":"yellow","sub-drop-hint-width":2,"main-drop-hint-width":4,"root-drop-hint-width":4,"order-hint-area-color":"rgba(0, 255, 0, .5)","order-hint-path-color":"#0f0","order-hint-path-width":1,"text-selection-color":"rgb(27,171,255)","line-height":1.5})})

自行修改配置,来定义自己专属的导图主题。

14、其他

  • 导图内搜索的快捷键是 Ctrl+F
  • Alt+1Alt+2 等可设置导图节点的展开层级。
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18150 引用 • 66977 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • chuais 1 评论

    怎么进入全屏模式呢,客户端 alt+f 好像可以,在浏览器中不行,首先是快捷键跟 chrome 冲突,于是我在代码里改成了其他快捷键,还是不能生效。

    1 回复
    1 操作
    chuais 在 2023-02-24 12:26:36 更新了该回帖
    帖子里的截图有说明
    someone69799
  • 其他回帖
  • someone69799
    作者
  • lfme2017

    MindMap 还有在更新吗?
    我在 2.12.5 上使用不正常。复制链接进去时成这样:
    图片.png

    并且点击链接的图标时却在浏览器上:

    127.0.0.1:14546/widgets/MindMap1/((20200812220555-lj3enxa%20'%E8%AF%B7%E4%BB%8E%E8%BF%99%E9%87%8C%E5%BC%80%E5%A7%8B'))

    跟着就没显示内容了。

  • xurdy

    大佬们,我将 MindMap 解压后放到 data 文件夹下了,为什么加载不出来?

    image.png

    image.png

    1 回复
  • 查看全部回帖