开源工具将 Markdown 转为脑图，还支持 VSCode 和 Vim

【导语】：将 Markdown 文档转为直观可视化的思维导图。

简介

Markmap 是 markdown 和 mindmap 的组合。它解析 markdown 内容并提取其内在层次结构，呈现出交互式的思维导图 mindmap，这就是 markmap。

Markmap 包含 3 个软件包：

• markmap-lib，用于解析 markdown 结构并转换为 markmap 可用的数据

$?yarn?add?markmap-lib

• markmap-view，用于在浏览器上渲染 markmap

$?yarn?add?markmap-view

• markmap-cli，markmap 的命令行工具

$?yarn?global?add?markmap-cli

除了在浏览器上使用，Markmap 还在以下编辑器中提供了插件使用：

• VSCode

https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode

• Vim/Neovim，由 coc.nvim 提供支持

https://github.com/gera2ld/coc-markmap

项目地址是：

https://github.com/gera2ld/markmap

用法

数据解析

以下例子将 markdown 结构解析为 markmap 数据，为下一步的浏览器渲染做好准备：

import?{?Transformer?}?from?'markmap-lib';

const?transformer?=?new?Transformer();

//?1.?transform?markdown
const?{?root,?features?}?=?transformer.transform(markdown);

//?2.?get?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();

渲染

创建一个具有确定高度和宽度的 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 元素中：

//?We?got?{?root?}?data?from?transforming,?and?possible?extraneous?assets?{?styles,?scripts?}.

const?{?Markmap,?loadCSS,?loadJS?}?=?window.markmap;

//?1.?load?assets
if?(styles)?loadCSS(styles);
if?(scripts)?loadJS(scripts,?{?getMarkmap:?()?=>?window.markmap?});

//?2.?create?markmap

Markmap.create('#markmap',?null,?root);

//?or?pass?an?SVG?element?directly
const?svgEl?=?document.querySelector('#markmap');
Markmap.create(svgEl,?null,?data);