Markmap: Turning Markdown into Interactive Mindmaps

Markmap combines Markdown and mindmap technologies to parse Markdown documents, extract their hierarchical structure, and display an interactive mindmap.

It consists of three packages: markmap-lib for parsing Markdown into Markmap data, markmap-view for rendering the mindmap in a browser, and markmap-cli as a command‑line tool. Installation commands are:

$ yarn add markmap-lib
$ yarn add markmap-view
$ yarn global add markmap-cli

Markmap also provides editor plugins for VSCode and Vim/Neovim (coc.nvim), with links to the marketplace and GitHub repository.

To transform Markdown into Markmap data, use the Transformer class from markmap-lib :

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
const { styles, scripts } = transformer.getAssets();

For rendering, include the D3 and Markmap view scripts, create an SVG element with a fixed size, load the required CSS/JS assets, and instantiate the mindmap:

<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>

// 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);

The project source code is available at https://github.com/gera2ld/markmap .