Markmap 是一个可以将 markdown 通过思维导图的方式进行可视化的开源工具,是 markdown 和 mindmap 的结合,它解析 markdown 内容并提取其层次结构并呈现交互式思维导图。
我们可以直接通过 markmap 的在线网站直接使用该工具,试用地址:https://markmap.js.org/repl/。我们可以直接根据官网的语法来进行学习:
# Markmap
## 链接
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)
## 相关
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## 特性
- links
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('code block');
```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
感觉就是 Markdown 语法换了种表现形式,#
表示一级标题,##
表示二级标题,###
表示三级标题。编写完成后可以将可视化的思维导图导出成交互式的 HTML 或者 svg 图片。
更让人喜欢的是该工具还提供了 VSCode 插件,在 VSCode 中搜索 markmap
即可安装该插件,可以直接在 VSCode 中预览 markmap:
markup 要求思维导图的后缀名为 .mm.md
,然后用 VSCode 打开就能编辑啦:
此外我们还可以使用 markmap 命令行工具,比如在本地终端中使用 markmap 命令行,使用如下所示的命令即可:
$ npx markmap-cli markmap.md
当然也可以全局安装它:
$ yarn global add markmap-cli
$ markmap markmap.md
还可以使用 -w
参数来 watch 文件,以便可以编辑 markdown 文件并即时获取更新:
$ markmap -w markmap.md
如果你想在前端代码中自行控制使用 markmap,可以先安装 markmap-lib
这个库来转换 markdown 数据:
$ yarn add markmap-lib
使用如下代码可以将 markdown 转换成 markmap 数据对象:
import { Transformer } from 'markmap-lib';
const transformer = new Transformer();
// 1. 转换 makrdown
const { root, features } = transformer.transform(markdown);
// 2. 获取 assets 数据
// either get assets required by used features
const { styles, scripts } = transformer.getUsedAssets(features);
// or get all possible assets that could be used later
const { styles, scripts } = transformer.getAssets(features);
有了 markmap 的数据后我们可以使用 markmap-view
库来进行渲染:
$ yarn add markmap-view
首先创建一个确定宽高的 SVG 元素:
<script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
<svg id="markmap" style="width: 800px; height: 800px"></svg>
然后渲染 markmap 数据到 SVG 元素:
// load with <script>
const { markmap } = window;
// or with ESM
import * as markmap from 'markmap-view';
const { Markmap, loadCSS, loadJS } = markmap;
// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root);
The first argument of Markmap.create can also be an actual SVG element, for example:
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data);
仓库地址:https://github.com/gera2ld/markmap