markmap-lib

markmap-lib

Visualize your Markdown as mindmaps.

This project is heavily inspired by Markmap.

Try it out.

Node.js >= 10 is required.

Installation

$ yarn add markmap-lib
# or
$ npm install markmap-lib

You can also use with npx without installation:

$ npx markmap-lib

Command-line Usage

Usage: markmap [options] <input>

Create a markmap from a Markdown input file

Options:
  -V, --version          output the version number
  -o, --output <output>  specify filename of the output HTML
  --enable-mathjax       enable MathJax support
  --enable-prism         enable PrismJS support
  --no-open              do not open the output file after generation
  -w, --watch            watch the input file and update output on the fly, note that this feature is for development only
  -h, --help             display help for command

Creating a markmap

Suppose we have a Markdown file named note.md.

Run the following command to get an interactive mindmap:

$ markmap note.md

# without global installation
$ npx markmap-lib note.md

Then we get note.html in the same directory, and hopefully it will be open in your default browser.

Watching changes

Enable watching mode by -w:

$ markmap -w note.md

A markmap will be created and opened in your browser, and will be updated as soon as changes are saved to the source file.

API

Transform

Transform Markdown to markmap data:

import { transform } from 'markmap-lib/dist/transform';

const data = transform(markdown);

Now we get the data for rendering in data.

Render

Render a markmap from transformed data:

Create an SVG element with explicit width and height:

<svg id="markmap" style="width: 800px; height: 800px"></svg>

Render a markmap to the SVG element:

import { Markmap } from 'markmap-lib/dist/view';

Markmap.create('#markmap', null, data);

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

Plugins

• mathJax - MathJax
• prism - PrismJS

Command-line

To enable plugins in command line, just add the related option, for example:

$ markmap note.md --enable-mathjax --enable-prism

API

loadPlugins loads necessary CSS and JavaScript files.

import { Markmap, loadPlugins } from 'markmap-lib/dist/view';

loadPlugins([
  'mathJax',
  'prism',
])
.then(() => {
  Markmap.create('#markmap', null, data);
});

MathJax options can be changed in the second parameter:

loadPlugins([
  'mathJax',
  'prism',
], {
  mathJax: {
    tex: {
      inlineMath: [['$','$'], ['\\(','\\)']],
    },
  },
});

Related

• Use with Vim / Neovim: coc-markmap
• Use with GatsbyJS: gatsby-remark-markmap