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

简介

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

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

主要做了以下修改：

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

截图：

视频演示

演示环境：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+1、Alt+2 等可设置导图节点的展开层级。