lydonz/markmap

Visualize your Markdown as mindmaps with Markmap.

markmap

Visualize your Markdown as mindmaps.

This project is heavily inspired by dundalek's markmap.

👉 Try it out.

👉 Read the documentation for more detail.

Packages

• markmap-common

Common types and utility functions used by markmap packages.

• markmap-lib

  Transform Markdown to data used by markmap.

• markmap-view

  Render markmap in browser.

• markmap-autoloader

  Load markmaps automatically in HTML.

• markmap-toolbar

  Extensible toolbar for markmap.

• markmap-cli

  Use markmap in command-line.

Related

Markmap is also available in:

• VSCode and Open VSX
• Vim / Neovim: coc-markmap - powered by coc.nvim
• Emacs: eaf-markmap -- powered by EAF

Usage

Transform

Transform Markdown to markmap data:

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

Now we are ready for rendering a markmap in browser.

Render

Create an SVG element with explicit width and height:

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

Render a markmap to the SVG element:

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