JSPM

markmap-lib

0.8.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 19284
  • Score
    100M100P100Q144628F
  • License MIT

Visualize your Markdown as mindmaps with Markmap

Package Exports

  • markmap-lib
  • markmap-lib/dist/transform
  • markmap-lib/dist/view

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markmap-lib) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

markmap-lib

NPM License Downloads

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: [['$','$'], ['\\(','\\)']],
    },
  },
});