使用Markmap实现在线思维导图

Markmap是一个 javascript 组件，可以将您的Markdown文档可视化为思维导图。它对于更好地导航和内容概述很有用。您可以在此处 (opens new window)在线查看它的运行情况。它也用于Atom 编辑器的扩展 (opens new window)。

Markmap组件介绍

组件效果

默认样式	多彩风格

特征

• 通过鼠标滚轮放大缩小
• 通过拖动背景平移
• 通过单击圆圈展开/折叠节点的子节点

支持的格式:

• Markdown
• Mindmup
• Txtmap (whitespace indented plaintext)
• Pandoc (limited prototype)

如何使用

使用NPM安装组件

npm install markmap

可视化 Markdown 文本包括两个步骤：

1. 文本被解析并转换为树表示。
2. 树被渲染。

例子

要运行示例，首先克隆项目并安装依赖

git clone https://github.com/dundalek/markmap.git
 cd markmap 
npm install

在示例代码中有像require('../../lib/somefile'). 在您的项目中使用此库时，您需要将它们更改为require('markmap/lib/somefile').

浏览器

运行npm start，浏览器将打开示例页面，您可以在其中查看不同格式的解析和显示方式。浏览器示例的源代码位于 examples/browser (opens new window)文件夹中。

cd示例/节点
节点 example.markdown.js

vuepress-plugin-mindmap插件

• 一个VuePress (opens new window)插件
• 将MarkDown渲染成思维导图
• 使用组件Markmap (opens new window)

install

npm install vuepress-plugin-mindmap

引入插件

package.json 包引入

"yamljs": "^0.3.0",
"vuepress-plugin-comment": "^0.7.3",
"vuepress-plugin-mindmap": "^0.2.5"

plugins.js 插件配置

[
  'vuepress-plugin-mindmap', // mindmap插件
  {
  },
],

代码Demo

# mindmap
## Links
- <https://thinking.renzhansheng.cn/>
- [GitHub](https://github.com/renzhsh/vuepress-mindmap
## Related
- [Document](https://thinking.renzhansheng.cn/devops/markdown/#思维导图)
## Features
- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`

打包生成静态文件

效果

# mindmap ## Links - //thinking.renzhansheng.cn/> - [GitHub](https://github.com/renzhsh/vuepress-mindmap ## Related - [Document](https://thinking.renzhansheng.cn/devops/markdown/#思维导图) ## Features - links - **inline** ~~text~~ *styles* - multiline text - `inline code`

注意

• 一个页面只能有一个<mindmap>;
• <mindmap></mindmap>内部不能有空格，容易造成编译失败;
• 在Front Matter部分指定宽度和高度,默认100%和400px：

mindmapWidth: '100%'
mindmapHeight: '400px'

Markmap

// 全局安装
cnpm install markmap-cli -g

// render Html
markmap note.md