markmap-lib

markmap-lib

Visualize your Markdown as mindmaps.

This project is heavily inspired by Markmap.

Try it out.

Node.js >= 10 is required.

Usage

Command-line

Installation

Install globally:

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

or use with npx:

$ npx markmap-lib

Commands

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
  -h, --help             display help for command

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.

API

Installation

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

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

Related

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