markmap-view

Render a markmap from transformed data.

Installation

$ npm install markmap-view

Or load from CDN:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>

Usage

Create an SVG element with explicit width and height:

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

Assuming we have already got { root } node and assets { styles, scripts } from markmap-lib.

There are two ways to import markmap-view:

// load with <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;

// or as ESM
import * as markmap from 'markmap-view';
import { Markmap, loadCSS, loadJS } from 'markmap-view';

Now we can render a markmap to the SVG element:

// 1. load assets
if (styles) loadCSS(styles);
if (scripts) {
	loadJS(scripts, {
		// For plugins to access the `markmap` module
		getMarkmap: () => markmap,
	});
}

// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root); // -> returns a Markmap instance

The first argument of Markmap.create can also be an actual SVG element, for example:

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> returns a Markmap instance

Options

The Markmap options has a type of IMarkmapOptions. It can be passed to Markmap.create upon Markmap creation or mm.setOptions afterwards.

It is a low-level object with functions, making it difficult to serialize, so it is not portable.

So, I recommend using JSON options when possible. The JSON options represent a subset of the low-level options as a tradeoff for portability.

It can be easily converted into the low-level options:

import { deriveOptions } from 'markmap-view';

const options = deriveOptions(jsonOptions);