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

最新推荐文章于 2025-06-02 18:57:10 发布

原创最新推荐文章于 2025-06-02 18:57:10 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开源

Markmap是一个将Markdown转换为交互式思维导图的工具，包括markmap-lib（解析器），markmap-view（浏览器渲染）和markmap-cli（命令行工具）。它还提供VSCode和Vim的插件支持。该项目由gera2ld维护，解析Markdown内容生成可视化思维导图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【导语】：将 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);